Skip to content
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.

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

[Bug]: Global CSS bleeds between preloaded stories #30391

Open
valentinpalkovic opened this issue Jan 27, 2025 · 2 comments
Open

[Bug]: Global CSS bleeds between preloaded stories #30391

valentinpalkovic opened this issue Jan 27, 2025 · 2 comments
Labels

Comments

@valentinpalkovic
Copy link
Contributor

Describe the bug

Storybook’s preloading mechanism currently preloads the first story in a story file when the Storybook instance is initialized. Additionally, hovering over other stories triggers their preloading. However, this functionality has introduced an issue where global CSS (non-modularized styles) from preloaded stories persists and bleeds into the current story, leading to unintended style conflicts.

Image

Reproduction link

Reproduction steps

  1. Create a Storybook with two stories. The second one should import a css file with global CSS (e.g. background: red)
  2. Visit the first story and now hover over the second one. -> CSS of the preloading bleeds into the first one

System

-

Additional context

No response

Copy link
Contributor

greptile-apps bot commented Jan 27, 2025

** Disclaimer** This information might be inaccurate, due to it being generated automatically
This is likely related to how Storybook handles CSS cleanup during story transitions. The fix would involve: 1. Modify the story preloader in @storybook/preview-web to track and cleanup global styles: - Add style cleanup to the PreviewWeb class's story transition logic - Ensure renderToDOM() cleans up previous story's global styles before rendering 2. Potential implementation approach: js // Track global styles per story const storyStyles = new Map(); // During story load/unload function cleanupGlobalStyles(storyId) { const styles = storyStyles.get(storyId); styles?.forEach(style => style.remove()); storyStyles.delete(storyId); } function trackGlobalStyles(storyId, styleElements) { storyStyles.set(storyId, styleElements); } 3. Apply this cleanup during both story transitions and preloading operations to prevent style bleeding.

About Greptile

This response provides a starting point for your research, not a precise solution.

Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

Edit Issue Bot Settings · Greptile

@valentinpalkovic valentinpalkovic moved this to Needs Discussion in Core Team Projects Jan 27, 2025
@valentinpalkovic valentinpalkovic changed the title [Bug]: Global CSS Bleeds Between Preloaded Stories in Storybook [Bug]: Global CSS bleeds between preloaded stories in Storybook Jan 27, 2025
@valentinpalkovic valentinpalkovic changed the title [Bug]: Global CSS bleeds between preloaded stories in Storybook [Bug]: Global CSS bleeds between preloaded stories Jan 27, 2025
@shilman
Copy link
Member

shilman commented Jan 27, 2025

Isn't this just a general problem with unscoped CSS in SPAs? I can see how preloading makes it extra annoying but does it fundamentally change anything?

We have a really old issue about CSS not getting reset between stories, and AFAIK the response has just been "that's how SPAs work." If there's a good solution for unloading story specific CSS that would be amazing

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants