cssnano compresses your css.

And, it plugs into your existing setup.

What it does

cssnano takes your nicely formatted CSS and runs it through many focused optimisations, to ensure that the final result is as small as possible for a production environment.

/* normalize selectors */
h1::before, h1:before {
    /* reduce shorthand even further */
    margin: 10px 20px 10px 20px;
    /* reduce color values */
    color: #ff0000;
    /* drop outdated vendor prefixes */
    -webkit-border-radius: 16px;
    border-radius: 16px;
    /* remove duplicated properties */
    font-weight: normal;
    font-weight: normal;
    /* reduce position values */
    background-position: bottom right;
}
/* correct invalid placement */
@charset "utf-8";
@charset "utf-8";h1:before{margin:10px 20px;color:red;border-radius:16px;font-weight:normal;background-position:100% 100%}

The semantics of this CSS have been kept the same, but the extraneous whitespace has been removed, the identifiers compressed, and unnecessary definitions purged from the stylesheet. This gives you a much smaller CSS for production use.

But don’t just take our word for it; why not try out css-size, a module especially created to measure CSS size before & after minification.

Original (gzip)275 B
Minified (gzip)110 B
Difference165 B
Percent40%

Get started now! Our usage guide covers a wide variety of environments.

npm install cssnano

Technology

cssnano is powered by PostCSS, a tool for transforming styles with JavaScript. Specifically, its plugin architecture allows us to compose cssnano out of small modules with limited responsibilities. It also allows you to easily insert cssnano into your build step, along with other processors that can lint your CSS for errors, or transpile future syntax.

postcss-logo-symbol

Our users

Does your company use cssnano? Send a pull request to be included on this list!

Why not try it out for your site today? If you have any questions, feel free to visit the support chat.

npm install cssnano