Potential reduction

Usage

Standalone

npm i -D purify-css

importpurifyfrom"purify-css"constpurify=require("purify-css")letcontent=""letcss=""letoptions={output:"filepath/output.css"}purify(content,css,options)

Build Time

CLI Usage

$ npm install -g purify-css

$ purifycss -hpurifycss <css> <content> [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]

How it works

Used selector detection

Let's start off simple.

Detecting the use of:button-active

<!-- html --><!-- class directly on element --><divclass="button-active">click</div>

// javascript// Anytime your class name is together in your files, it will find it.$(button).addClass('button-active');

Now let's get crazy.

Detecting the use of:button-active

// Can detect if class is split.varhalf='button-';$(button).addClass(half+'active');// Can detect if class is joined.vardynamicClass=['button','active'].join('-');$(button).addClass(dynamicClass);// Can detect various more ways, including all Javascript frameworks.// A React example.varclasses=classNames({'button-active':this.state.buttonActive});return(<buttonclassName={classes}>Submit</button>;);

Examples

Example with source strings

varcontent='<button> Login </button>';varcss='.button-active { color: green; }   .unused-class { display: block; }';console.log(purify(content,css));

.button-active { color: green; }

Example withglob file patterns + writing to a file

varcontent=['**/src/js/*.js','**/src/html/*.html'];varcss=['**/src/css/*.css'];varoptions={// Will write purified CSS to this file.output:'./dist/purified.css'};purify(content,css,options);

Example with bothglob file patterns and source strings + minify + logging rejected selectors

varcontent=['**/src/js/*.js','**/src/html/*.html'];varcss='.button-active { color: green; } .unused-class { display: block; }';varoptions={output:'./dist/purified.css',// Will minify CSS code in addition to purify.minify:true,// Logs out removed selectors.rejected:true};purify(content,css,options);

.unused-class

Example with callback

varcontent=['**/src/js/*.js','**/src/html/*.html'];varcss=['**/src/css/*.css'];purify(content,css,function(purifiedResult){console.log(purifiedResult);});

Example with callback + options

varcontent=['**/src/js/*.js','**/src/html/*.html'];varcss=['**/src/css/*.css'];varoptions={minify:true};purify(content,css,options,function(purifiedAndMinifiedResult){console.log(purifiedAndMinifiedResult);});

API in depth

// Four possible arguments.purify(content,css,options,callback);

Thecontent argument

Type:Array orString

Thecss argument

Type:Array orString

The (optional)options argument

Type:Object

Properties of options object:

The (optional)callback argument

Type:Function

Example of callback use

purify(content,css,options,function(purifiedCSS){console.log(purifiedCSS,' is the result of purify');});

Example of callback without options

purify(content,css,function(purifiedCSS){console.log('callback without options and received',purifiedCSS);});

Example CLI Usage

$ purifycss src/css/main.css src/css/bootstrap.css src/js/main.js --min --info --out src/dist/index.css

    ________________________________________________    |    |   PurifyCSS has reduced the file size by ~ 33.8%    |    ________________________________________________