Replies: 1 comment
-
The package you are using
Which will allow you to safeguard classes that should not be purged |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Hi,
I've recently discovered an easy way to use purgecss with vanilla extract while using the vite bundler.
I figured this might be useful for others who might be using sprinkles.
Short Version
The short version is to use this plugin within vite instead of using purgecss via postcss
and to make sure any call to a sprinkles function is done within a .css.ts file
Longer Version
One of the really handy features of vanilla-extract is to the use of sprinkles to create atomic css rules.
However this can result in a lot of the properties that are not used ending up in the final css bundle.
Resulting in very big css bundles
There's been some discussions about if tree shaking should be supported etc but currently that's not going to be a thing.
Rainbow Sprinkles uses a different approach via css variables
One of the ways to remove redundent css is via purgecss, which I believe is a common approach when using tailwind.
However if you try to insert purgecss as a postcss plugin then provide it a directory via it's content property
This isn't going to work, with the above more than likley purgecss will just purge everything
as it's directly reading the source files, seeing anything vanilla-extract related and not idenifying it as css.
One workaround to this is to insert purgecss as a vite plugin instead of via postcss.
This way purgecss can look at the code after it's been transpiled / bundled to extract what css is in use
vite.config.ts
This does seem to work but has one limitation.
When calling the sprinkles function with a list of styles you have to make sure it's done within a .css.ts file
If it's done directly within the control then purgecss will pick up on all the css props within the final js bundle which is not what you want (unless you're trying to use sprinkles at runtime dynamically)
Demo1.vue.css.ts
Demo1.vue
Beta Was this translation helpful? Give feedback.
All reactions