Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including shakecss with all npm packages installed. Try it out:

var shakecss = require("shakecss")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

shakecss v0.3.4

Special thanks to the makers of purifycss. Modified version of purifycss that better works together with Angular2 applications. Takes a stylesheet + a bundled js-file (e.g. packed angular2-application) and removes any unused !class-selectors! from the .css. It will not remove selectors like html{} or ul{}, only class selectors. This is something Webpack /Angular-CLI does not do when optimizing your code. You have to use e.g. ExtractText Webpack-Plugin to prevent your .css being inlined into to the .js-bundle first.

Install with npm install shake-css, or just drop css-shaker.js somewhere.

This plugin is based on purifycss but has alot of modifications.

It currently only works with applications that are bundled like that:

-my-distribution-path

--app.js

--app-chunk.js (optional, n-times)

--bundled.css

You can have multiple chunks (lazy loading, Angular2) but currently only one .css file.

This plugin will not remove any unused inline-css (css merged into the .js bundle)

So i suggest to pack your application with Webpack and use ExtractTextPlugin to extract any .css and merge it into a single bundle.css

API

e.g. in package.json script:

npm run shakeCss <distribution-path>

Example:

optimizeCss: "npm run shakeCss dist/"

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free