:global styles for customElements

[diegologs]

Is your feature request related to a problem? Please describe. I want to use Svlete with CustomElements and I want to keep styles cause Svelte removes unused styles. Without CustomElements I can use :global in the styles to keep them but with CustomElements is not working.

I know that this is an issue of Svelte, but I see in this issue that someone says that you can use :global with svelte-preprocess to make it work.

I tried with svelte-preprocess and postcss installled using the :global syntax and the syntax of <style global> but none of them work.

Describe the solution you'd like Would svelte-preprocess be able to remove the :global for customElement and keep the selectors so that they are not deleted if not used?

Describe alternatives you've considered The alternative is implement this in Svelte itself but this PR is closed and will not bet merged.

How important is this feature to you? Is important cause I want to implement a container query polyfill to the webcomponents but I can't cause I need CSS rules that JS needs and not are in the DOM, also I certain cases I need some dynamic classes with styles (for example passing clases with information of the props) therefore it is the same problem, I have styles that are not in the DOM.

Additional context

[SergkeiM]

+1

[MaartenCL]

+1

We have styles in our project that we would like to use as mixins on various svelte components/pages. We have a general LESS file and import them all there because then we get a huge list of "unused CSS selector" warnings. Basically the whole mixin functionality of LESS is unusable for us.

The only solution we can think of at the moment is to precompile all the LESS styles and put that in global.css. :/

Describe the solution you'd like Make :global styles available for mixins in LESS/SASS in all svelte components without having to import them.

[newlegendmedia]

+1 All my .less base classes and mixins are generating a ton of unused CSS warnings.

[dummdidumm]

If using Vite or SvelteKit, this can be achieved by importing the stylesheet in the script tag like import "./path/to/your.less"

[rowthan]

Still not work for customElements.

[rowthan]

Is there any method to disable css tree-shake