Custom CSS selector passed in as class prop is not used

[agazso]

For example the Button component has a prop called class but when trying to pass in a custom CSS selector it is ignored.

Here is a screenshot of an example I am trying to use.

[vojtechsimetka]

This is expected behaviour. The svelte compiler does not recognize class on custom components and hence thinks the css rule is not being used and in the optimize step removes the style definitions from the compiled css. Svelte 5 might change it sveltejs/svelte#8538 , but for now this is the conclusion sveltejs/svelte#2870 . I personally don't agree with the decision Svelte team took. There are workarounds, so if you want to make it work you have few options (sorted by my personal prefference):

0. Consider whether you need to solve this directly on the Button component. Maybe it should be handled with a wrapper div (layout things generally should be handled this way)
1. Use :global modifier, here .container :global(.copy-button) { ... }, which makes sure the copy-button is not stripped by svelte compiler. The downside is, that if the button itself or it's children use this class, you will affect them as well. But this is why in the first place we allow class to be passed to our components (see the end of "Describe the problem" chapter, not the proposed solution A way to declare a scoped class for the CSS compiler (ex use:class) sveltejs/svelte#8345 )
2. See if we can prevent svelte compile process from optimizing away these styles. Hot candidates how to solve this is:

• via PostCSS config (unclear if possible)
• Vite css.modules https://vitejs.dev/guide/features.html#css-modules
• this Passing class to components sveltejs/svelte#2870 (comment)

3. Put the .copy-button in a separate css file which is imported here. The actual class .copy-button is present on the button, it's just that the styles are stripped. However, importing the rules from imported css file makes them global styles.
4. Put the .copy-button class styles to global stylesheed app.pcss

[agazso]

Okay, this is not great, but I worked it around with a wrapper div.