fix(core): replace nested CSS selectors with flat selectors in preview iframe#34057
fix(core): replace nested CSS selectors with flat selectors in preview iframe#34057mibragimov wants to merge 1 commit intostorybookjs:mainfrom
Conversation
…w iframe
The CSS nested selector syntax `* { ... }` inside `.sb-errordisplay_main`
was being incorrectly flattened by some CSS post-processors and build tools
(e.g. Vite, PostCSS) into a global `* { background: #fff; color: #000; }`
rule that leaked into the story iframe and overrode user styles.
Replace all nested CSS selectors in base-preview-head.html with flat,
fully-qualified selectors that are unambiguous and safe across all CSS
processors. The same issue applied to `.sb-nopreview_main`'s `& *` rule.
Fixes storybookjs#34036
Fixes storybookjs#33947
Fixes storybookjs#33735
📝 WalkthroughWalkthroughCSS selectors in the nopreview and error display blocks are refactored from broad/nested patterns to scoped class-specific variants. Changes target Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@code/core/assets/server/base-preview-head.html`:
- Around line 225-228: The CSS selector targeting the error stack doesn't match
the actual markup: update the rule that currently targets ".sb-errordisplay_main
.sb-errordisplay pre" so it actually matches the <pre> which has class
"sb-errordisplay_code" directly under ".sb-errordisplay_main"; change the
selector to target ".sb-errordisplay_main pre.sb-errordisplay_code" (or
".sb-errordisplay_main .sb-errordisplay_code") and keep the existing white-space
properties to ensure the error stack override is applied to the correct element.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: ab0a5d23-4a98-46cf-be29-f60b2f5f6119
📒 Files selected for processing (1)
code/core/assets/server/base-preview-head.html
| .sb-errordisplay_main .sb-errordisplay pre { | ||
| white-space: pre-wrap; | ||
| white-space: revert; | ||
| } |
There was a problem hiding this comment.
Fix the pre selector; it no longer matches the error markup.
In code/core/assets/server/base-preview-body.html:84-119, the <pre> itself has class="sb-errordisplay_code" and sits directly under .sb-errordisplay_main, so .sb-errordisplay_main .sb-errordisplay pre never applies. That leaves the error stack white-space override unscoped again.
Suggested fix
- .sb-errordisplay_main .sb-errordisplay pre {
+ .sb-errordisplay_main .sb-errordisplay_code {
white-space: pre-wrap;
white-space: revert;
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| .sb-errordisplay_main .sb-errordisplay pre { | |
| white-space: pre-wrap; | |
| white-space: revert; | |
| } | |
| .sb-errordisplay_main .sb-errordisplay_code { | |
| white-space: pre-wrap; | |
| white-space: revert; | |
| } |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@code/core/assets/server/base-preview-head.html` around lines 225 - 228, The
CSS selector targeting the error stack doesn't match the actual markup: update
the rule that currently targets ".sb-errordisplay_main .sb-errordisplay pre" so
it actually matches the <pre> which has class "sb-errordisplay_code" directly
under ".sb-errordisplay_main"; change the selector to target
".sb-errordisplay_main pre.sb-errordisplay_code" (or ".sb-errordisplay_main
.sb-errordisplay_code") and keep the existing white-space properties to ensure
the error stack override is applied to the correct element.
|
Hi @mibragimov, Due to a recent high volume of unreviewed AI-generated PRs, we are randomly requesting verification and proof that the implemented fix actually works. Please provide a simple GIF/Video or image of how the bugfix works, optimally with before-and-after comparisons. Thank you for your understanding! |
2 participants
Summary
Replace all nested CSS selectors in
base-preview-head.htmlwith flat, fully-qualified selectors to prevent a global*style leak caused by incorrect CSS nesting flattening.Root Cause
The CSS nested selector
* { background: white; color: black; }inside.sb-errordisplay_mainwas being incorrectly flattened by some CSS post-processors and build tools (e.g. Vite with CSS minification, PostCSS) into a global* { background: #fff; color: #000; }rule. This leaked out of the Storybook error display block and overrode all user styles in the preview iframe.The same problem affected
.sb-nopreview_main's& * { ... }nested rule.This is a CSS nesting syntax issue: while modern browsers support
@layer-nested CSS natively, many CSS post-processing tools (including some versions of PostCSS/cssnano/lightningcss used by Vite) do not correctly handle arbitrary nesting and may de-nest the*selector to the root scope.Fix
Replace all nested CSS selectors in
base-preview-head.htmlwith flat, explicit selectors:.sb-errordisplay_main * { ... }instead of nesting* { ... }inside.sb-errordisplay_main.sb-errordisplay_main ol { ... },.sb-errordisplay_main h1 { ... }, etc. instead of& ol,& h1nested forms.sb-nopreview_main * { ... }instead of& * { ... }inside.sb-nopreview_mainThe flat selector approach is unambiguous, universally supported, and safe across all CSS processors.
Testing
This is a static HTML/CSS file with no associated unit tests. The fix can be verified by:
base-preview-head.html* { background: ... }rule appears in the built CSSCloses #34036
Closes #33947
Closes #33735
Summary by CodeRabbit