Custom folding for CSS in Vim

Question

I came upon this custom folding for CSS in Vim and inspired by it I was trying to make my own with slightly different result in mind. I had to give up as I couldn't make search patterns work in folding function. No surprise to me as I'm rather a Vim beginner :)

Any help to achieve the following will be much appreciated.

• I use empty line(s) for separation for readability. Plus it enables navigation with Vim's } and {.

• I put every selector on its own line.

• I group declarations into sections, which often are nested.

The sample input is:

/* # Globals
===================================== */

...

/* ## Lists
------------------------------------- */

ol,
ul {
  margin-top: 1.6154em; /*21px*/
  /* Some other comment */
  list-style-position: outside;
}

dl,
dl > some .very.long + selector:not-fitting[on=screen] {
  ...

I want to:

1. Fold sections based on their level.

   The section level is indicated by a number of #, thus in the above example "Globals" should have fold level 1 and "Lists" -- 2. There can be a third level too.

   The fold text for a section should not contain any #.

2. Start a fold for declaration at the first selector.

3. End a fold at the last empty line following the declaration's closing brace }.

4. Display all selectors in the fold text.

   In case they don't fit in the window, display those that do and a count of not displayed ones.

I'll illustrate it using the sample provided above.

When using :set foldmethod=marker and :set foldmarker={,} the resulting fold is:

ol,
+----  5 lines: ul -------------------------

dl,
+----  x lines: dl > some .very.long ...----

And I'd like it to be (notice there's no empty line between folds):

+---- ol, ul -------------------------------
+---- dl ---------------------------[1]-----

Answer 1

Check this folding plugin for CSS I wrote for SO. It should be easy to improve it to your needs. You will have to test the lines around the current line -- it may be more efficient to detect all curly brackets, and cache them, in order to known when to look for continuing lines.

Answer 2

Check this folding plugin for CSS I wrote for SO.

That was your "plugin" that inspired me, which I stated at first :)

I worked out a search pattern matching the last empty line after a closing curly bracket /}\_s\+\zs\_s, which worked fine in editor window. However, I failed to make it work in the function computing the fold level.

You will have to test the lines around the current line -- it may be more efficient to detect all curly brackets, and cache them, in order to known when to look for continuing lines.

How to do that?