Please Consider cssnano Instead of clean-css

[shellscape]

👋 I'm working on a project that leverages html-minifier-terser and have long been a fan of the project. Unfortunately, it's using clean-css which has been unmaintained for some time now and the owner hasn't had time to give it bugfix updates in a while.

cssnano has been enjoying a lot of active development, and is built atop postcss which has a pretty proven track record. Postcss uses a tokenizer just as clean-css does, but somewhat more efficient, which should mean a speed boost. https://github.com/cssnano/cssnano

Would the project consider swapping clean-css for cssnano?

[sibiraj-s]

I am thinking about lightningcss recently. Haven't evaluated that yet

https://lightningcss.dev/minification.html

[shellscape]

Rust speed is awesome. Unfortunately that'll also likely mean I won't be able to use it, as my project does run in browsers as well as the server and edge workers..

[sibiraj-s]

It ships a wasm library to run in browsers as well https://lightningcss.dev/docs.html#from-deno-or-in-browser.

[TransparentLC]

There are some CSS properties that clean-css will not support, such as image-set.

A quick recipe if you want to use lightningcss right now:

import htmlminifier from 'html-minifier-terser';
import lightningcss from 'lightningcss';

const encoder = new TextEncoder;
const decoder = new TextDecoder;

const minified = await htmlminifier.minify('...', {
    /**
     * @param {String} text
     * @param {'inline' | 'media' | undefined} type
     * @returns {String}
     */
    minifyCSS: (text, type) => {
        // function wrapCSS(text, type)
        // https://github.com/terser/html-minifier-terser/blob/c4a7ae0bd08b1a438d9ca12a229b4cbe93fc016a/src/htmlminifier.js#L355
        switch (type) {
            case 'inline':
                text = `*{${text}}`;
                break;
            case 'media':
                text = `@media ${text}{a{top:0}}`;
                break;
        }
        const minified = decoder.decode(lightningcss.transform({ code: encoder.encode(text), minify: true }).code);
        // function unwrapCSS(text, type)
        // https://github.com/terser/html-minifier-terser/blob/c4a7ae0bd08b1a438d9ca12a229b4cbe93fc016a/src/htmlminifier.js#L366
        /** @type {RegExpMatchArray | null} */
        let m;
        switch (type) {
            case 'inline':
                m = minified.match(/^\*\{([\s\S]*)\}$/);
                return m ? m[1] : minified;
            case 'media':
                m = minified.match(/^@media ([\s\S]*?)\s*{[\s\S]*}$/);
                return m ? m[1] : minified;
            default:
                return minified;
        }
    },
});