Add @layer syntax highlighting

[Poliklot]

Fixes #17
Fixes #24
Part of #20
Related to #7

This adds TextMate grammar support for CSS cascade layers.

Covered syntax:

• @layer reset, framework.theme;
• @layer framework { ... }
• anonymous layers: @layer { ... }
• nested layers: @layer foo { @layer bar { ... } }
• @import "theme.css" layer;
• @import url("theme.css") layer(framework.theme);

This intentionally keeps the scope limited to cascade layer syntax. Broader latest @import syntax support from #20 can be handled separately.

Testing

npm test

Result:

# tests 208
# pass 202
# fail 0
# skipped 6

Screenshots

Before:

After:

[Poliklot]

@microsoft-github-policy-service agree

[Poliklot]

@aeschli @dmitrivMS hi! Could you please take a look at PR #52 when you have a chance? It adds CSS TextMate grammar support for @layer, fixes #17 and #24, partially relates to #20, covers @layer, anonymous/nested layers, and @import ... layer(...), and includes tests. The PR has been open since May 22, 2026 and has not received a review yet. I’d really appreciate any feedback or guidance on what needs to be adjusted to move it toward merge.

[Poliklot]

@lszomoru sorry for the extra ping — would you be able to help route this PR to the right reviewers? It touches only grammars/css.cson and spec/css-spec.mjs, includes tests, and the current blocker seems to be the VS Code Engineering “Community PR Approvals” check requiring 2 collaborator approvals. If you’re not the right person for CSS TextMate grammar changes, could you please point me to who is?

[Copilot]

Pull request overview

Adds TextMate grammar and accompanying spec tests to support CSS cascade layer syntax highlighting, covering @layer statements/blocks (including anonymous and nested layers) and layer / layer(...) in @import.

Changes:

• Extend the CSS TextMate grammar to tokenize @layer at-rules (header + optional body) and layer name lists.
• Extend @import tokenization to recognize layer and layer(<layer-name>) segments.
• Add spec tests validating token scopes for @layer and @import ... layer... cases.

Show a summary per file

File	Description
spec/css-spec.mjs	Adds tokenization tests for @layer and @import ... layer... highlighting scopes.
grammars/css.cson	Introduces @layer grammar rule plus #layer-import / #layer-name-list patterns for highlighting cascade layer syntax.

Review details

Tip

Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

• Files reviewed: 2/2 changed files
• Comments generated: 2
• Review effort level: Low

[Copilot]

Review details

• Files reviewed: 2/2 changed files
• Comments generated: 0 new
• Review effort level: Low