A well-tested CSS enhancer (Base64, assets hosts, cache boosters, etc)

Enhance-css is a node.js tool which can tweak your CSS files to:

  • improve caching - by rewriting URLs and renaming files to include either timestamps or MD5 hashes;
  • parellelize requests - by rewriting URLs with one or more asset hosts;
  • reduce number of requests - by embedding images as Base64 data.

There is also an option to create non-embedded version suited well for older browsers (IE 7 and below).

node.js 0.8.0+ (fully tested on OS X 10.6+, CentOS, and Windows 7)
npm install enhance-css
enhancecss [options] [source-file]
-h, --help                    output usage information
-v, --version                 output the version number
-r, --root [root-path]        Set a root path to which resolve absolute @import rules
-o, --output [output-file]    Use [output-file] as output instead of STDOUT
--crypted-stamp               Rename image files with MD5 hash attached (hard cache boosters)
--no-stamp                    Disable adding stamp to URLs
--no-embed-version            Output both embedded and non embedded version
--force-embed                 Forces embed on all supported assets
--asset-hosts [host-pattern]  Use one or more asset hosts, e.g assets[0,1,2].example.com
--pregzip                     Automatically gzip the enhanced files (not available when no output file given)

Most likely you are going to pass multiple CSS files into it and specify root directory and output file, e.g.

cat path/to/first.css path/to/second.css path/to/third.css | enhancecss -o bundled.css --root ./public/

The --root parameter is required to properly locate images referenced in the css files.

To embed images in Base64 just add the embed argument to the image url, e.g.

a { background: url(/images/arrow.png?embed) 0 0 no-repeat; }

In case you also need to support older browser, just add --noembedversion parameter, e.g.

cat path/to/first.css path/to/second.css path/to/third.css | enhancecss -o bundled.css --root ./public/ --noembedversion

which will result in two output files: bundled.css and bundled-noembed.css.

To use one or more asset hosts, just specify --assetshosts parameter, e.g.

cat path/to/first.css path/to/second.css path/to/third.css | enhancecss -o bundled.css --root ./public/ --assethosts assets[0,1].example.com

which will result in all non-embedded image URLs bound to either assets0.example.com or assets1.example.com.

First clone the source, then run:

  • npm run check to check JS sources with JSHint
  • npm test for the test suite

Enhance-css is released under the MIT License.