microsoft / microsoft/vscode-css
CSS highlighting breaks when a nested rule comes before a custom property in the same block
Open
@alexr00 is already working on this.
Since Jul 28, 2026.
- Dominant language
- JavaScript
- Stars
- 27
- Forks
- 25
- Avg merge
- 3d 19h
- Merged PRs (30d)
- 2
Description
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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.