TextMate: Minify CSS Regular Expression

I love TextMate. It’s saved me so much time since I’ve started using, I think I’d find it impossible to use another editor. However, the format CSS compressed snippet, doesn’t quite do what I’d expect.

Luckily the Find and Replace regular expression engine is pretty cool!

I’ve got this small (!) regular expression that should minify your CSS, by putting:

;?\s*([:;,{}])\s*|\s*/\*()[\S\s]+?\*/\s*|(\s)\s+

in the Find box and:

$1

in the replace box, and by ensuring that Regular expression is ticked, you should be able to minify CSS with the Replace All button!

TextMate Find and Replace: Minify CSS

Note: I haven’t test this particularly extensively, or with the IE expression(). This may produce undesired results! It certainly seems to be fine on all the standard CSS I’ve tested it with.

Minify CSS – Shrink your CSS down to size

I know there are probably many services offering it already out there, and it’s not too hard to run right in TextMate, but I haven’t been able to find it in 30 seconds of Googling (well, I couldn’t at work, but I’ve since found this… Oh well!), so I set up a quick script to do it for me:

http://dom.hastin.gs/files/minifycss/

If it’s useful, I might set up a memorable URL, let me know in the comments 🙂

I did set up syntax highlighting, using codemirror, which looked pretty nice, but made the minification (on large-ish files) take far too long. I haven’t really tested on any huge files, so try this at your own risk, but it seems faster that TextMate was.