Purgecss

Easily remove unused CSS

#2 Product of the DayJanuary 26, 2018

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

Around the web

Reviews

  • Ashish KumarMaker of things!
    Pros: 

    Quite handy

    Cons: 

    None

    Works exactly as expected in the first go.

    Ashish Kumar has used this product for one day.
  • Özlem D.Technical Support
    Pros: 

    easy to use, useful tool for frontend

    Cons: 

    maybe the scope can be extend

    I love it.

    Özlem D. has used this product for one day.

Discussion

Hunter
Makers
You need to become a Contributor to join the discussion - Find out how.
Hristiyan Dodov@dodooov · Web developer. Can do a headspin.
How does it handle JavaScript-generated elements, though? It appears that it digs in your HTML, compares it with your CSS and removes unnecessary stuff. But what if you append an element with jQuery and give it a class `js-my-button`? It wouldn’t be in your HTML so any styles applied to it in your CSS would be removed? 🤔 Nick DeNardis says in his article that it "is searching through all .html, .blade.php, .js and .vue files" but it seems suspicious to me. There are so many ways to create elements in JS and style them. How does it guarantee that it won’t stab you in the throat by removing something that’s actually used?
FflorielMaker@ffloriel_ · Software engineer
@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.
Hristiyan Dodov@dodooov · Web developer. Can do a headspin.
@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-`?
FflorielMaker@ffloriel_ · Software engineer
@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/
Daniel Cardoso@drbcardoso · Front end Web Developer @ Primetag
What are the main differences between Purgecss and purifycss?
FflorielMaker@ffloriel_ · Software engineer
@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...
Edward Vasquez@edwardvasquezdr · Founder of shuuka.com
purgecss also works with grunt, angular?
FflorielMaker@ffloriel_ · Software engineer
@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.
Pointi@ptothaointi · Co-Founder iamstudent.at
@edwardvasquezdr @ffloriel_ grunt support would be awesome! thanks in advance!
Rich Smith@richjdsmith
@edwardvasquezdr @ffloriel_ <3 Thanks for the gulp support, this looks fantastic!
FflorielMaker@ffloriel_ · Software engineer
@edwardvasquezdr @ptothaointi It is still a work in progress but the grunt plugin is available here: https://github.com/FullHuman/gru...
Edward Vasquez@edwardvasquezdr · Founder of shuuka.com
@ptothaointi @ffloriel_ 😍 wao thank you very much!
Steven J. Selcuk@stevenselcuk · Filmmaker & UI Desing and Illustration
I love this! 😍
Andrew TyePro@awt · Trying to make things people want
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.