Skip to content

scope page styles in vue templates using style scoped #34571

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
nitzan-treg wants to merge 1 commit into
base: next
Choose a base branch
from
Open

scope page styles in vue templates using style scoped #34571

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 71 additions & 1 deletion code/frameworks/vue3-vite/template/cli/js/Page.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,6 @@

<script>
import MyHeader from './Header.vue';
import './page.css';

export default {
name: 'my-page',
Expand All @@ -81,3 +80,74 @@ export default {
},
};
</script>

<style scoped>
.storybook-page {
margin: 0 auto;
padding: 48px 20px;
max-width: 600px;
color: #333;
font-size: 14px;
line-height: 24px;
font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.storybook-page h2 {
display: inline-block;
vertical-align: top;
margin: 0 0 4px;
font-weight: 700;
font-size: 32px;
line-height: 1;
}

.storybook-page p {
margin: 1em 0;
}

.storybook-page a {
color: inherit;
}

.storybook-page ul {
margin: 1em 0;
padding-left: 30px;
}

.storybook-page li {
margin-bottom: 8px;
}

.storybook-page .tip {
display: inline-block;
vertical-align: top;
margin-right: 10px;
border-radius: 1em;
background: #e7fdd8;
padding: 4px 12px;
color: #357a14;
font-weight: 700;
font-size: 11px;
line-height: 12px;
}

.storybook-page .tip-wrapper {
margin-top: 40px;
margin-bottom: 40px;
font-size: 13px;
line-height: 20px;
}

.storybook-page .tip-wrapper svg {
display: inline-block;
vertical-align: top;
margin-top: 3px;
margin-right: 4px;
width: 12px;
height: 12px;
}

.storybook-page .tip-wrapper svg path {
fill: #1ea7fd;
}
</style>
72 changes: 71 additions & 1 deletion code/frameworks/vue3-vite/template/cli/ts/Page.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,6 @@
import { ref } from 'vue';

import MyHeader from './Header.vue';
import './page.css';

const user = ref<{ name: string } | null>(null);

Expand All @@ -71,3 +70,74 @@ const onCreateAccount = () => {
user.value = { name: 'Jane Doe' };
};
</script>

<style scoped>
.storybook-page {
margin: 0 auto;
padding: 48px 20px;
max-width: 600px;
color: #333;
font-size: 14px;
line-height: 24px;
font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.storybook-page h2 {
display: inline-block;
vertical-align: top;
margin: 0 0 4px;
font-weight: 700;
font-size: 32px;
line-height: 1;
}

.storybook-page p {
margin: 1em 0;
}

.storybook-page a {
color: inherit;
}

.storybook-page ul {
margin: 1em 0;
padding-left: 30px;
}

.storybook-page li {
margin-bottom: 8px;
}

.storybook-page .tip {
display: inline-block;
vertical-align: top;
margin-right: 10px;
border-radius: 1em;
background: #e7fdd8;
padding: 4px 12px;
color: #357a14;
font-weight: 700;
font-size: 11px;
line-height: 12px;
}

.storybook-page .tip-wrapper {
margin-top: 40px;
margin-bottom: 40px;
font-size: 13px;
line-height: 20px;
}

.storybook-page .tip-wrapper svg {
display: inline-block;
vertical-align: top;
margin-top: 3px;
margin-right: 4px;
width: 12px;
height: 12px;
}

.storybook-page .tip-wrapper svg path {
fill: #1ea7fd;
}
</style>
72 changes: 71 additions & 1 deletion code/renderers/vue3/template/cli/js/Page.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,6 @@

<script>
import MyHeader from './Header.vue';
import './page.css';

export default {
name: 'my-page',
Expand All @@ -81,3 +80,74 @@ export default {
},
};
</script>

<style scoped>
.storybook-page {
margin: 0 auto;
padding: 48px 20px;
max-width: 600px;
color: #333;
font-size: 14px;
line-height: 24px;
font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.storybook-page h2 {
display: inline-block;
vertical-align: top;
margin: 0 0 4px;
font-weight: 700;
font-size: 32px;
line-height: 1;
}

.storybook-page p {
margin: 1em 0;
}

.storybook-page a {
color: inherit;
}

.storybook-page ul {
margin: 1em 0;
padding-left: 30px;
}

.storybook-page li {
margin-bottom: 8px;
}

.storybook-page .tip {
display: inline-block;
vertical-align: top;
margin-right: 10px;
border-radius: 1em;
background: #e7fdd8;
padding: 4px 12px;
color: #357a14;
font-weight: 700;
font-size: 11px;
line-height: 12px;
}

.storybook-page .tip-wrapper {
margin-top: 40px;
margin-bottom: 40px;
font-size: 13px;
line-height: 20px;
}

.storybook-page .tip-wrapper svg {
display: inline-block;
vertical-align: top;
margin-top: 3px;
margin-right: 4px;
width: 12px;
height: 12px;
}

.storybook-page .tip-wrapper svg path {
fill: #1ea7fd;
}
</style>
72 changes: 71 additions & 1 deletion code/renderers/vue3/template/cli/ts/Page.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,6 @@
import { ref } from 'vue';

import MyHeader from './Header.vue';
import './page.css';

const user = ref<{ name: string } | null>(null);

Expand All @@ -71,3 +70,74 @@ const onCreateAccount = () => {
user.value = { name: 'Jane Doe' };
};
</script>

@coderabbitai coderabbitai Bot Apr 17, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Find any remaining references to page.css in vue3 template paths and in the rendererAssets wiring.
fd -t f 'page\.css$'
rg -nP -C2 "page\.css" --type=ts --type=js --type=vue
rg -nP -C2 "rendererAssets|template/cli" --type=ts --type=js -g '!**/node_modules/**' | rg -n "vue3|page"

Repository: storybookjs/storybook

Length of output: 212

🏁 Script executed:

# Find the rendererAssets directory structure and configuration
find code/lib/create-storybook/rendererAssets -type f -name "*.ts" -o -name "*.js" -o -name "*.json" | head -20

Repository: storybookjs/storybook

Length of output: 120

🏁 Script executed:

# Check the structure of rendererAssets to understand how templates are organized
ls -la code/lib/create-storybook/rendererAssets/

Repository: storybookjs/storybook

Length of output: 291

🏁 Script executed:

# Look for Vue3-specific template configuration
find code/lib/create-storybook -type f \( -name "*.ts" -o -name "*.js" \) | xargs grep -l "vue3\|vue-3" | head -10

Repository: storybookjs/storybook

Length of output: 321

🏁 Script executed:

# Find all Vue3 Page.vue templates
find code/renderers/vue3/template -name "Page.vue" -type f

Repository: storybookjs/storybook

Length of output: 154

🏁 Script executed:

# Check the content of Vue3 Page.vue templates to see if they import page.css
find code/renderers/vue3/template -name "Page.vue" -type f -exec cat {} \;

Repository: storybookjs/storybook

Length of output: 7330

🏁 Script executed:

# Find files that handle asset copying/template generation
find code/lib/create-storybook -type f \( -name "*.ts" -o -name "*.js" \) | xargs grep -l "rendererAssets\|page\.css" | head -20

Repository: storybookjs/storybook

Length of output: 122

🏁 Script executed:

# Check the common rendererAssets directory contents
find code/lib/create-storybook/rendererAssets/common -type f

Repository: storybookjs/storybook

Length of output: 1400

🏁 Script executed:

# Look for generator or template copy logic that might reference page.css
rg -n "page\.css|rendererAssets/common" code/lib/create-storybook/src --type=ts -A 3 -B 3

Repository: storybookjs/storybook

Length of output: 47

🏁 Script executed:

# Read baseGenerator.ts to see how assets are copied
cat code/lib/create-storybook/src/generators/baseGenerator.ts

Repository: storybookjs/storybook

Length of output: 10036

🏁 Script executed:

# Search for vue3 specific generator or asset handling
find code/lib/create-storybook/src/generators -type f -name "*.ts" | xargs grep -l "vue3\|Vue3"

Repository: storybookjs/storybook

Length of output: 185

🏁 Script executed:

# Find and read the copyTemplateFiles function to see what it does with commonAssetsDir
find code/lib -name "*.ts" -o -name "*.js" | xargs grep -l "export.*copyTemplateFiles" | head -5

Repository: storybookjs/storybook

Length of output: 47

🏁 Script executed:

# Search in cli package for the copyTemplateFiles implementation
find code -path "*/cli/*" -name "*.ts" | xargs grep -l "copyTemplateFiles" 2>/dev/null | head -10

Repository: storybookjs/storybook

Length of output: 127

🏁 Script executed:

# Look for copyTemplateFiles in storybook/internal/cli
find code -type f -name "*.ts" | xargs grep -l "function copyTemplateFiles\|export.*copyTemplateFiles" | head -5

Repository: storybookjs/storybook

Length of output: 93

🏁 Script executed:

# Read the copyTemplateFiles function in helpers.ts
cat code/core/src/cli/helpers.ts

Repository: storybookjs/storybook

Length of output: 7872

🏁 Script executed:

# Check all renderer templates to see if any still import page.css
find code/renderers -name "Page.vue" -o -name "Page.svelte" -o -name "Page.tsx" -o -name "Page.ts" | xargs grep -l "page\.css" 2>/dev/null

Repository: storybookjs/storybook

Length of output: 308

🏁 Script executed:

# Search more broadly for page.css imports across all templates
rg "page\.css" code/renderers --type=ts --type=js --type=svelte -l

Repository: storybookjs/storybook

Length of output: 95

🏁 Script executed:

# Check if other frameworks still use page.css in their templates
rg "page\.css" code/lib/create-storybook/rendererAssets --type=ts --type=js --type=html

Repository: storybookjs/storybook

Length of output: 47

🏁 Script executed:

# Check if those other templates actually import page.css
grep -n "page\.css" code/renderers/html/template/cli/ts/Page.ts
grep -n "page\.css" code/renderers/react/template/cli/ts/Page.tsx
grep -n "page\.css" code/renderers/web-components/template/cli/ts/Page.ts

Repository: storybookjs/storybook

Length of output: 133

🏁 Script executed:

# Check Svelte templates for page.css import (without specifying file type to avoid error)
grep -n "page\.css" code/renderers/svelte/template/cli/js/Page.svelte
grep -n "page\.css" code/renderers/svelte/template/cli/ts/Page.svelte

Repository: storybookjs/storybook

Length of output: 114

🏁 Script executed:

# Verify once more that Vue3 templates are the only ones NOT importing page.css
echo "=== Vue3 JS Page.vue ===" && grep -n "page\.css\|import" code/renderers/vue3/template/cli/js/Page.vue | head -20
echo -e "\n=== Vue3 TS Page.vue ===" && grep -n "page\.css\|import" code/renderers/vue3/template/cli/ts/Page.vue | head -20

Repository: storybookjs/storybook

Length of output: 225

Fix factual error about template count and confirm orphaned file issue.

There are two (not four) Vue3 Page.vue templates, and neither imports ./page.css. However, the concern about orphaned files is valid: page.css is still being copied to all scaffolded projects via the commonAssetsDir mechanism in copyTemplateFiles() (helpers.ts), including Vue3 projects where it remains unused. Other renderers (HTML, React, Svelte, Web-Components) still import page.css, but it should be removed from rendererAssets/common/page.css and either deleted or moved to renderer-specific asset directories to avoid copying unused files to Vue3 projects.

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@code/renderers/vue3/template/cli/ts/Page.vue` at line 73, The comment notes
page.css is unused by the two Vue3 Page.vue templates but is still copied via
copyTemplateFiles() using commonAssetsDir; to fix, remove
rendererAssets/common/page.css from commonAssetsDir so Vue3 projects don't
receive it (either delete it entirely or move it into the specific renderer
asset directories that actually import it such as
HTML/React/Svelte/Web-Components), and update copyTemplateFiles() or the assets
registration so only renderer-specific asset dirs are included; verify Page.vue
in the Vue3 renderer does not import ./page.css and that no other shared code
expects rendererAssets/common/page.css.

<style scoped>
.storybook-page {
margin: 0 auto;
padding: 48px 20px;
max-width: 600px;
color: #333;
font-size: 14px;
line-height: 24px;
font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.storybook-page h2 {
display: inline-block;
vertical-align: top;
margin: 0 0 4px;
font-weight: 700;
font-size: 32px;
line-height: 1;
}

.storybook-page p {
margin: 1em 0;
}

.storybook-page a {
color: inherit;
}

.storybook-page ul {
margin: 1em 0;
padding-left: 30px;
}

.storybook-page li {
margin-bottom: 8px;
}

.storybook-page .tip {
display: inline-block;
vertical-align: top;
margin-right: 10px;
border-radius: 1em;
background: #e7fdd8;
padding: 4px 12px;
color: #357a14;
font-weight: 700;
font-size: 11px;
line-height: 12px;
}

.storybook-page .tip-wrapper {
margin-top: 40px;
margin-bottom: 40px;
font-size: 13px;
line-height: 20px;
}

.storybook-page .tip-wrapper svg {
display: inline-block;
vertical-align: top;
margin-top: 3px;
margin-right: 4px;
width: 12px;
height: 12px;
}

.storybook-page .tip-wrapper svg path {
fill: #1ea7fd;
}
</style>
Loading