CSS huge one-line file indentation doesn't work

Question

I am trying to indent in a sensible way this CSS file. My default editor is VIM. I tried multiple times using visual-select-all + =, didn't work gg=G didn't work either.

I have tried to use css.vim but still nothing. Is there automated way to do this?

Answer 1

Use an external utility.

$ npm install cssbeautify
$ vim screen.css

:%!cssbeautify %

Presto!

---

before

after

Answer 2

Vim's indenting will not break nor join lines; it only adjusts the leading indent of each line. If you want to use vim's built-in indenting, then you first have to break the one-line CSS file into separate lines. A good start is to add a newline after each (opening or closing) brace and each semicolon:

:%s/[{;}]/&\r/g

If you install an external program, as @Ярослав Рахматуллин suggests, then you might decide to use that with the = commands:

:help 'equalprg'

Answer 3

Without any external software, only with Vim:

1. Split the big line in one rule per line:

%s/\(.\{-}{.\{-}}\)/\r\1/gc

2. Reformat: first step. For each rule put all properties in one line:

%s/\(.\{-}{\)\(.\{-}\)\(}\)/\1\r\t\2\r\3\r/gc

3. Reformat: second step. Split properties one per line:

%s/;/;\r\t/gc

Maybe you can do it easier, but this works.

For the explanation of the regex see https://vimhelp.org/pattern.txt.html and https://vimhelp.org/change.txt.html#sub-replace-special

Answer 4

you can always try "online [whateveryouneed]" on google

http://www.lonniebest.com/FormatCSS/

hope it works