Subscribe
Sign in
Purgecss — Easily remove unused CSS
When you are building a website with a css framework like Bootstrap, you will only use a part of the framework and unused css styles will be included.
Purgecss removes unused selectors from your css, resulting in smaller files.
"With PurgeCSS, you'll have a hard time generating CSS that isn't under 10kb minified and gzipped." - Tailwindcss docs
22
Replies
Best
@hristiyandodov
Purgecss was designed to be modular and works with every type of files. One of the step of the process is to get the used selectors in the content files (e.g. js).
By default, it will look into each word in the file and consider it a selector.
So if you add a class with jquery `.addClass(“js-my-button”)`, `js-my-button` will be register as a used selector.
You can customize this behavior and provide a function to select the selector in the file.
@ffloriel_ Alright, but what if the class name is formed on runtime through a variable like that:
$elem.addClass("js-my-" + name);
Would it leave all rules that contain `js-my-`?
@hristiyandodov With the default settings, it will not consider `js-my-button` used and will remove the css.
There are a few options to go around this problem. One is to whitelist the selector.
The second one is to create a custom extractor. I am experimenting with it at the moment in the purgecss-from-js repo.
The idea is to use prepack the code and generate the classname so that Purgecss can find them.
Links:
whitelisting in purgecss: https://www.purgecss.com/whiteli...
purgecss-from-js: https://github.com/FullHuman/pur...
Facebook prepack: https://prepack.io/
I've wanted something like this forever! If you can also incorporate a feature to show how many times something is used that would be an extra bonus.
I'm trying to use Purgecss now and I think it's getting stuck on sass variable names; do you know if that's the issue if I'm getting errors like "CssSyntaxError: :16:12: Unknown word"?
Such a needed resource for web developers. It can be so tough to keep track of the CSS you're not using anymore that is dragging down your page load times and unnecessarily complicating your code.
@edwardvasquezdr
Purgecss is framework agnostic. It is not specific to a framework or plateform.
There is currently no grunt plugin for it. Purgecss is available via a CLI, a javascript API, Webpack, Gulp and Rollup plugins.
I will add Grunt shortly.
@edwardvasquezdr @ptothaointi
It is still a work in progress but the grunt plugin is available here:
https://github.com/FullHuman/gru...
@drbcardoso
You can see Purgecss as an updated version of PurifyCSS. Purgecss does not have the issues of PurifyCSS. You can also find information on the documentation about the differences. Purifycss is also not actively maintained anymore.
Links:
purifycss issues: https://github.com/purifycss/pur...
comparison: https://www.purgecss.com/compari...
Mode Remote