Back to top

Finding color tags and their element - the hard way

Al wants to know - how can I get the color tags and the elements they apply to from a css file. I like the lazyweb so here's my idea, al:

greg@gvs1 ~
$ cat file.css
.tabbrowser-strip {
padding-bottom: 0px;
background-color: #C8C8C8;
background-image: url("chrome://browser/skin/pb-1px-hor-gray-line.gif");
background-repeat: repeat-x;
background-position: top left;
border-bottom: 4px solid;
-moz-border-bottom-colors: #535353 #A1A1A1 #BDBDBD #D9D9D9;

greg@gvs1 ~
$ touch empty.css

greg@gvs1 ~
$ grep -v color file.css > empty.css

greg@gvs1 ~
$ diff -up empty.css file.css | grep [{}+] | grep -v +++ | grep -v @@ | sed 's/+ / /'
.tabbrowser-strip {
+ background-color: #C8C8C8;
+ -moz-border-bottom-colors: #535353 #A1A1A1 #BDBDBD #D9D9D9;

Step one is your example. Step two creates an empty file. Step 3 takes everything BUT the color lines and outputs them into the empty. Step 4 does a diff in universal format with -p to "Show which C function each change is in.". Well, it's not a C-function but close enough. Then I did three extra greps and a sed on the end one to remove all of the lines BUT the function and "added" lines, two to get rid of the header lines, and the sed will take the plusses that were added by the diff and replace them with nothing.

Drawbacks and Weaknesses:

If you have plusses followed by two spaces in your css then they'll get silently removed. If you have a element named color like a <div class="colored"> then that would suck (but you can easily find those before hand...).

Making it run through directories and do this is a fun exercise with find ./ -exec (stuff) {} \;

Biggest drawback

I'm pretty sure there's an easy way to do this without all the extra steps and crud that I did. I remember reading those examples in "Mastering Regular Expressions". I just don't remember them or where to find them well enough.

People Involved: