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.
With npm do:
npm install cssnano
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
Use gulp-cssnano
.
Use grunt-cssnano
.
cssnano can be used directly via its node.js API, or consumed as a PostCSS plugin.
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));
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);
Set this to true
to generate an inline source map.
Set this to false
to disable z-index transforms.
Set this to false
to disable calc transforms. If it is an object, it will be
passed as the options to postcss-calc
.
Set this to false
to disable URL normalisation. If it is an object, it will be
passed as the options to postcss-normalize-url
.
Set this to false
to disable custom identifier reduction.
Set this to false
to disable merging of rules.
If this is an object, it will be passed as the options to
postcss-discard-comments
.
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
: Convertcalc()
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 offont-family
properties.postcss-merge-rules
: Merge adjacent rules together.postcss-minify-font-weight
: Convertbold
->700
andnormal
->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
andcounter
identifiers to save space.postcss-single-charset
: Ensure that there is only one@charset
in the CSS file.postcss-zindex
: Rebasez-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.
Pull requests are welcome. If you add functionality, then please add unit tests to cover it.
MIT © Ben Briggs