SublimeText command for compacting/expanding CSS rules

compact_expand_css_command.py

import sublime
import sublime_plugin
import re


class CompactExpandCssCommand(sublime_plugin.TextCommand):
    def run(self, edit, action='compact'):
        rule_starts = self.view.find_all('\{')
        rule_ends = self.view.find_all('\}')

        rules_regions = list()
        regions_to_process = list()

        selections = self.view.sel()
        if len(selections) == 1 and selections[0].empty():
            selections = [sublime.Region(0, self.view.size())]

        for i in range(len(rule_starts)):
            rule_region = sublime.Region(rule_starts[i].a, rule_ends[i].b)
            rules_regions.append(rule_region)
            for sel in selections:
                if sel.intersects(rule_region):
                    regions_to_process.append(rule_region)
                    break

        regions_to_process.reverse()
        self.process_rules_regions(regions_to_process, action, edit)

    def process_rules_regions(self, regions, action, edit):
        actions = {
            'compact': self.compact_rules,
            'expand': self.expand_rules,
            'toggle': self.toggle_rules
        }
        actions[action](regions, edit)

    def toggle_rules(self, regions, edit):
        grouped_rules = list()

        for r in regions:
            action_key = 'expand' if self.rule_is_compact(r) else 'compact'

            if not grouped_rules or not action_key in grouped_rules[-1]:
                grouped_rules.append({action_key: []})

            grouped_rules[-1][action_key].append(r)

        for group in grouped_rules:
            for (action, rules) in group.items():
                self.process_rules_regions(rules, action, edit)

    def compact_rules(self, regions, edit):
        view = self.view

        for collapse_region in regions:
            content = view.substr(collapse_region)

            match = re.match(r"\{([^\}]*)\}", content)

            rules = match.group(1).split(';')
            rules = [r.strip() for r in rules]
            rules = '; '.join(rules)

            view.replace(edit, collapse_region, '{ ' + rules + '}')

    def expand_rules(self, regions, edit):
        view = self.view

        for expand_region in regions:
            content = view.substr(expand_region)

            match = re.match(r"\{([^\}]*)\}", content)

            rules = match.group(1).split(';')
            rules = filter(lambda r: r.strip(), rules)
            rules = ['\t' + r.strip() + ';\n' for r in rules]
            rules = ''.join(rules)

            view.replace(edit, expand_region, '{\n' + rules + '}')

    def rule_is_compact(self, rule):
        return re.match(r"^\{.*\}$", self.view.substr(rule))

gistfile1.txt

// commands allow compacting/expanding of selected rules.
// multiple selections are supported
// commands are applied to rules which are covered by selection
// if there's a single empty selection then the command is applied to all rules within the document

// 1. save the file above under your Packages/User folder. for more info on where it's located on your platform look here - http://docs.sublimetext.info/en/latest/basic_concepts.html#the-data-directory
// 2.1 add these to Packages/User/Default.sublime-commands to be able to execute through command list
// (if .sublime-commands doesn't exist there just create it by hand)

{
  "caption": "CSS rules compact",
  "command": "compact_expand_css",
  "args": { "action": "compact" }
},
{
  "caption": "CSS rules expand",
  "command": "compact_expand_css",
  "args": { "action": "expand" }
},
{
  "caption": "CSS rules toggle",
  "command": "compact_expand_css",
  "args": { "action": "toggle" }
}

// or 
// 2.2 map commands to keyboard shortcuts in Packages/User/Default(*your OS*).sublime-keymap to take the shortcut (if the file is not present, create by hand or go to Preferences -> Key Bindings - User).
// exmaple what the shortcut might look like

{ "keys": ["ctrl+super+]"], "command": "compact_expand_css", "args": { "action": "expand" }  },
{ "keys": ["ctrl+super+["], "command": "compact_expand_css", "args": { "action": "compact" } },

@rareman I'll probably take the time to revise this to work with nested rules. Stay tuned

tks

Hi, like thiagobousfield, I followed the instructions, double checked everything, but could not get it to work. The .py file is saved, and I created the commands file. Now what? Where is the "command list"? Under "Tools" I found a "Commands Palette". Is that it? No "CSS rules" there. Do I need to restart something? (I restarted Sublime, but that didn't help.)
Thank you!

Yes @lausianne, the commands should appear in Command Pallet (Tools -> Command Pallete).
If you create the .keymap and .sublime-commands file yourself, make sure to wrap the bindings and commands with [] .

[
{
  "caption": "CSS rules compact",
  "command": "compact_expand_css",
  "args": { "action": "compact" }
},
{
  "caption": "CSS rules expand",
  "command": "compact_expand_css",
  "args": { "action": "expand" }
},
{
  "caption": "CSS rules toggle",
  "command": "compact_expand_css",
  "args": { "action": "toggle" }
}
]

and

[
{ "keys": ["ctrl+super+]"], "command": "compact_expand_css", "args": { "action": "expand" }  },
{ "keys": ["ctrl+super+["], "command": "compact_expand_css", "args": { "action": "compact" } }
]

Thanks, @vitaLee, it was the square brackets that I had not known about. Now it works, very nice. (No restart necessary.)
I'd like to make a small suggestion: The compressed version has spaces before/behind the curly braces, which I like. But there's no space after the colons. Perhaps you might consider adding that.
Selecting all colons manually and adding a space does not work, because it adds spaces before "hover", "active", etc., too ...

Well, done it myself:
Added

rules = rules.replace(': ',':')
rules = rules.replace(':',': ')

after lines 62 and 77. Probably not the most elegant solution, but works for me!

This is awesome, I've been searching all day for a solution for this - comes in super handy for updating older projects.

Did you ever update it for nested rules?

I added the suggestions from @lausianne and also these for my own preference to remove spaces before/after {} when collapsing:

rules = rules.rstrip(' ')

view.replace(edit, collapse_region, '{' + rules + '}')