Using Vim, How to Make CSS Rules into One Liners

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

Here's a one-liner:

:%s/{\_.\{-}}/\=substitute(submatch(0), '\n', '', '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 '\n' 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), '[{;]', '\0\r', 'g')/

How to make all the attributions in the css selector into one line with vim?

One option would be

g/{/,/}/j

which breaks down as

g        start a global command
{        search for {
,/}/    for each match, set a range up until the }
j       join the range

Note that this might be to naïve as-is. This doesn't take into account nested brackets. You might first want to set a visual range to the textblock you like to change.

Vim: reformat CSS from one-line to multi-line

if the filetype has already been set as CSS, you can try:

:%s/[{;}]/&\r/g|norm! =gg

at least it works for your example:

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

: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.

Vim, css clean key map convert to function

What was the code of that function?

function CssClean()
    %s@\v/\*([^*]|[\r\n]|(\*+([^*/]|[\r\n])))*\*+/@@g
    call CssPretty()
    %le
    %s/{\_.\{-}}/\=substitute(submatch(0), '\n', '', 'g')/
    nohl
    normal! Gdd
endfunction

should work fine.

Is there a way (or a plugin) to make Vim generate a code outline for CSS?

Consider using code folding instead. It's similar to outlining, in that you have fewer lines to look at to get an idea of the overall structure, but it hides most of the code until you unfold the part you want to read in detail or edit.

What's a quick way to comment/uncomment lines in Vim?

I use the NERD Commenter script. It lets you easily comment, uncomment or toggle comments in your code.

As mentioned in the comments:

for anyone who is confused by the usage, default leader is "\" so 10\cc will comment ten lines and 10\cu will uncomment those ten lines

---

Related Topics