css-size

Display the size of a CSS file.

All results are shown using the gzip-size module, as this most accurately represents what will be served to a client in production. It also provides a better comparison between the minified and the original CSS.

CSS is minified with cssnano.

Install

With npm do:

npm install css-size --save

Example

var css = 'h1 {\n  color: black;\n}\n';

cssSize(css).then(function (results) {
    console.log(results);

/*
    {
        original: '43 B',
        minified: '34 B',
        difference: '9 B',
        percent: '79.07%'
    }
*/

});

cssSize.table(css).then(function (table) {
    console.log(table);

/*
    ┌─────────────────┬────────┐
    │ Original (gzip) │ 43 B   │
    ├─────────────────┼────────┤
    │ Minified (gzip) │ 34 B   │
    ├─────────────────┼────────┤
    │ Difference      │ 9 B    │
    ├─────────────────┼────────┤
    │ Percent         │ 79.07% │
    └─────────────────┴────────┘
*/

});

API

cssSize(input)

Pass a string of CSS to receive an object with information about the original & minified sizes (both are gzipped), plus difference and percentage results.

cssSize.table(input)

Use the table method instead to receive the results as a formatted table.

input

Type: string, buffer

CLI

See the available options with:

$ css-size --help

Related

• js-size: Display the size of a JS file.

Contributing

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

License

MIT © Ben Briggs