cssnano

What are cssnano's main functionalities?

const cssnano = require('cssnano');
const postcss = require('postcss');

postcss([cssnano()])
.process(css, { from: undefined })
.then(result => {
  console.log(result.css);
});

const cssnano = require('cssnano');
const autoprefixer = require('autoprefixer');
const postcss = require('postcss');

postcss([autoprefixer, cssnano({ preset: 'default' })])
.process(css, { from: undefined })
.then(result => {
  console.log(result.css);
});

const cssnano = require('cssnano');
const postcss = require('postcss');

postcss([cssnano({ preset: 'default' })])
.process(css, { from: undefined, map: false })
.then(result => {
  console.log(result.css);
});

cssnano 

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.

Install

With npm do:

npm install cssnano

Usage

CLI

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

gulp

Use gulp-cssnano.

grunt

Use grunt-cssnano.

broccoli

Use broccoli-cssnano.

Scripting

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);

Options

sourcemap

Set this to true to generate an inline source map.

zindex

Set this to false to disable z-index transforms.

calc

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

urls

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

idents

Set this to false to disable custom identifier reduction.

merge

Set this to false to disable merging of rules.

comments

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

Motivation

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
• postcss-colormin: Convert colors into their smallest representation. #ff0000 -> red
• postcss-convert-values: Convert time/length values. 500ms -> .5s
• postcss-discard-comments: Discard comments, unless marked as special.
• postcss-discard-duplicates: Discard duplicate rules.
• postcss-discard-empty: Discard empty rules and media queries.
• postcss-discard-font-face: Discard unused @font-face rules.
• postcss-font-family: Optimise whitespace/quoting of font-family properties.
• postcss-merge-idents: Merge duplicated @keyframes and @counter-style identifiers with different names.
• postcss-merge-rules: Merge adjacent rules together.
• postcss-minify-font-weight: Convert bold -> 700 and normal -> 400
• postcss-minify-selectors: Optimise whitespace/quoting of selectors.
• postcss-normalize-url: Optimise URL representations.
• postcss-pseudoelements: Optimise double colon pseudo syntax to the single colon syntax.
• postcss-reduce-idents: Rename @keyframes, @counter-style and counter identifiers to save space.
• postcss-single-charset: Ensure that there is only one @charset in the CSS file.
• postcss-unique-selectors: Ensure selectors are unique.
• postcss-zindex: Rebase z-index values to save space.

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

Contributing

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

License

MIT © Ben Briggs