Svelte Example Components injecting global CSS

[Amerlander]

Describe the bug
The example components (Button, Header, Page) are adding the CSS files trough import './header.css';.
The CSS is then Globally available and not scoped to the Component.

storybook/code/lib/cli/rendererAssets/svelte/Header.svelte

Line 3 in c745ff6

import Button from './Button.svelte';

The Behavior of adding CSS through an Import is resulting in global CSS is not the Bug. Usual, most Svelte Components would not import CSS like that, and therefore I think having a Component as a sample which introduces a bad pattern and leads to side effects should be avoided.

To Reproduce
Every new installation of Storybook ads this behavior.

Additional context
There are two ways so solve that (sveltejs/svelte#7125):

• Create a container element, add css to that and import the external css file through a precompiler like scss
• Do not import the css file, but write the CSS directly inside the component.

I think adding css into the components will be cleaner, but it will also mean duplicating the css code for svelte.

[Amerlander]

Example: Here is an Icon component, that has an unstyled SVG. But there is still some css applied, which comes from the header-css:

Also, I have a Button component, which has an Icon.
This is how it should look like and how it looks on my actual site:

And this is how the component looks like in storybook after a fresh installation of storybook:

I think storybook should not come with that behavior by default. So a novice User should not have to remove three components after installation to avoid css issues.

[shilman]

ZOMG!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.1.0-alpha.14 containing PR #22162 that references this issue. Upgrade today to the @future NPM tag to try it out!

npx sb@next upgrade --tag future

[shilman]

Jiminy cricket!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.10 containing PR #22162 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb@latest upgrade

[yannbf]

Thank you so much @Amerlander !!