Need private packages and team management tools?Check out npm Teams »


1.2.1 • Public • Published

cssnano Build Status NPM version Dependency Status Gitter

A modular minifier, built on top of the PostCSS ecosystem.

Note that this project is still a work in progress, and needs more testing before it can be recommended to use in production. There are some optimisations that need to be further expanded upon, and others yet to be written.

cssnano is a modular minifier that aims to utilise small modules from the PostCSS ecosystem, rather than being an all-encompassing module that may be difficult to contribute to. Because it is written on top of PostCSS, it is able to do more than simple whitespace transforms - including advanced optimisations such as custom identifier reduction, z-index rebasing, and adjacent selector merging.


With npm do:

npm install cssnano



cssnano ships with a command line app.

cssnano main.css

To output this to a file specify a second parameter:

cssnano main.css main.min.css

You can also use stdin & stdout redirections:

cssnano < main.css > main.min.css

To see all available options, do:

cssnano --help


Use gulp-cssnano.


Use grunt-cssnano.


Use broccoli-cssnano.


cssnano can be used directly via its node.js API, or consumed as a PostCSS plugin.

node.js (nano(css, [options]))

var nano      = require('cssnano');
var readFile  = require('fs').readFileSync;
var writeFile = require('fs').writeFileSync;
var input = readFile('main.css', 'utf8');
writeFile('main.min.css', nano(input));

PostCSS (nano([options]))

var nano      = require('cssnano');
var readFile  = require('fs').readFileSync;
var writeFile = require('fs').writeFileSync;
var postcss   = require('postcss');
var input  = readFile('main.css', 'utf8');
var output = postcss().use(nano()).use(/* other plugin */).process(input).css;
writeFile('main.min.css', output);



Set this to true to generate an inline source map.


Set this to false to disable z-index transforms.


Set this to false to disable calc transforms. If it is an object, it will be passed as the options to postcss-calc.


Set this to false to disable URL normalisation. If it is an object, it will be passed as the options to postcss-normalize-url.


Set this to false to disable custom identifier reduction.


Set this to false to disable merging of rules.


If this is an object, it will be passed as the options to postcss-discard-comments.


As of this writing, there are many ways to minify CSS available; for the Node ecosystem alone, there are lots of modules that offer this functionality. However, some of these projects are buggy and others are not being maintained. Furthermore, it is difficult to contribute to such projects with large amounts of integrated code. What if we could utilise the power of modularity and split up a CSS minifier into small pieces that have single responsibility? This project's aim is, eventually, to become entirely composed of node modules that are responsible for small CSS optimisations. At present, it is composed of the following modules:

  • postcss-calc: Convert calc() functions where possible. calc(5 * 10px) -> 50px
  • #ff0000 -> red
  • 500ms -> .5s
  • properties.
  • identifiers with different names.
  • colon syntax.
  • identifiers to save space.
  • CSS file.

There are some optimisations that are not quite ready to be released as separate modules yet, and these are still integrated into this module.


Pull requests are welcome. If you add functionality, then please add unit tests to cover it.


MIT © Ben Briggs


npm i [email protected]





Last publish


  • avatar
  • avatar
  • avatar
  • avatar
  • avatar