Landing page for the cssnano minifier application.

URL

https://cssnano.herokuapp.com/

Tags

open sourcedrag-n-dropTypeScriptNode

cssnano

Drag and drop css minification with cssnano.

Convenient CSS minification

I built this small app because sometimes I need to minify CSS outside of a build system, for example, inlining CSS normalize.css into the <head> of a document. Other online CSS minifiers already exist, but none that use cssnano. cssnano was packaged with webpack’s css-loader until it July 2018.

Tech details

Unfortunately, even though postcss works in the browser, the cssnano package does not. After you drop a CSS file onto the page, a request is sent to the server to minify the CSS. CodeMirror then renders the response in a fullscreen editor, giving users the ability to copy the styles which were just minified.

The frontend is built with TypeScript and bundled with webpack. Since the codemirror and clipboard packages are only used after the user adds some CSS to minify, I use webpack’s code-splitting with dynamic imports to load them after the app has initialized.

CSS OMG

The UX of this app is inspired by SVGOMG by Jake Archibald. I use SVGOMG all the time and being able to both paste code to minify and drag-n-drop a file is very handy.


Next project

hennessy.com