Fix svelte example components to not add css global

[Amerlander]

Issue: #19409

What I did

I moved the imported css directly into the component to scope it to the component and prevent it from being applied global.

How to test

• Is this testable with Jest or Chromatic screenshots?

I'm not into jest, I guess this is testable, but I don't know how to add these tests.

[benmccann]

Should we add a comment at least saying where it came from so that we can keep it in sync more easily? And maybe also in the source file letting people know if they update it they need to do so in both places

[IanVS]

Thanks for identifying this issue and for the PR. We talked about it a bit as a team, and wonder if you would be willing to solve this within the .css files themselves, by properly scoping them to the components (the other option you identified in the issue you opened). This would have the benefit of solving the issue for all frameworks, and would avoid duplication and drift in the svelte examples. Is that something you'd be willing to consider doing?

[Amerlander]

Well, haven't thought about that, but I think that makes sense.

The other option I identified in the issue was like using sass to import the .css files inside the style tags – but that would require to add scss as a permanent dependence. If I got you right, you mean, that I just add classes in the .css to each rule and to each component (so not only for svelte, but for each target), like doing the scoping manually.

I'll close this and will come up with a new PR the next days.

[IanVS]

Thanks, yes I think we want to keep this as simple as possible, and not introduce new dependencies. I think that adding a class to the component and scoping the css to that class is the best way to go here. The button.css already uses that approach, with a storybook-button class.

I understand if this is maybe more work than you bargained for, but super appreciate if you're willing to take a stab at it. Feel free to open a draft PR with one framework to gather feedback before going through all of them, if you'd like.