cssnano

What is cssnano?

cssnano is a modular minifier for CSS, which uses PostCSS for its plugin architecture. It is aimed at reducing the size of CSS files by applying various optimizations, such as removing whitespace, comments, and unnecessary prefixes, as well as merging rules and minifying values.

What are cssnano's main functionalities?

Preset Configuration

This code demonstrates how to use cssnano with its default preset to minify a CSS string. The 'process' method is called on the PostCSS instance with cssnano as a plugin.

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

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

Custom Plugin Usage

This code shows how to use cssnano with other PostCSS plugins like autoprefixer. It demonstrates the use of a custom preset configuration for cssnano.

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

Optimizing for Production

This code snippet illustrates how to use cssnano for production by disabling source maps and using the default preset for optimization.

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

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

Other packages similar to cssnano

clean-css

clean-css is a fast and efficient CSS optimizer for Node.js and the browser. It performs similar tasks to cssnano, such as minifying CSS, but it does not use PostCSS as its foundation. It provides its own API and set of features for optimizing CSS files.

purgecss

purgecss is a tool to remove unused CSS, which can be used in conjunction with CSS minifiers like cssnano. While cssnano focuses on optimizing the CSS that is already being used, purgecss helps to reduce file size by stripping out styles that are not used in your HTML or JavaScript files.

uglifycss

uglifycss is a simple, straightforward CSS minifier. It lacks the modularity and plugin system of cssnano but is easy to use for basic CSS minification tasks. It is suitable for projects that require a simpler setup without the need for extensive configuration or additional plugins.

README

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