Regex to match any “UNUSED” rules in CSS (class, id, etc)

Question

I have a huge CSS file which I want to trim down to only used css rules.

I did this by using CSS Usage Add-on for Firebug. It adds an "UNUSED" label to every rule not being used. Now I want to get rid of these.

The CSS code looks like this:

body {
line-height: 1;
text-align: left;
}
UNUSED.multiple-list {
font-weight: bold;
line-height: 1.4;
list-style: disc;
margin-left: 20px
}

UNUSEDmenu, UNUSEDol, ul {
list-style: none
}
UNUSEDblockquote, UNUSEDq {
quotes: none
}

I tried to find my own Regex using RegExr online service but I was only able to select the part in between the curly braces.

My Regular expression so far:

\{([^}]+)\}

How can I modify the expression to select anything from "UNUSED" to the closing curly brace? But only if things start with "UNUSED"? All other rules should not be marked.

Answer 1

This Regex will match any UNUSED attribute: UNUSED.*\{[^}]*\}|UNUSED.*[}]*

The first part of the regex matches any UNUSED attribute that includes a block, and the second part of the regex (after the |) matches any UNUSED attribute that does not include a block - so you're totally covered. It will match classes, id's, blocks, single lines - every UNUSED attribute.

RegExr test

---

* jdlx's regex is a bit more complex but it's better and safer. Take a look at it.

Answer 2

amiregelz's regex above will match rules with valid selectors.. thus break the CSS.
Here's my2¢ on regexing it :

Step 1 - match whole rules with only unused selectors and remove the whole rule:

(?<=}|/)\s*(UNUSED[.#:<>\+\w\d\s_-]+)(,\s*UNUSED[.#:<>\+\w\d\s_-]+)*\{[^\}]+}

Step 2 - match all unused selectors on rules that do have valid/used selectors:

(UNUSED[.#:<>\+\w\d\s_-]+,\s)|(,\s*UNUSED[.#:<>\+\w\d\s_-]+)

RegExr Tests: Step 1 - Step 2

hth