@astrojs/language-server: `@property` in `<style>` breaks syntax highlighting for all subsequent blocks

[PanRoR]

Astro Info

Astro                    v6.3.3
Vite                     v7.3.3
Node                     v24.15.0
System                   Linux (x64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             none

If this issue only occurs in one browser, which browser is a problem?

All

Describe the Bug

Package: @astrojs/language-server
Repo: withastro/language-tools

Description

Using @property inside a <style> block causes the language server to incorrectly
tokenize the rest of the .astro file. The closing </style> tag loses its syntax
highlighting, and all subsequent <script> and <style> blocks are highlighted
incorrectly as well.

This does not happen in Zed, which suggests the issue is specific to the
@astrojs/language-server used by the VS Code extension.

Steps to Reproduce

Create an .astro file with the following content:

<script>
  console.log(window);
</script>

<style>
  @property --logo-color {
    syntax: "<color>";
    inherits: false;
    initial-value: #c0ffee;
  }
</style>

<style>
  div {
    background: red;
  }
</style>

<script>
  console.log(window);

  function testFunc() {
        console.log("test");
    }

    testFunc();
</script>

Actual Behavior

• The closing </style> tag after the @property block loses correct highlighting
• All subsequent <style> and <script> blocks (both content and tags) are
  incorrectly highlighted
• Subsequent </style> closing tags are also affected

Environment

• VS Code version: 1.120
• Astro VS Code extension (astro-vscode) version: 2.16.14

Additional Context

The issue does not reproduce in Zed editor, indicating this is specific to the
language server's tokenizer/parser, not a general CSS grammar issue.

Confirmed on both Linux and Windows, so this is not OS-specific.

VSCode Picture with at-property:

VSCode Picture without at-property:

What's the expected result?

All <style> and <script> blocks are highlighted correctly regardless of
@property usage.

Link to Minimal Reproducible Example

https://github.com/PanRoR/astro-at-property-highlighting

Participation

• I am willing to submit a pull request for this issue.

[astrobot-houston]

• Reproduced: Skipped — this is a @astrojs/language-server issue that belongs in the withastro/language-tools repository, not withastro/astro.
• Exploration: No
• Unit Test: No — wrong repository
• Priority: P1: chore. This issue does not affect Astro's core runtime, build system, or dev server. It is a syntax highlighting bug in the language server/VS Code extension, which is maintained in a separate repository.

This issue is about the @astrojs/language-server TextMate grammar failing to correctly tokenize .astro files that contain CSS @property at-rules inside <style> blocks. The language server and VS Code extension are maintained in the withastro/language-tools repository, not this one. The reporter themselves identified the affected package as @astrojs/language-server and repo as withastro/language-tools.

I was unable to determine the cause of this issue. This should be filed at https://github.com/withastro/language-tools/issues instead. The @property CSS at-rule is valid CSS and likely needs to be handled in the language server's TextMate grammar or parser for .astro files. The fact that it works correctly in Zed (which uses Tree-sitter grammars) confirms this is specific to the VS Code extension's tokenization approach.

Full Triage Report

Issue Details

• Title: @astrojs/language-server: @property in <style> breaks syntax highlighting for all subsequent blocks
• URL: @astrojs/language-server: @property in <style> breaks syntax highlighting for all subsequent blocks #16751
• Author: PanRoR
• Created: 2026-05-15T14:24:09Z
• State: open
• Labels: needs triage

Issue Description

The reporter states that using CSS @property inside a <style> block in an .astro file causes the @astrojs/language-server (VS Code Astro extension) to incorrectly tokenize the rest of the file. Specifically:

• The closing </style> tag after the @property block loses correct highlighting
• All subsequent <style> and <script> blocks are incorrectly highlighted
• The issue does NOT reproduce in Zed editor, confirming it is specific to the language server

The reporter explicitly identifies:

• Package: @astrojs/language-server
• Repo: withastro/language-tools

Reproduction Code

<script>
  console.log(window);
</script>

<style>
  @property --logo-color {
    syntax: "<color>";
    inherits: false;
    initial-value: #c0ffee;
  }
</style>

<style>
  div {
    background: red;
  }
</style>

<script>
  console.log(window);

  function testFunc() {
        console.log("test");
    }

    testFunc();
</script>

Environment from Issue

• Astro v6.3.3
• Vite v7.3.3
• Node v24.15.0
• VS Code version: 1.120
• Astro VS Code extension (astro-vscode) version: 2.16.14

Expected Result

All <style> and <script> blocks are highlighted correctly regardless of @property usage.

Actual Result

Syntax highlighting breaks for all blocks following a @property CSS at-rule in a <style> block.

Reproduction Link

https://github.com/PanRoR/astro-at-property-highlighting

Reproduction Status: SKIPPED

Skip Reason: not-actionable

Why This Was Skipped

This issue was skipped for two independent reasons:

1. Wrong repository: The issue is explicitly about @astrojs/language-server, which lives in the withastro/language-tools repository, not withastro/astro. The reporter themselves identified the affected package as @astrojs/language-server and repo as withastro/language-tools. This issue should be filed there instead.

2. Cannot reproduce in headless environment: Even if this issue were in the correct repository, syntax highlighting bugs require a running editor instance (VS Code with the Astro extension) to reproduce. Our headless sandbox environment has no GUI editor, so we cannot observe or verify syntax highlighting behavior. The bug is about TextMate grammar tokenization and/or language server parsing, not about Astro's build system, dev server, or runtime behavior.

Recommendation

This issue should be:

• Transferred to the withastro/language-tools repository, OR
• Closed with a note directing the reporter to file at https://github.com/withastro/language-tools/issues

The @property CSS at-rule is valid CSS and likely just needs to be properly handled in the language server's TextMate grammar or parser for .astro files. The fact that it works in Zed (which uses Tree-sitter grammars) confirms this is specific to the VS Code extension's tokenization approach.

This report was made by an LLM. The analysis may be wrong, and the potential fix might not work, but is intended as a starting point for exploring the issue.

[matthewp]

Triagebot, you should not skip this one. The language-tools repository is archived, @astrojs/language-server is now in the monorepo. The code is here: https://github.com/withastro/astro/tree/main/packages/language-tools

Please try again.

[matthewp]

Astrobot, please try again with the latest code.

[astrobot-houston]

• Reproduced: Yes — confirmed via vscode-tmgrammar-snap with VS Code's real CSS TextMate grammar. The </style> tag after @property and all subsequent blocks are consumed as CSS content.
• Exploration: Yes — View branch
• Unit Test: Yes — packages/language-tools/vscode/test/grammar/fixtures/style/at-property.astro (grammar snapshot test verifying correct scoping of all blocks when @property is present)
• Priority: P3: minor bug. This affects users of the Astro VS Code extension who use CSS @property at-rules in <style> blocks. While disruptive when encountered (highlighting breaks for the entire rest of the file), the workaround is to avoid @property or place it in a separate CSS file. The runtime build/dev behavior is unaffected.

The root cause is in the Astro TextMate grammar (astro.tmLanguage.src.yaml). All 7 style injection patterns use end: '(?=</)' to detect </style>, but this end pattern can be blocked when the embedded CSS grammar has an active child pattern that hasn't terminated. CSS @property's syntax: "<color>" descriptor triggers VS Code's CSS grammar to start a selector pattern (since it doesn't specifically handle @property), and the > in <color> gets consumed as a CSS child combinator. The selector never closes because } isn't in its end condition, so the Astro grammar's </style> detection is never reached. Notably, <script> injection patterns were already fixed for this same class of issue in PR #15109 — the style patterns were simply never updated.

