Yes, everything you mentioned is great – but you’ll notice almost all of it has to do with either styling from within your component or extra boilerplate and verbosity to allow you to style things from outside the component. While you usually need some internal CSS, only styling from within your component is NOT how the real world works. What’s the first thing you do when you start a new web project? Throw a reset.css file in there.

I want a headless UI component system, and that was a nightmare with Svelte for me. They purposefully made it very hard to actually style your components in the normal, natural way of applying styles to the component tag itself without a ton of boilerplate. For example:

The class solution you presented to pass a class into the component was not dependable for me. Svelte started randomly overwriting classes I passed in when it assigned its scoping class behind the scenes. I could not find a way to add a class to a component from outside the component that was dependable in a production environment. Not being able to add a class to an element is incredibly limiting.
You can use :global to style elements, but it’s truly global, meaning it leaks outside of your file to everything on your page – not just the elements and components in the file you’re working in. So you have to wrap everything in a div and scope it to that div everywhere in your code. Additionally, when you use a lot of components, your style sheet just looks like one big long list of :globals() and is difficult to visually parse.
Perhaps worst of all, in Svelte, the component tag you use does not actually represent a real element in the document, similar to a template tag in html. That makes sense with a template tag because you can easily target the elements inside, but not with an enclosed component where you ALSO can’t easily target the things inside. The two ideas are diametrically opposed in my mind.

This caused all sorts of problems and unnatural ways I had to do things:

I couldn’t target the tag name of an element in my CSS – in the same document the tag was in (without wrapping it in yet another :global selector).
I couldn’t do something like put an id on the component and target items in the component’s slot with it. I would have to either wrap another needless div around the component and scope the slotted items with that, or I would have to a.) add a custom property in the component called id, b.) export it, c.) assign an id to my component, d.) in my css, even though I’m targeting the children inside a tag with an id assigned all in this document, I would still have to wrap it in a :global selector.
I couldn’t even position the component itself on my page without adding extra boilerplate inside the component or wrapping it in yet another extra needless div – and in both cases still having to use another :global selector.

The result is, I ended up finding myself wrapping all my components in extra divs, which was just ugly and messy and bloated my html. And they’re aware of this too because not only do they recommend you do this as the solution, but they actually do this behind the scenes themselves with syntactic sugar features such as css variable properties. This can create even more problems because they’re inserting invisible divs into your html that you actually CAN target with your CSS.

I just found accessing anything inside a component to style it or programmatically alter it was just a mess of extra boilerplate I had to set up. I finally realized I was increasing time by using Svelte instead of saving it.

Having said that, I’m sure I did not learn every trick or approach to doing this and there might be better ways, but for me, Svelte provided the opposite of an intuitive, approachable and user-friendly styling API.

You can separate things.

I think it they are actually removed by default https://github.com/sveltejs/svelte/issues/697 but than not sure how one can actually instruct Svelte to not remove specific styles ?

That’s what I’m using today, but then I can’t use the sweet component styling for App :P It’s not that bad, but it would be nice with a better solution.

In App.svelte:

<style lang="scss" global>
  @import "./styles/global.scss";
</style>

Cheers!

https://codesandbox.io/s/svelte-theme-components-crt54?fontsize=14&module=%2FButton.svelte

Although maybe should not promote writing code where we style base elements directly. Even in scoped code this could easily lead to problems when expanding upon the code. A better idea in my opinion is to use simple class names like in Bootstrap. In Svelte, you don’t have the CSS clashes that Bootstrap has due to its lack of namespacing.