Remove unused CSS. Also works with single-page apps.
A function that takes content (HTML/JS/PHP/etc) and CSS, and returns only the used CSS.
PurifyCSS does not modify the original CSS files. You can write to a new file, like minification.
If your application is using a CSS framework, this is especially useful as many selectors are often unused.
Installation
npm i -D purify-css
import purify from "purify-css" const purify = require("purify-css")let content = "" let css = "" let options = { output: "filepath/output.css" } purify(content, css, options)
$ npm install -g purify-css
$ purifycss -hpurifycss [option]
Options: -m, --min Minify CSS [boolean] [default: false] -o, --out Filepath to write purified css to [string] -i, --info Logs info on how much css was removed [boolean] [default: false] -r, --rejected Logs the CSS rules that were removed [boolean] [default: false] -w, --whitelist List of classes that should not be removed [array] [default: []] -h, --help Show help [boolean] -v, --version Show version number [boolean]
Statically analyzes your code to pick up which selectors are used.
But will it catch all of the cases?
button-active
// javascript // Anytime your class name is together in your files, it will find it. $(button).addClass('button-active');
button-active
// Can detect if class is split. var half = 'button-'; $(button).addClass(half + 'active');// Can detect if class is joined. var dynamicClass = ['button', 'active'].join('-'); $(button).addClass(dynamicClass);
// Can detect various more ways, including all Javascript frameworks. // A React example. var classes = classNames({ 'button-active': this.state.buttonActive });
return ( Submit; );
var content = ' Login '; var css = '.button-active { color: green; } .unused-class { display: block; }';console.log(purify(content, css));
logs out:
.button-active { color: green; }
var content = ['**/src/js/*.js', '**/src/html/*.html']; var css = ['**/src/css/*.css'];var options = { // Will write purified CSS to this file. output: './dist/purified.css' };
purify(content, css, options);
var content = ['**/src/js/*.js', '**/src/html/*.html']; var css = '.button-active { color: green; } .unused-class { display: block; }';var options = { output: './dist/purified.css',
// Will minify CSS code in addition to purify. minify: true,
// Logs out removed selectors. rejected: true };
purify(content, css, options);
logs out:
.unused-class
var content = ['**/src/js/*.js', '**/src/html/*.html']; var css = ['**/src/css/*.css'];purify(content, css, function (purifiedResult) { console.log(purifiedResult); });
var content = ['**/src/js/*.js', '**/src/html/*.html']; var css = ['**/src/css/*.css'];var options = { minify: true };
purify(content, css, options, function (purifiedAndMinifiedResult) { console.log(purifiedAndMinifiedResult); });
// Four possible arguments. purify(content, css, options, callback);
contentargument
Arrayor
String
Arrayof glob file patterns to the files to search through for used classes (HTML, JS, PHP, ERB, Templates, anything that uses CSS selectors).
Stringof content to look at for used classes.
cssargument
Arrayor
String
Arrayof glob file patterns to the CSS files you want to filter.
Stringof CSS to purify.
optionsargument
Object
minify:Set to
trueto minify. Default:
false.
output:Filepath to write purified CSS to. Returns raw string if
false. Default:
false.
info:Logs info on how much CSS was removed if
true. Default:
false.
rejected:Logs the CSS rules that were removed if
true. Default:
false.
whitelistArray of selectors to always leave in. Ex.
['button-active', '*modal*']this will leave any selector that includes
modalin it and selectors that match
button-active. (wrapping the string with *'s, leaves all selectors that include it)
callbackargument
Function
A function that will receive the purified CSS as it's argument.
purify(content, css, options, function(purifiedCSS){ console.log(purifiedCSS, ' is the result of purify'); });
purify(content, css, function(purifiedCSS){ console.log('callback without options and received', purifiedCSS); });
$ purifycss src/css/main.css src/css/bootstrap.css src/js/main.js --min --info --out src/dist/index.css
This will concat both
main.cssand
bootstrap.cssand purify it by looking at what CSS selectors were used inside of
main.js. It will then write the result to
dist/index.css
The
--minflag minifies the result.
The
--infoflag will print this to stdout: ``` ________________________________________________ | | PurifyCSS has reduced the file size by ~ 33.8% | ________________________________________________
The CLI currently does not support file patterns.