Node.js CSS Compressor: clean-css

One of my recent finds on the goldmine that is GitHub is GoalSmasher's account. The GoalSmashers team has created three notable (or at least useful to me) utilities you all should know about:

• enhance-css: embeds imagery into stylesheets via Base64 encoding
• clean-css: minifies and concatenates CSS files
• assets-packager: builds, minifies, and bundles JavaScript and CSS files in the same command

In this post, I'd like to take a few moments to look at clean-css, a CSS dead simple minification package. The clean-css utility does just what you would expect from a CSS minifier: strips unnecessary whitespace, removes comments, deletes the last semicolon of every selector, and more!

Installing clean-css

clean-css can be installed via NPM, which is super convenient:

npm install clean-css

You can also simply check out the source from GitHub.

Using clean-css from Shell

Using clean-css from the shell is simple:

cleancss -o style.min.css style.css

You can even use basic shell commands to pass concatenated input in:

cat theme.css feature1.css feature2.css feature3.css | cleancss -o features.css

Or chain gzipping as well:

cat theme.css feature1.css | cleancss | gzip -9 -c > feature1.css.gz

Compressing via shell commands is super useful for quick manual minfication or intense build processes.

Using clean-css via NodeJS Apps

clean-css can also be used from within your JavaScript code:

# Get the clean-css package
var cleanCSS = require('clean-css');

# Read in the source of a file or use hard-coded CSS...
var source = "body { color: red; font-weight: bold; }";

# Minify!
var minifiedCSS = cleanCSS.process(source);

A huge kudos goes to the GoalSmashers team for their useful utilities, and for open-sourcing them for all of us to use! I have a feeling some of you will be tweaking (or creating) your build process based on their work. Happy optimizing!