Storybook: Declare stylesheet dependencies explicitly #49099
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
mirka
commented
Mar 15, 2023
Comment on lines
+52
to
+53
|
|
||
| stylesToUse.forEach( ( style ) => style.use() ); |
There was a problem hiding this comment.
You can add this console.log around here to verify which stylesheets are being loaded:
stylesToUse.forEach( console.log );
|
Size Change: 0 B Total Size: 1.34 MB ℹ️ View Unchanged
|
|
Flaky tests detected in b60077e. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/4427685434
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes #49057
What?
Adds additional config to the Storybook
withRTLdecorator so only explicitly declared stylesheet dependencies will be loaded for a given story group.Why?
To properly isolate stories from problematic, leaky styles. There can sometimes be some overscoped styles in a given package's stylesheet, which can inadvertently affect an upstream or peer package's story. For example, if the
block-editorpackage stylesheet contained a style like.components-modal { background: yellow; }, we would not want to load that style for theModalcomponent story.How?
I tried to structure this in a way that would be clear for other devs how to extend the config when they want to add new story groups. Is it discoverable, clear, and documented enough? Let me know.
Testing Instructions
npm run storybook:devand a check some stories in each story group (e.g. Playground, BlockEditor, Components, etc). Try the RTL switcher. It should look the same as in trunk — if not, you may have found an isolation issue that was already there 😄See inline code comment to see where you can add a console.log statement to verify which stylesheets are loaded.