regex - Using Vim, how can I make CSS rules into one liners?

Question

I would like to come up with a Vim substitution command to turn multi-line CSS rules, like this one:

#main {
      padding: 0;
      margin: 10px auto;
}

into compacted single-line rules, like so:

#main {padding:0;margin:10px auto;}

I have a ton of CSS rules that are taking up too many lines, and I cannot figure out the :%s/ commands to use.

Answer 1

Here's a one-liner:

:%s/{\_.{-}}/=substitute(submatch(0), '
', '', 'g')/

\_. matches any character, including a newline, and {-} is the non-greedy version of *, so {\_.{-}} matches everything between a matching pair of curly braces, inclusive.

The = allows you to substitute the result of a vim expression, which we here use to strip out all the newlines ' ' from the matched text (in submatch(0)) using the substitute() function.

The inverse (converting the one-line version to multi-line) can also be done as a one liner:

:%s/{\_.{-}}/=substitute(submatch(0), '[{;]', '
', 'g')/