cssnano: a modular CSS minifier built on PostCSS

Who cssnano is for, and the problem it removes

Most CSS minifiers treat the stylesheet as text. They strip whitespace, drop comments, and stop. cssnano treats it as a PostCSS AST, which means a transform can reason about the rules themselves: compressing colour values, discarding at-rules that a later rule overrides, normalising unicode-range descriptors, and rewriting gradient parameters into shorter equivalents. The README lists exactly this range, and it is the difference between a file that is merely smaller and a file that has been rewritten.

The audience is narrow but clear. If your build already runs PostCSS, cssnano is a plugin in a pipeline you own, not a separate binary to keep in sync. If you are not using PostCSS, you are adopting a whole ecosystem to get one step. The project is written primarily in CSS, published under MIT, and distributed as the npm package cssnano. It is not archived, and the last push to the repository was on 2026-09-22, with releases [email protected], 9.0.4 and 9.0.3 landing in September 2026.

One design decision deserves attention before anything else: presets. The default preset performs safe transforms. The advanced preset performs more aggressive transforms that the README says are safe only when your site meets the requirements. That sentence is doing a lot of work, and it is the single most important thing to understand before you configure anything.

How the PostCSS plugin pipeline actually compresses your CSS

cssnano is not one algorithm. The repository is a pnpm workspace with a packages/ directory, and the presets are themselves packages: cssnano-preset-default, cssnano-preset-advanced and cssnano-preset-lite, each with its own integration test file. A preset is a list of PostCSS plugins. Loading cssnano means loading that list into your PostCSS run, so each optimisation is an independent visitor over the AST.

That structure explains the behaviour you will observe. Because transforms are separate plugins, they can disagree, and the presets exist to pick a set that has been tested together. It also explains why Browserslist matters here. The README states that where it made sense for a transform, Browserslist was added to provide different output depending on the browsers you support. A transform is therefore not a fixed string rewrite; it is conditional on your browser targets. Two projects with identical CSS but different Browserslist configs can produce different minified output, and neither is wrong.

The practical consequence is that cssnano's output is a function of your configuration, not just your input. If you are debugging a size regression, the preset and the Browserslist config are both part of the answer.

Installing cssnano and running a first minification

The README points to an installation guide for your build process on the project website rather than giving a single command in the repository root, so the exact wiring depends on your bundler. The package itself is published to npm as cssnano. The README links a getting-started guide and a full list of optimisations on the website, and the repository ships an example-cli-usage/ directory and a frameworks/ directory for runnable examples.

The one command the README does give is the package name: cssnano is on npm. Beyond that, the website's getting-started guide is the reference for the plugin call in your build tool, and the playground on the site lets you paste CSS and compare the result before committing to a configuration.

What you should expect from any wiring, once it runs, is a stylesheet with comments gone, colours compressed, and whitespace normalised. With no arguments, cssnano loads its default preset, the one the README describes as performing safe transforms. Selecting a different preset is done explicitly rather than through a flag on the default, and the preset packages are named cssnano-preset-default, cssnano-preset-advanced and cssnano-preset-lite.

The advanced preset is the failure mode, not the whitespace

The transforms that remove whitespace will not surprise anyone. The ones that rewrite structure will. The README is explicit that the advanced preset's transforms are safe only when your site meets the requirements, which is a conditional the README does not enumerate. Discarding overridden at-rules, for example, assumes the cascade in your build output reflects the cascade at runtime. If any part of your CSS is injected later, generated at runtime, or assembled from fragments you do not fully control, that assumption can be false and the rule you needed is gone.

There is a second, quieter failure mode: Browserslist drift. Because output depends on your browser targets, changing a Browserslist config can change minified output without anyone touching the CSS. A transform that was conservative for old targets may become aggressive once those targets are dropped. That is correct behaviour, but it means a dependency update to a browserslist data package can alter your stylesheet.

Where cssnano is the wrong tool: if your CSS is generated by a system that already produces minimal output, or if you need a minifier that is a standalone binary with no plugin graph and no browser-target awareness, the PostCSS coupling is overhead rather than an advantage. The project also does not claim to handle JavaScript or HTML, so it is one step in a pipeline, not a build system.

cssnano compared with a plain whitespace minifier

The obvious alternative is a minifier that only removes whitespace and comments, without parsing into an AST. The difference is not subtle. A whitespace minifier is a text transform: its output is predictable, its failure modes are essentially nil, and it never needs to know which browsers you target. cssnano's transforms are structural and, per the README, browser-aware. You get smaller output and a larger surface for surprises.

The second alternative is doing nothing and relying on gzip or Brotli at the server. Compression at the transport layer already removes much of the redundancy that whitespace minification targets, so the marginal gain from a structural minifier is smaller than the raw byte difference suggests. Where cssnano earns its place is in the transforms a transport compressor cannot perform: normalising unicode-range descriptors, mangling gradient parameters, discarding overridden at-rules. Those change the content, not just its encoding.

A third path is to stay inside PostCSS but choose a lighter preset. The repository ships cssnano-preset-lite alongside default and advanced, with its own integration tests. The README does not describe what lite includes, so treat it as something to inspect in the source or the website documentation before assuming it is simply default minus a few plugins.

Maintenance, release cadence and the MIT licence

The repository is not archived and the last push was on 2026-09-22. Three releases landed in September 2026: [email protected] on 2026-09-17, 9.0.4 on 2026-09-08 and 9.0.3 on 2026-09-05. Those are patch releases, which is consistent with a project that is being maintained rather than reshaped. The repository uses changesets (.changeset/ is a top-level entry), so version bumps are generated from changelog entries rather than hand-written, and the README links to a changelog on the website.

The upgrade cost is dominated by the preset and Browserslist interaction described earlier, not by API churn. Because the presets are separate packages with their own integration test files, a preset update is where behaviour changes are most likely to appear. Pinning the preset package version and reading the changelog before bumping is the cheap insurance here.

On licensing: the project is MIT, with a LICENSE-MIT file at the repository root and the README stating MIT © Ben Briggs. MIT is permissive and imposes no copyleft obligation on your own stylesheet or build output. That is a statement about the licence text, not legal advice for your situation.

Editorial conclusion

Adopt cssnano when your build already runs PostCSS and you want compression that goes past whitespace removal, starting with the default preset. Do not reach for the advanced preset on a site whose CSS you cannot audit, because its transforms are described as safe only when your site meets certain requirements. Before wiring it in, confirm which preset your build tool loads by default and whether a Browserslist config already exists in the project.

Frequently asked questions

Official sources

1. cssnano/cssnano on GitHub
2. License: MIT
3. Project website
4. README
5. Releases