OSS TanbouOn this page
Overview
cssnano is a modular CSS minifier built on the PostCSS ecosystem. Presets combine color compression, comment removal, rule cleanup, descriptor normalization, and other optimizations for production builds.
Features and best fit
Based on official documentation; not hands-on tested · Content checked:
Key features
Apply a safe-oriented bundle of optimizations with the default preset
The default preset groups transforms intended to be safe for normal CSS so teams do not need to configure every minification plugin individually.
Compress more than whitespace
Optimizations include shorter colors, comment removal, discarding overridden at-rules, normalizing descriptors such as unicode-range, and other CSS-aware transforms.
Sources: [1]
Choose presets with different optimization aggressiveness
The project distinguishes the default preset from options such as advanced, allowing teams to select stronger transforms when project requirements permit them.
Sources: [1]
Best fit
Before adoption
Version 9.3.1 requires a recent Node runtime
Package metadata requires Node ^22.22.3 || ^24.15.0 || >=26.0, so Node 20 and older Node 22 releases do not satisfy the declared engine range.
Sources: [2]
Advanced presets require project-specific validation
The README describes the advanced preset as more aggressive and safe only when site requirements are met. Validate visual and functional output before switching from the default preset.
Sources: [1]
Official sources
- [1]cssnano 9.3.1 README(2026-10-05)
- [2]cssnano 9.3.1 package metadata(2026-10-05)
- [3]cssnano 9.3.1 release(2026-10-05)
- [4]cssnano MIT license(2026-10-05)
Supplemental curator note
cssnano 9.3.1 requires PostCSS ^8.5.28 and Node ^22.22.3 || ^24.15.0 || >=26.0. CI still running Node 20 or an older Node 22 release must be upgraded first.
Try it in 3 steps
- 1
Install cssnano 9.3.1 with PostCSS
Pin the stable release on a supported Node.js runtime:
^22.22.3 || ^24.15.0 || >=26.0.demo=$(mktemp -d "${TMPDIR:-/tmp}/cssnano.XXXXXX") && cd "$demo" && npm init -y >/dev/null && npm install --save-exact postcss@8.5.29 cssnano@9.3.1 - 2
Create CSS and a script using the default preset
Use the default preset on input that can demonstrate color, zero-value, and whitespace optimizations.
printf "%s\n" '.card { color: #ff0000; margin: 0px 0px 0px 0px; }' > input.css && printf "%s\n" "import fs from 'node:fs';" "import postcss from 'postcss';" "import cssnano from 'cssnano';" "const css = fs.readFileSync('input.css', 'utf8');" "const result = await postcss([cssnano({ preset: 'default' })]).process(css, { from: 'input.css', to: 'output.css' });" "fs.writeFileSync('output.css', result.css);" > demo.mjs - 3
Minify the stylesheet and inspect the result
Confirm that CSS-aware optimizations were applied and that the output is smaller than the input.
node demo.mjs && grep -Eq '(red|#f00)' output.css && test "$(wc -c < output.css)" -lt "$(wc -c < input.css)"
Growth
Growth trends · Last 30 days
4,978 Stars
Trend data is still being collected.
Built with
Categories and tags
Categories
GitHub data
GitHub dataView detailed GitHub data
GitHub Topics
- css
- cssnano
- minification
- optimisation
- postcss
Related information
Write a related articleShare a guide or use case for this OSS in Markdown. Articles are published after administrator approval.
Explore next
- modern-normalize7,417 Stars
3 shared tag(s) · 1 shared category(s)
keep base-style normalization small by targeting modern browsers only
TypeScript - Panda CSS6,208 Stars
3 shared tag(s) · 1 shared category(s)
scan type-safe style definitions and generate design-token-driven atomic CSS at build time
Rust - Dart Sass4,227 Stars
3 shared tag(s) · 1 shared category(s)
compile SCSS with the reference Sass implementation through a CLI or JavaScript API
Dart - Bulma50,053 Stars
3 shared tag(s) · Same language
build the UI layer with CSS classes, Sass, and CSS Variables without bundled JavaScript
CSS - Spectrum CSS1,290 Stars
3 shared tag(s) · Same language
implement Adobe Spectrum with design tokens and independently versioned CSS components
CSS - Animate.css82,849 Stars
3 shared tag(s) · 1 shared category(s) · Same language
apply reusable CSS animations to UI elements by adding classes
CSS
Report incorrect information
Tell us if any listing information is incorrect or outdated.