Home

Awesome

crass

A CSS minification, pretty printing, and general utility library written in JS.

Build Status Build status

Why Crass?

Crass is one of only a handful of CSS minifiers that creates a full parse tree of the CSS. Most other CSS minifiers operate on the string source instead, which makes it impossible to perform all types of optimizations.

Pros:

Cons:

Installation

Crass is built with ES2015 and requires Node 6 or higher.

npm install --save-dev crass

API

var crass = require('crass');

// Parse any valid CSS stylesheet:
var parsed = crass.parse('b {font-weight: bold;}');

// Optimize the stylesheet:
parsed = parsed.optimize();

// Pretty print the stylesheet:
console.log(parsed.pretty());

// Print a minified version of the stylesheet:
console.log(parsed.toString());

// The constructors for the AST nodes used to represent the
// parsed CSS are available on `crass.objects`.

Improvements on the API will be made in the future.

Command Line Interface

If you npm install -g crass, you'll get crass on your PATH.

crass input.css [--optimize [--O1]] [--min x,y,z] [--pretty] [--saveie] [--css4]

If you don't specify --min, crass will automatically default to the latest browser version from two years ago. At the time of writing, this is Chrome 39, Firefox 31, IE 11, and Opera 26.

Minification

Outputting a crass object as a string will perform the equivalent of most CSS minification tools. The corresponding styles are output in the minimum amount of CSS possible, without any whitespace.

Some minifiers also perform basic replacement and removal operations to replace certain patterns with other patterns. Using the --optimize and --O1 flags on the command line and .optimize() and .optimize({o1: true}) in the API will perform many of these operations along with additional optimizations that are not possible with traditional minification tools.

For example, since most minification tools do not truly parse CSS, they cannot perform any reordering or transformation. Crass, on the other hand, will rewrite code like this:

b, c, a {
    third: rgba(255, 255, 255, 0.9);
    second: abc;
    first: 50%;
}

into something that looks like:

a, b, c {
    first: 50%;
    second: abc;
    third: hsla(0, 0%, 100%, 0.9);
}

Reordering selectors and declarations significantly improves minified code sizes. Colors can be translated between HSL/RGB/hex/etc. to use the smallest form.

Benchmarks

Crass performs very well in many CSS minification benchmarks. See goalsmashers' css minification benchmark for more.

FAQ

Will there be a version that runs in the browser?

You can import Crass into your project using any appropriate build tool, like browserify or Webpack. Crass's importable modules have no dependencies on anything browser-incompatible.

Check out the Github pages for Crass for a simple browser-ready version:

http://www.mattbasta.com/crass/

What about comments? Docblocks?

All comments are ignored at the moment. Support for storing comment data may be added in the future, and contributions to add this support are welcome.

What about @import statements?

Crass does not follow @import statements. You should use another CSS processing tool to resolve @imports and inline them appropriately, then use Crass to minify the result.