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.
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
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.
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.