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 PostCSS's input AST nodes (or their clones) on back convertation, so the shape of the original PostCSS's nodes is preserved after the compression in most cases (e.g. properties added by other plugins aren't lost). This approach makes it possible to achieve great performance and correct source maps generation.

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

import postcss from 'postcss';
import csso from 'postcss-csso';
// CommonJS:
// const csso = require('postcss-csso');

postcss([
    csso
])
    .process('.a { color: #FF0000; } .b { color: rgba(255, 0, 0, 1) }')
    .then((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((result) => {
        console.log(result.css);
        // .a{color:red}.b{color:red}
    });

Using in postcss.config.js:

import csso from 'postcss-csso';

export const plugins = [
    csso({
        restructure: false
    })
];

License

MIT

Changelog

6.0.1 (August 11, 2022)

• Bumped csso to 5.0.5 which fixes various bugs