How to make vim alphabetically sort CSS rules within a single line?

Question

Source:

.foo { line-height: 150px; font-size: 24px; clear: both; }

vim magic here, probably something visual selection based

Result:

.foo { clear: both; font-size: 24px; line-height: 150px; }

What do you suggest for the vim magic part?

Answer 1

:s/\([{;]\)\s*/\1\r/g | '[+1,']sort | '[,']join

Split the line on { or ; to get each rule into a separate line, :sort them (omitting the first line containing the CSS definition), then join them back together.