Skip to content

Instantly share code, notes, and snippets.

@zachharkey
Created November 28, 2012 21:28
Show Gist options
  • Star 6 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save zachharkey/4164682 to your computer and use it in GitHub Desktop.
Save zachharkey/4164682 to your computer and use it in GitHub Desktop.
SublimeText2 CSSTidy Custom Templates

Custom CSSTidy Templates for Sublime Text 2

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.

<span class="at">|</span> <span class="format">{</span>
|<span class="selector">|</span> <span class="format">{</span>
| <span class="property">|</span><span class="value">|</span><span class="format">;</span>
|<span class="format">}</span>|
|
<span class="format">}</span>
| |<span class="comment">|</span>
|
<span class="at">|</span> <span class="format">{</span>
|<span class="selector">|</span> <span class="format">{</span>
| <span class="property">|</span><span class="value">|</span><span class="format">;</span>
|<span class="format">}</span>|
|
<span class="format">}</span>
| |<span class="comment">|</span>
|
@toddprouty
Copy link

I made a minor modification in my fork so that the tidied CSS includes a space after the property and colon.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment