The CSSTidy package for SublimeText 2 works great for toggling between different CSS formats, but none of the default options output CSS consistent with the Drupal CSS coding standards with selectors, braces and properties indented and formatted like so:
selector {
property: value;
}
CSSTidy allows you to add your own templates, but the documentation is sparse, then there's the matter of the Sublime Text 2 integration. If I hadn't been deeply procrastinating, I would not have had th patience to figure it all out. Here's what to do:
On Mac, place the attached custom .tpl files in a directory named "CSSTidyTemplates" at the following path:
~/Library/Application Support/Sublime Text 2/Packages/User/CSSTidyTemplates
Then open the file
~/Library/Application Support/Sublime Text 2/Packages/CSSTidy/csstidy.sublime-commands
And add commands for the new templates like so:
[
{ "caption": "Tidy CSS", "command": "css_tidy" },
{ "caption": "Tidy CSS (Highest Compression)", "command": "css_tidy", "args": {"template": "highest" } },
{ "caption": "Tidy CSS (Low Compression)", "command": "css_tidy", "args": {"template": "low" } },
// Custom templates
{ "caption": "Tidy CSS (Normal)", "command": "css_tidy", "args": {"template": "CSSTidyTemplates/template-normal.tpl" } },
{ "caption": "Tidy CSS (Normal Spaced)", "command": "css_tidy", "args": {"template": "CSSTidyTemplates/template-normal-spaced.tpl" } }
]
The template-normal-spaced.tpl template, adds a single line break after each rule.
Added a space after this part of line 3 in both files so that tidied CSS includes a space after the property and colon:
| <span class="property">|</span>Tidied CSS now matches the first example: