npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

crass

v0.12.3

Published

A CSS utility library for JS

Downloads

47,054

Readme

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:

  • Better minification, particularly after gzip
  • Support for consistent pretty printing
  • Support for settled CSS4 and all of CSS3
  • Ability to strip obsolete tags (removed prefixes, old standard specs, etc.) by browser version
  • Convert all colors to their smallest possible form
  • Unsafe optimizations are opt-in only

Cons:

  • Slower minification times
  • Cannot minify CSS with syntax errors
  • Certain "CSS hacks" that use invalid syntax are unsupported

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.

  • --optimize: Flag to enable basic optimization
  • --O1: Only applies when --optimize is active. Flag to enable more advanced optimizations, though these are not guaranteed to work for all CSS.
  • --min: Setting this flag followed by a comma-separated list of browser versions will instruct Crass to strip CSS that would otherwise only apply to browsers older than the versions listed. For example, --min ie9,fx30 would strip CSS that applies only to Firefox 29 and below and Internet Explorer 8 and below. The following prefixes are supported: ie, op, fx, chr
  • --pretty: Flag to enable pretty printing of output
  • --saveie: Flag to enable features to specifically support Internet Explorer 6 and below
  • --css4: Flag that allows optimized output to contain CSS4 features and syntax. This is not be supported in all modern browsers. You should only use this if you explicitly want CSS4 output.

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.