Question

I know that this question has been asked multiple times already, but I still couldn’t find a decent solution for my situation.

I have a huge CSS file, and about 50% of it is not being used at all in my current website. It also contains many valuable comments which I want to keep.

Due to the size of the CSS file, tools that can only identify the unused CSS definitions are not very helpful – I need a tool that can either change my unused definitions so I can apply regex to delete them afterwards, or delete the unused definitions for me, automatically.

CSS Usage does a great job changing all the unused definitions, and I can easily remove all of them with a regex – the problem is that CSS Usage also removes all the comments from my file, automatically.

How can I remove all the unused definitions in my CSS file but keep all the comments?

Answer 1

I can say i managed to do exactly what you are asking for, however it’s not that neat!
in fact i modified on the extension code (i don’t know if that’s even acceptable round here :-D) but i know how to make you duplicate it 🙂 !

I commented this line in the extension code

/* CssUsage.js : 110 */
cssSource = cssSource.replace(/\/\*[\S\s]*?\*\//g, "");

It removes comments like /* this is a comment */

It gave me this output

anyway, if you want to duplicate this…
– download the extension (save to..)
– open the downloaded .xpi with any application like winrar
– edit chrome/content/cssusage/CssUsage.js and comment line 110
– drag it to firefox to reinstall

or just download this xpi and drag it to firefox to reinstall the extension!
maybe you can also try to make it remove the UNUSED lines using the regex you mentioned
cssSource = cssSource.replace(/your regex/g, "");