CSS highlighting breaks when a nested rule comes before a custom property in the same block

[YitshakS]

Bug

When a CSS block has a nested rule followed by a custom property declaration, syntax highlighting desyncs from that point on.

Repro

#a { .b { gap: 1px; } --c: 1px; }

Swap the order and it highlights fine:

#a { --c: 1px; .b { gap: 1px; } }

Both are valid, equivalent CSS (order doesn't matter per the CSS Nesting spec) — only the highlighting differs.

Expected: both orders highlight the same.

Env: Windows

[romainmenke]

I am fairly certain that this is already fixed.

I can't reproduce this issue in this repo:

While VSCode Insiders still has incorrect highlighting:

[YitshakS]

Thanks for digging into this. Confirmed on main - rule-list re-enters $self and rule-list-innards includes #selector, so the grammar here is fixed.

Stable and Insiders still reproduce it, so this is pending a grammar sync into vscode rather than a grammar bug. Keeping it open until then?

[thernstig]

YitshakS test the latest VS Code, this should have been released now.