cssnano

7.1.7 verified Fri May 01 auth: no javascript

A modular CSS minifier built on top of PostCSS, version 7.1.7. It optimizes CSS by removing whitespace, comments, duplicated rules, and applying transformations like merging rules, converting values, and minifying selectors. Release cadence is frequent with monthly patch releases. Key differentiators: modular design with presets (default, advanced, etc.), extensive plugin ecosystem, and deep PostCSS integration. Supports Node.js >=18.12.0, ships TypeScript declarations, and requires postcss@^8.5.10 as a peer dependency.

Common errors

error Error: PostCSS plugin cssnano requires PostCSS 8.0.0 or higher. ↓

cause Mismatched postcss version; cssnano v7 requires postcss@^8.5.10.

fix

Run 'npm install postcss@^8.5.10' to upgrade postcss.

error TypeError: cssnano is not a function ↓

cause CommonJS require() returns an object with default property; need to call .default.

fix

Use const cssnano = require('cssnano').default; or switch to ESM import.

error Error: Cannot find module 'cssnano/presets/default' ↓

cause Import path changed in v7; presets now export from main entry.

fix

Use import { defaultPreset } from 'cssnano'; instead.

error Warning: unknown preset 'safe' ↓

cause The 'safe' preset was removed in recent versions.

fix

Use preset: 'default' instead.

Warnings

breaking v7 changed the import path for presets; previously available as cssnano/presets/default, now exported as named exports from main entry. ↓

fix Use import { defaultPreset } from 'cssnano' instead of require('cssnano/presets/default').

deprecated The 'safe' preset is deprecated and will be removed in a future version, use 'default' or 'advanced' with explicit options. ↓

fix Replace preset: 'safe' with preset: 'default' and adjust options if needed.

gotcha cssnano requires a from option in postcss.process when using a preset that relies on source maps; otherwise can fail silently. ↓

fix Always provide from: 'input.css' (or undefined) in the postcss options.

breaking Node.js engine requirement increased to ^18.12.0 || ^20.9.0 || >=22.0 in v7, dropping support for Node 14 and 16. ↓

fix Upgrade Node.js to a supported version (18, 20, 22+).

deprecated The 'postcss-discard-unused' and 'postcss-merge-idents' plugins are deprecated and will be removed; their functionality may be merged into core. ↓

fix Avoid relying on these plugins; use the main cssnano package without them.

gotcha When using cssnano in a build tool like webpack with css-loader, ensure cssnano is applied after all other PostCSS plugins to maximize optimization. ↓

fix Place cssnano last in the PostCSS plugins array.

Install

npm install cssnano

yarn add cssnano

pnpm add cssnano

Imports

cssnano
wrong
```
const { default: cssnano } = require('cssnano');
```
correct
```
import cssnano from 'cssnano';
```
Default export since version 7; used as a PostCSS plugin. For CJS, use require('cssnano').default.

defaultPreset

wrong

import defaultPreset from 'cssnano/presets/default';

correct

import { defaultPreset } from 'cssnano';

Named export for the default preset since v7.

advancedPreset
wrong
```
const advancedPreset = require('cssnano/presets/advanced');
```
correct
```
import { advancedPreset } from 'cssnano';
```
Named export for the advanced preset; also available as a named export from the main entry.

Quickstart

Demonstrates using cssnano as a PostCSS plugin to minify CSS with the default preset.

import postcss from 'postcss';
import cssnano from 'cssnano';

const input = 'h1 { color: red; color: red; }';

postcss([cssnano({ preset: 'default' })])
  .process(input, { from: undefined })
  .then(result => {
    console.log(result.css); // outputs: 'h1{color:red}'
  });