I found a potential fix for this issue. The fix updates all 7 style injection patterns to use the same robust two-pattern approach (begin/end for single-line + begin/while for multi-line) already used by script injection patterns. The while pattern is evaluated at the start of each line before child patterns, so </style> is always detected regardless of the embedded CSS grammar's internal state. All 23 grammar snapshot tests pass with zero regressions.

Full Triage Report

Issue Details

• Title: @astrojs/language-server: @property in <style> breaks syntax highlighting for all subsequent blocks
• URL: @astrojs/language-server: @property in <style> breaks syntax highlighting for all subsequent blocks #16751
• Author: PanRoR
• Created: 2026-05-15T14:24:09Z
• State: open
• Labels: needs triage

Issue Description

Using CSS @property inside a <style> block in an .astro file causes the VS Code Astro extension's syntax highlighting to break. Specifically:

• The closing </style> tag after the @property block loses correct highlighting
• All subsequent <style> and <script> blocks (both content and tags) are incorrectly highlighted
• Subsequent </style> closing tags are also affected

The issue does NOT reproduce in Zed editor, confirming it is specific to the TextMate grammar tokenization used by the VS Code extension.

Reproduction Code

<script>
  console.log(window);
</script>

<style>
  @property --logo-color {
    syntax: "<color>";
    inherits: false;
    initial-value: #c0ffee;
  }
