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 a function on Vercel 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.