How to use another brackets/tabs policy for my CSS? - css

Question

Here is an example of what is happening now:
.class {
}
So when I'm typing .class { SublimeText automatically inserts } (which is correct).
Then I press Enter and get this:
.class {
#CURSOR_POSITION#
}
But what I really want is (attention to the closing bracket):
.class {
#CURSOR_POSITION#
}
I've even seen (ok, it was only once) in some editor special setting for this. Now I start using SublimeText (which is cool!) and I feel that it can be customized in a such way but I'm not quite sure how.

Answer 1

Ok! It's not really hard to do it but it was not simple to know how to do it =)
So my approach is:
Write a simple macro (I've edited the default Enter macro called Add Line in Braces.sublime-macro which lives in ~Data/Packages/Default) and save it with a new name.
I've called it CSS.Add Line in Braces.sublime-macro and put in ~Data/Packages/User.
[
{"command": "insert", "args": {"characters": "\n\n"} },
{"command": "move_to", "args": {"to": "hardbol", "extend": false} },
{"command": "insert", "args": {"characters": "\t"} },
{"command": "move", "args": {"by": "lines", "forward": false} },
{"command": "move_to", "args": {"to": "hardeol", "extend": false} },
{"command": "reindent", "args": {"single_line": true} }
]
Apply it for Enter key in CSS files. For that we need to fo to Preferences > Key Bindings - User (it will open ~Data/Packages/User/Default (YOUR_OPERATING_SYSTEM).sublime-keymap) and paste there the following code:
[
{ "keys": ["enter"], "command": "run_macro_file", "args": {"file": "Packages/User/CSS.Add Line in Braces.sublime-macro"}, "context":
[
{ "key": "selector", "operator": "equal", "operand": "source.css" },
{ "key": "setting.auto_indent", "operator": "equal", "operand": true },
{ "key": "selection_empty", "operator": "equal", "operand": true, "match_all": true },
{ "key": "preceding_text", "operator": "regex_contains", "operand": "\\{$", "match_all": true },
{ "key": "following_text", "operator": "regex_contains", "operand": "^\\}", "match_all": true }
]
}
]
It is copy-pasted from the defult keybinding file with one context addition:
{ "key": "selector", "operator": "equal", "operand": "source.css" }
which tells Sublime to apply it only for CSS ext.
Profit!