npm

Need private packages and team management tools?Check out npm Orgs. »

cssnano

1.0.2 • Public • Published

cssnano Build Status NPM version Dependency Status Gitter

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.

Install

With npm do:

npm install cssnano

Usage

CLI

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

gulp

Use gulp-cssnano.

grunt

Use grunt-cssnano.

broccoli

Use broccoli-cssnano.

Scripting

cssnano can be used directly via its node.js API, or consumed as a PostCSS plugin.

node.js (nano(css, [options]))

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));

PostCSS (nano([options]))

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);

Options

sourcemap

Set this to true to generate an inline source map.

zindex

Set this to false to disable z-index transforms.

calc

Set this to false to disable calc transforms. If it is an object, it will be passed as the options to postcss-calc.

urls

Set this to false to disable URL normalisation. If it is an object, it will be passed as the options to postcss-normalize-url.

idents

Set this to false to disable custom identifier reduction.

merge

Set this to false to disable merging of rules.

comments

If this is an object, it will be passed as the options to postcss-discard-comments.

Motivation

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: Convert calc() functions where possible. calc(5 * 10px) -> 50px
  • #ff0000 -> red
  • 500ms -> .5s
  • properties.
  • colon syntax.
  • identifiers to save space.
  • CSS file.

There are some optimisations that are not quite ready to be released as separate modules yet, and these are still integrated into this module.

Contributing

Pull requests are welcome. If you add functionality, then please add unit tests to cover it.

License

MIT © Ben Briggs

install

npm i cssnano

Downloadsweekly downloads

4,165,986

version

1.0.2

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
Report a vulnerability