A Gift from the Comments

Just over a week ago, a nice guy named Nathan Heinrich added a comment to our blog post mentioning that he was working on a TextMate command to solve this problem. Nathan has now completed his TextMate command, and it is ready for the world.

1. Install CSSTidy on Mac OS X 1. Download SCons: http://prdownloads.sourceforge.net/scons/scons-1.2.0.tar.gz 2. Decompress it. 3. In the Terminal, run the following from the scons-1.2.0 folder: sudo python setup.py install 4. Download CSSTidy: http://downloads.sourceforge.net/csstidy/csstidy-source-1.4.zip 5. Decompress it 6. In the Terminal, go to the CSSTidy folder containing SConstruct and run 'sudo scons' 7. Now there is a new folder that is called 'release' 8. Move the executable 'csstidy' that is inside 'release' to /usr/local/bin 2. Decompress and double-click the CSSTidy.tmbundle file to install it 3. Put csstidy.tpl in your Home folder (/Users/[your username])

That's it. Now you should be able to press Ctrl+Shift+H to format the selected CSS.

Minor Issues:

1. Comments inside curly braces aren't handled well yet 2. Sometimes there is an extra closing brace added to the end of the selected text after the command is run. This seems to be an issue with CSSTidy 1.4. If anyone knows a fix for this let us know

A note on pipe to the perl regex:

"| perl -ple 's/,(?=.*?{)/,n/g'" is for adding a newline after commas that are followed by an opening { (commas in selectors only). This is a personal preference because if you have a lot of selectors that share the same style (Eric Meyer Reset, YUI reset) it will push out your styles really far to the right of the document.

Thanks to Nathan Heinrich for the useful TextMate command! Let Nathan know in the comments if you find this helpful.

Partner, Developer

Published

March 25, 2010

Comments

Like This? Share it!

Email Newsletter

Our monthly highlights

Comments

Jens Grochtdreis

Well, there is the usual CSS-Bundle with the possibilities to "Format CSS" and "Format Compressed CSS". They should do the same, shouldt they?

03.27.2010

Wouter Vervloet

I'm not sure if this is the same or not, but there already is something like this included with Textmate.

If you select a block of CSS and press 'Ctrl+Alt+Q' it will put all properties of a selector block on a single line.

'Ctrl+Q' does the exact opposite, it parses a single-line block of CSS and makes it multi-line.

Just for reference, I'm running version 1.5.8 (1509).

Greetz,Wouter

04.19.2010

Wouter Vervloet

My apologies... I just noticed Jens already pointed this out, he just didn't mention the shortcut.

04.19.2010

Timmy

The textmate shortcut is different. It is more of a compressor than a formatter, meaning it strips all spaces and empty lines. Single-line CSS is generally different than just compression. It is a cross between keeping the properties readable and not having css that is 70 pages of scrolling. So, you should still have spacing, divided blocks with comments, etc.

08.10.2010

Judah

This bundle adds some simple but powerful alignment choices to complement what is already in textmate:

https://github.com/sicher/align-tmbundle

I was looking for a way to align the leading curly brace "{" of each of my css declarations and this does the trick. In addition to assignment alignment, aligning comments, and aligning text, it also allows you to supply a custom character to base the alignment off.
04.04.2012