windicss/svelte-windicss-preprocess

How to use global styles?

www-chique opened this issue · 2 comments

First of all, many thanks for WindiCSS! It's absolutely amazing. Especially the variant grouping, speed, and developer experience is top notch! I'm glad I found out about WindiCSS. It's so much better in terms of everything.

However, I am facing this particular problem...
In my setup, in App.svelte, I have the following:

<style global>
	@layer base {
	        body {
		        @apply text-sm;
	        }
        }
        @layer components {
	        .wonderful {
		        @apply text-blue-500;
	        }
        }
</style>

However, these styles are not being applied. In every other svelte component where the styles have a class which exists inside the HTML of that component, it works. But because in the App.svelte I have those classes which doesn't exist in the HTML (because those are global classes, which I use from other components) it's being marked as "unused" and not generated.

I am a newbie at this.
Any help is much appreciated. Thanks.

it should work as you marked it with following syntax, I am more than happy to help, please give some more insight about your setup, you could also join our discord to ask others for help

<style global>

</style>

After a little bit of digging, it looks like the issue is not related to WindiCSS, but most probably postcss.
Many thanks for your quick reply.