vite-plugin-purgecss v0.2.12
Fork of vite-plugin-html-purgecss
vite-plugin-purgecss
This Vite plugin automatically removes unused CSS based on HTML & JS output using PurgeCSS.
- Lightweight install and runtime environment
Install
npm
npm i vite-plugin-purgecss
Usage
Configuration
Use plugin in your Vite config (vite.config.ts
)
import htmlPurge from 'vite-plugin-purgecss'
export default {
plugins: [
htmlPurge({ ...options }),
]
}
Usage with Javascript and non-HTML frameworks
When using frameworks that don't export to HTML (or settings styles via JS), PurgeCSS typically doesn't find anything. To fix this, I've hardcoded the plugin to feed JS code into PurgeCSS (instead of just HTML) to scan for any inlined CSS strings.
This isn't a perfect solution, as it doesn't catch explicit style changes (x.style.color = 'red';
). This could potentially be resolved with FullHuman/purgecss-from-js, but it uses CJS which is incompatible with Vite. A better solution might present itself later on.
That being said, this solution should work with most frameworks. It should even work better than a normal PurgeCSS CLI pass. I tested with SvelteKit with @sveltejs/adapter-cloudflare, and it worked flawlessly.
Options
Optionally supply a UserDefinedOptions
as you would with PurgeCSS.
If some of your CSS classes aren't making it to the final output, try adding them to safelist
in the options object.
An example of this would be Popovers in Bootstrap. Sometimes, the arrow on popovers won't be picked up by PurgeCSS, so I might set:
safelist: [ /popover/ ]
to manually whitelist all Popover related classes.