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

Question

This question is about editing css files in Sublime Text 3, with use of autocompletion.

I want this:

.class { color: #FFF; text-align: center; text-decoration: underline }

to be this:

.class { color:#FFF; text-align:center; text-decoration:underline }

as I type, not post-processor plugins.

Answer 1

First off, let me say that I'm against this for readability reasons - if you want to minify your CSS, there are plenty of tools available to do that within Sublime. That being said, there is a way to do it, but it requires some effort. First, make sure you have Package Control installed. Next, we'll need to extract a file from a .sublime-package file, so install the PackageResourceViewer plugin. To do that, once you have Package Control installed and have restarted Sublime, open the Command Palette with Ctrl Shift P ( ⌘ Shift P on OS X) and type pci into the prompt to bring up the Package Control: Install Package option. Hit Enter , wait for the repositories to load, then type packresview to bring up the PackageResourceViewer option. Hit Enter again, and wait for it to install.

Next, open the Command Palette again, and type prv to bring up the PackageResourceViewer options, then select PackageResourceViewer: Open Resource . Scroll down to CSS , hit Enter , then scroll down to css_completions.py and hit Enter again to open it. You can ignore 99% of the file, just scroll down to line 190, which looks like this:

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

Just delete the space after the colon : like so:

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

save the file, and you should be all set. You may want to restart Sublime (and reopen all your CSS files) for the full changes to take effect.