Svelte: Scope Starter Page Styles

[xu91102]

Summary

• moves Svelte starter Page template styles into component-local <style> blocks
• removes the global ./page.css import from Svelte, SvelteKit, and Svelte Vite starter Page templates
• excludes Vue templates because scope page styles in vue templates using style scoped #34571 already covers the Vue-specific path

Fixes #23862

Verification

• rg "import './page\\.css';" work/storybook-api/files/code/frameworks/svelte-vite work/storybook-api/files/code/frameworks/sveltekit work/storybook-api/files/code/renderers/svelte -n produced no matches
• Confirmed each of the six changed Svelte templates contains exactly one local <style> block
• Verified GitHub compare against storybookjs/storybook:next is ahead by 1, behind by 0, and touches only the six intended Svelte Page templates

Full Storybook lint/CI was not run locally because cloning the full repository timed out in this environment; the change is limited to generated starter template source files.

Manual testing

1. Create a Storybook Svelte, SvelteKit, or Svelte Vite starter project from this branch.
2. Open the generated Page story and confirm it keeps the same layout and typography as before.
3. Add another story that renders a plain <section> element and confirm it no longer receives the starter Page styles.

[github-actions]

	Fails
🚫	PR is not labeled with one of: ["ci:normal","ci:merged","ci:daily","ci:docs"]
🚫	PR is not labeled with one of: ["qa:needed","qa:skip","qa:success"]

Generated by 🚫 dangerJS against c4909ae

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 520e62e6-cb16-4210-bc38-7e7de7d79bbd

📥 Commits

Reviewing files that changed from the base of the PR and between 3b1cc8d and d2a98c5.

📒 Files selected for processing (6)

• code/frameworks/svelte-vite/template/cli/js/Page.svelte
• code/frameworks/svelte-vite/template/cli/ts/Page.svelte
• code/frameworks/sveltekit/template/cli/js/Page.svelte
• code/frameworks/sveltekit/template/cli/ts/Page.svelte
• code/renderers/svelte/template/cli/js/Page.svelte
• code/renderers/svelte/template/cli/ts/Page.svelte

---

📝 Walkthrough

Walkthrough

Six Svelte Page component templates across svelte-vite, sveltekit, and svelte renderer frameworks transition from importing external ./page.css stylesheets to inlining equivalent CSS directly within each component via new <style> blocks. No component behavior or markup is altered; only styling delivery mechanism changes.

Changes

Page Component Style Consolidation

Layer / File(s)	Summary
svelte-vite template—js and ts variants code/frameworks/svelte-vite/template/cli/js/Page.svelte, code/frameworks/svelte-vite/template/cli/ts/Page.svelte	Removes ./page.css import from both JavaScript and TypeScript variants and adds an equivalent inline <style> block defining .storybook-page layout, headings, paragraphs, links, lists, and tip wrapper/SVG styling.
sveltekit template—js and ts variants code/frameworks/sveltekit/template/cli/js/Page.svelte, code/frameworks/sveltekit/template/cli/ts/Page.svelte	Removes the external stylesheet dependency from both variants and inlines the complete .storybook-page and tip UI styling rules, including heading sizing, text spacing, and SVG path coloring.
svelte renderer template—js and ts variants code/renderers/svelte/template/cli/js/Page.svelte, code/renderers/svelte/template/cli/ts/Page.svelte	Removes ./page.css imports and adds inline <style> blocks containing page container layout, typography rules, list formatting, and the "tip" callout badge and SVG styling.

🎯 2 (Simple) | ⏱️ ~10 minutes

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[xu91102]

Thanks for the Danger feedback. I updated the PR title and added the required #### Manual testing\ section. I do not have permission to add labels to this repository; could a maintainer please add the appropriate labels, likely \�ug, \ci:normal, and \qa:skip?

[valentinpalkovic]

Closing due to #23862 (comment)