cssnano

modular CSS minifier built on PostCSS

TLDR

Minify a CSS file

$ cssnano [input.css] [output.css]

Minify with default preset

$ npx cssnano [input.css] > [output.min.css]

Use as PostCSS plugin

$ postcss [input.css] -o [output.css] --use cssnano

Minify with source maps

$ cssnano [input.css] [output.css] -s

Disable a specific optimization

$ cssnano [input.css] [output.css] --no-[featureName]

SYNOPSIS

cssnano [options] input.css [output.css]

cssnano is a modular CSS minifier built on PostCSS that reduces CSS file size through various optimizations: removing whitespace and comments, merging rules, optimizing values, and eliminating redundant code.Optimizations include: normalizing values (colors, lengths), merging duplicate rules, removing unused prefixes, optimizing font weights and z-indices, discarding duplicate declarations, and minimizing calc() expressions.As a PostCSS plugin, cssnano integrates with existing build pipelines (webpack, Vite, gulp, etc.) and can be combined with other PostCSS plugins like autoprefixer.

PARAMETERS

--sourcemap, -s

Generate a sourcemap within the minified output.

--no-[featureName]

Disable any individual processor module by its name.

--config file

PostCSS configuration file.

CONFIGURATION

postcss.config.js

PostCSS configuration file where cssnano plugin and presets are defined.

cssnano.config.js

Dedicated configuration file for cssnano options and preset customization.

PRESETS

default

Safe optimizations suitable for most use cases.

lite

Minimal optimizations, fastest processing.

advanced

Aggressive optimizations (may change behavior).

CAVEATS

Aggressive minification may cause issues with CSS that relies on specific formatting. The advanced preset can change behavior in edge cases. Source maps are essential for debugging minified CSS. Some optimizations remove vendor prefixes that may still be needed.

HISTORY

cssnano was created by Ben Briggs and first released in 2015. Built on PostCSS, it took a modular approach where each optimization is a separate plugin. This design allows users to customize exactly which optimizations apply. cssnano became one of the most popular CSS minifiers, integrated into many build tools and frameworks.