How to Remove Extra Space After a Colon in CSS with Sublime Text 2

How to remove extra space after a colon in CSS with Sublime Text 2?

I did some more digging and would like to suggest an alternate solution.

1. Open ~/Library/Application Support/Sublime Text 2/Packages/CSS/css_completions.py in Sublime.

2. On line 190, remove the space after the colon:

   l.append((p, p + ": "))
   

The only caveat I can think of is that this might get overwritten when you update Sublime, but this seemed to work great without installing an extra package.

How to add space after a colon in CSS with Sublime Text 2?

Add this line:

{ "keys": [":"], "command": "insert", "args": {"characters": ": "}}

To your .config/sublime-text-2/Packages/User/Default (Linux).sublime-keymap (in menus: Preferences>Key bindings User) File. Now everytime you press :, :and a space will appear... :)

How to override Sublime Text 3 Package's (CSS3) completion syntax

The completions that are coming from completions/properties.py are used by the package's on_query_completions handler, which is what's used by Sublime to populate the autocompletion popup. As such, modifying the contents there (and restarting Sublime so the package reloads) would alter what gets offered in the autocomplete popup (or what can be automatically chosen as the best completion, in the correct circumstances).

    ("background", "background: ${1};"),

This specifies that the autocomplete trigger of background should expand out to the name of the property followed by a colon and a space, and the cursor is left at ${1}, so something like backTab expands out to background: |;; this is the place to modify if you want to add to or modify these kinds of completions.

On the other hand, the issue you're having is that pressing : is what triggers the space to be inserted. This isn't actually something that's autocomplete related at all, though that's not entirely obvious from looking at it.

If you turn on command logging (View > Show Console, sublime.log_commands(True)) and follow your steps above, when you press : you see this in the console:

command: insert_snippet {"contents": ": $0;"}

That's an indication that there's a key binding in place that's doing this for you. Using View Package File from the command palette and filtering with css3 keymap will let you open CSS3/Default.sublime-keymap, where the first key binding is what's doing this:

    { "keys": [":"], "command": "insert_snippet", "args": {"contents": ": $0;"}, "context":
        [
            { "key": "setting.auto_match_enabled", "operator": "equal", "operand": true },
            { "key": "selection_empty", "operator": "equal", "operand": true, "match_all": true },
            { "key": "selector", "operator": "equal", "operand": "meta.declaration-list.css, meta.at-rule.color-profile.block.css, meta.at-rule.counter-style.block.css, meta.at-rule.font-face.block.css, meta.font-feature-type-block.css, meta.at-rule.font-palette-values.block.css, meta.at-rule.page.block.css -meta.page-margin-box.css, meta.at-rule.viewport.block.css", "match_all": true },
            { "key": "selector", "operator": "not_equal", "operand": "meta.selector.css", "match_all": true },
            { "key": "following_text", "operator": "regex_contains", "operand": "^(?:\t| |\\}|$)", "match_all": true }
        ]
    },

The context applied to this binding ensures that it triggers in this particular situation, and it's manually triggering the insert_snippet command to insert the space and semicolon for you.

In order to stop it from doing this, copy that binding from this file into your own key bindings file and change the contents to not include the space that you don't want.

I don't use this package, but based on the scope selectors in the context this can trigger in a few different instances and not just in this one; in all cases it would cause the insertion of the space as well.

If your muscle memory always inserts the space in response to entering a : then that's not a big deal; if it is then you would need to alter the copied binding to change the selector context lines so that they only match when you're editing a property. That would cause Sublime to select your key binding in that case but to fall back to the one in the package in other cases.

How to change css autocomplete style

Go to your Packages folder. Then to the CSS folder. Open css_completions.py.

Almost at the bottom, inside of the on_query_completions method, there is a line

l.append((p, p + ": "))

change to:

l.append((p, p + ":"))

Remove the space after the colon.

Edit

Press tab after entering value to get semicolon.

Also, Emmet is worth checking out for nice completions/snippets and more. However, editing those is another question.

Edit2

Here's a similar question: How to remove extra space after a colon in CSS with Sublime Text 2?

---

Related Topics