CSS minifier and color changer

Sometimes you want to be able to compress your stylesheet without having to worry about having a working version and a minified version that are separate, or going back and reflowing your minified version every time you want to make a change. Sometimes you want to be able to change a color without having to go through and find the then thousands times you used to and change them all my hand (even with a fancy find/replace command). In that case it’s time to get some scripting involved, I’ve done this in the past, with a more advanced version that also included allt he linked images as data URIs, but that truly is overkill and can really slow down a style sheet process with large images in it. My original version was also much slower overall relying on <code>str_ireplace()</code> instead of a much neater regular expression. So when I was taksed with making a new version for a different site I figues it’d be best to more it as compact and fast as possible> After some tinkering and playing around with regular expressions (regexpal.com is a great place to do that BTW) I came up with this:

Snipplr: http://snipplr.com/view/58764/css-minifier-and-color-replaces/

What this script does is pretty simple, first a function is declared, this is the function that replaces colors, if your not going to be doing that you can remove it (and the second regular expression). This it loads the file using file_get_contents, if you have multiple stylesheets you can load them all into it and places them all in the save $css variable using .= instead, then it runs the regular expressions (first one minifies, second one replaces colors (more on that in a bit) and finally it preps the output and prins it. The first regular expression is kinda long and may be hard to follow, but it removed all comments, lines breaks, and spaces when there not important to the formatting (so if you use the sigle element margin declaration <code>margin: 0px 4px 3px 10px;</code> all thos spaces will be preserved, except for that first one after the <code>:</code>). To compress the code further you could also gzip to results when it’s supported by the browser but I didn’t do it because of some strage behavior on my test machine when it comes to gzipping things, it’s on the list for the final release code though. I suppose if you wanted to take things one step further you could also search for inefficient code and replace that as well, but I didn’t include it because the software I use automatically does that (yes I was being lazy not including it but it really would have been a waste of time and made the script a lot longer in the process).

The second regular expression find specific comments placed in the code after colors and replaces them, for example it would take this:

and turn it into this

assuming that the colorize script returned red as the color. The colorize function can get the new colors however you want it to (in whatever format you want too), the can be pre-determined from an array, picked based on time of day, cookie settings, database settings. Whatever you want to do to get them should work. Personally I’m using Wordpress to save them and then pulling them back out from that, this gives you a nice page on the Wordpress backend to save the colors. This gives users a simple way to change colors on there themes without having to dirty themselves with css code (good considering most people using these themes don’t know anything about css). Best part is, if it’s missing a value it will use whatever is in the stylesheet normally, so you can still do your layout with a program that has live previews without having to refresh pages to get the php to re-run.

This could easily be expanded upon in the future, and perhaps one day I’ll have the chance to do that. It could easily be turned into something with complete customizability, even to the point of replaced border and margins, widths, padding – you name it. but for now it will just do colors as thats a good 90% of what needs to be changed. Any questions or improvements let me know in the comments.

UPDATE: I made the color catcher better and added keyword support, you can see the new version here: http://fatfolderdesign.com/400/unimportant/css-colorizer-update

One Reply to “CSS minifier and color changer”

Leave a Reply

Your email address will not be published. Required fields are marked *