postcss-csso

postcss-csso

PostCSS plugin to minify CSS using CSSO (a CSS minifier with structural optimizations).

Under the hood, the plugin converts PostCSS AST into CSSO's AST, optimises it and converts back. The plugin uses input PostCSS's AST nodes (or their clones) on back convertation, so the shape of original PostCSS's nodes persists the same after compression in most cases (e.g. properties added by other plugins isn't lost). This approach makes it possible to achieve a great performance and generate source maps correctly.

The performance of postcss-csso is approximately the same as CSSO has itself (see CSSO numbers in minifiers comparison table).

If you have any difficulties with the output of this plugin, please use the CSSO tracker.

Install

npm install postcss-csso

Usage

var postcss = require('postcss');
var csso = require('postcss-csso');

postcss([
    csso
])
    .process('.a { color: #FF0000; } .b { color: rgba(255, 0, 0, 1) }')
    .then(function(result) {
        console.log(result.css);
        // .a,.b{color:red}
    });

Plugin takes the same options as compress() method of CSSO with no exception.

postcss([
    csso({ restructure: false })
])
    .process('.a { color: #FF0000; } .b { color: rgba(255, 0, 0, 1) }')
    .then(function(result) {
        console.log(result.css);
        // .a{color:red}.b{color:red}
    });

License

MIT

Changelog

5.0.1 (April 5, 2021)

• Fixed order of compression processing to perform when everything else is finished (@onigoetz, #20)