</style>

<style>
  div {
    background: red;
  }
</style>

<script>
  console.log(window);

  function testFunc() {
        console.log("test");
    }

    testFunc();
</script>

Expected Result

All <style> and <script> blocks are highlighted correctly regardless of @property usage.

Actual Result

Syntax highlighting breaks for all blocks following a @property CSS at-rule in a <style> block.

Environment from Issue

• Astro v6.3.3
• Vite v7.3.3
• Node v24.15.0
• VS Code version: 1.120
• Astro VS Code extension (astro-vscode) version: 2.16.14

Reproduction Status: REPRODUCED ✅

The bug was reproduced using vscode-tmgrammar-snap with VS Code's real CSS TextMate grammar. Tokenization snapshots show </style> after @property is consumed as CSS selector content (entity.name.tag.css + keyword.operator.combinator.css), and all subsequent blocks inherit the broken CSS scope.

Root Cause

The root cause is an inconsistency in how the Astro TextMate grammar handles embedded content termination for <style> blocks versus <script> blocks.

File: packages/language-tools/vscode/syntaxes/astro.tmLanguage.src.yaml

All style injection patterns use end: '(?=</)' to detect </style>. However, when VS Code's CSS grammar enters a stuck state (e.g., a selector pattern triggered by @property's syntax: "<color>" descriptor), the TextMate engine never checks the parent injection's end pattern, and </style> is consumed as CSS content.

In PR #15109 (commit e062101b3c), script injection patterns were updated to use a while-based approach that is immune to this issue. The style injections were never updated — this is an oversight.

Fix

Updated all 7 style injection patterns from single begin/end to a two-pattern approach matching script injections:

Before:

begin: '(?<=>)(?!</)'
end: '(?=</)'

After:

# Pattern 1: Single-line content
begin: '(?<=>)(?=[^\n]+</style[\s>])'
end: '(?=</style[\s>])'

# Pattern 2: Multi-line content
begin: '(?<=>)(?!</)'
while: '^(?!\s*</style[\s>])'

Verification

• All </style> and </script> closing tags correctly recognized ✅
• All 23 grammar snapshot tests pass (22 existing + 1 new) ✅
• Zero regressions ✅

Test Added

• File: packages/language-tools/vscode/test/grammar/fixtures/style/at-property.astro
• Snapshot: packages/language-tools/vscode/test/grammar/fixtures/style/at-property.astro.snap

Changeset

• File: .changeset/fix-style-at-property-highlighting.md
• Package: astro-vscode (patch)

This report was made by an LLM. The analysis may be wrong, and the potential fix might not work, but is intended as a starting point for exploring the issue.

[mozgovoyslava]

Hi!
I started looking into this and was able to reproduce it locally.

It looks like the issue is triggered specifically by declarations inside a CSS @property block in an Astro <style> tag.

This works:

@property --logo-color {
}

I’ll keep investigating the TextMate grammar under packages/language-tools and try to put together a small regression test + fix.

[mozgovoyslava]

Thanks, this matches what I’m seeing locally.

I noticed Astrobot has a branch with a potential fix now. I don’t want to duplicate work, so I’ll take a look at that approach first. If there isn’t already a PR in progress, I’m happy to pick this up and submit the regression test + fix.

[mozgovoyslava]

Opened a PR with a fix: #16758

[mozgovoyslava]

Is there anything I should update in my PR?