Skip to content

Fix Astro syntax highlighting after css @property rules #16758

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mozgovoyslava wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Fix Astro syntax highlighting after css @property rules #16758

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
546fb5a
fix css @property highlighting in Astro styles
mozgovoyslava May 15, 2026
35a4777
Merge branch 'main' into fix-css-property-atrule-highlighting
mozgovoyslava May 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/slick-turtles-play.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'astro-vscode': patch
---

Fixes syntax highlighting after CSS `@property` rules in Astro style blocks
57 changes: 57 additions & 0 deletions packages/language-tools/vscode/syntaxes/astro.tmLanguage.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,6 +134,9 @@
"name": "meta.embedded.block.astro",
"contentName": "source.css",
"patterns": [
{
"include": "#css-property-at-rule"
},
{
"include": "source.css"
}
Expand Down Expand Up @@ -194,6 +197,9 @@
"name": "meta.embedded.block.astro",
"contentName": "source.css",
"patterns": [
{
"include": "#css-property-at-rule"
},
{
"include": "source.css"
}
Expand Down Expand Up @@ -221,6 +227,57 @@
}
],
"repository": {
"css-property-at-rule": {
"begin": "(?i)(?=@property([\\s'\"{;]|/\\*|$))",
"end": "(?<=})(?!\\G)",
"patterns": [
{
"begin": "(?i)\\G(@)property",
"beginCaptures": {
"0": {
"name": "keyword.control.at-rule.property.css"
},
"1": {
"name": "punctuation.definition.keyword.css"
}
},
"end": "(?=\\s*{)",
"name": "meta.at-rule.property.header.css",
"patterns": [
{
"include": "source.css#comment-block"
},
{
"include": "source.css#escapes"
},
{
"match": "--(?:[-a-zA-Z_]|[^\\x00-\\x7F])(?:[-a-zA-Z0-9_]|[^\\x00-\\x7F]|\\\\(?:[0-9a-fA-F]{1,6}|.))*",
"name": "variable.css"
}
]
},
{
"begin": "\\{",
"beginCaptures": {
"0": {
"name": "punctuation.section.property-list.begin.bracket.curly.css"
}
},
"end": "\\}",
"endCaptures": {
"0": {
"name": "punctuation.section.property-list.end.bracket.curly.css"
}
},
"name": "meta.at-rule.property.body.css",
"patterns": [
{
"include": "source.css#rule-list-innards"
}
]
}
]
},
"frontmatter": {
"begin": "\\A(-{3})\\s*$",
"end": "(^|\\G)(-{3})|\\.{3}\\s*$",
Expand Down
32 changes: 30 additions & 2 deletions packages/language-tools/vscode/syntaxes/astro.tmLanguage.src.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ injections:
end: '(?=</)',
name: meta.embedded.block.astro,
contentName: source.css,
patterns: [{ include: source.css }],
patterns: [{ include: '#css-property-at-rule' }, { include: source.css }],
},
]

Expand Down Expand Up @@ -178,7 +178,7 @@ injections:
end: '(?=</)',
name: meta.embedded.block.astro,
contentName: source.css,
patterns: [{ include: source.css }],
patterns: [{ include: '#css-property-at-rule' }, { include: source.css }],
},
]

Expand All @@ -198,6 +198,34 @@ patterns:

# Contains all of our patterns.
repository:
# VS Code's CSS TextMate grammar does not have a dedicated @property rule yet.
# Its generic at-rule body parses descriptors as selectors, which keeps the
# CSS scope open past Astro's closing </style> tag.
css-property-at-rule:
begin: (?i)(?=@property([\s'"{;]|/\*|$))
end: (?<=})(?!\G)
patterns:
- begin: (?i)\G(@)property
beginCaptures:
0: { name: keyword.control.at-rule.property.css }
1: { name: punctuation.definition.keyword.css }
end: (?=\s*{)
name: meta.at-rule.property.header.css
patterns:
- include: source.css#comment-block
- include: source.css#escapes
- match: --(?:[-a-zA-Z_]|[^\x00-\x7F])(?:[-a-zA-Z0-9_]|[^\x00-\x7F]|\\(?:[0-9a-fA-F]{1,6}|.))*
name: variable.css
- begin: \{
beginCaptures:
0: { name: punctuation.section.property-list.begin.bracket.curly.css }
end: \}
endCaptures:
0: { name: punctuation.section.property-list.end.bracket.curly.css }
name: meta.at-rule.property.body.css
patterns:
- include: source.css#rule-list-innards

# ------------
# FRONTMATTER

Expand Down
21 changes: 21 additions & 0 deletions packages/language-tools/vscode/test/grammar/fixtures/style/at-property.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<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);
</script>
61 changes: 61 additions & 0 deletions packages/language-tools/vscode/test/grammar/fixtures/style/at-property.astro.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
><script>
#^ source.astro meta.scope.tag.script.astro meta.script.astro meta.tag.start.astro punctuation.definition.tag.begin.astro
# ^^^^^^ source.astro meta.scope.tag.script.astro meta.script.astro meta.tag.start.astro entity.name.tag.astro
# ^ source.astro meta.scope.tag.script.astro meta.script.astro meta.tag.start.astro punctuation.definition.tag.end.astro
> console.log(window);
#^^^^^^^^^^^^^^^^^^^^^^^ source.astro meta.scope.tag.script.astro meta.script.astro meta.embedded.block.astro source.js
></script>
#^^ source.astro meta.scope.tag.script.astro meta.script.astro meta.tag.end.astro punctuation.definition.tag.begin.astro
# ^^^^^^ source.astro meta.scope.tag.script.astro meta.script.astro meta.tag.end.astro entity.name.tag.astro
# ^ source.astro meta.scope.tag.script.astro meta.script.astro meta.tag.end.astro punctuation.definition.tag.end.astro
>
><style>
#^ source.astro meta.scope.tag.style.astro meta.style.astro meta.tag.start.astro punctuation.definition.tag.begin.astro
# ^^^^^ source.astro meta.scope.tag.style.astro meta.style.astro meta.tag.start.astro entity.name.tag.astro
# ^ source.astro meta.scope.tag.style.astro meta.style.astro meta.tag.start.astro punctuation.definition.tag.end.astro
> @property --logo-color {
#^^ source.astro meta.scope.tag.style.astro meta.style.astro meta.embedded.block.astro source.css
# ^ source.astro meta.scope.tag.style.astro meta.style.astro meta.embedded.block.astro source.css meta.at-rule.property.header.css keyword.control.at-rule.property.css punctuation.definition.keyword.css
# ^^^^^^^^ source.astro meta.scope.tag.style.astro meta.style.astro meta.embedded.block.astro source.css meta.at-rule.property.header.css keyword.control.at-rule.property.css
# ^ source.astro meta.scope.tag.style.astro meta.style.astro meta.embedded.block.astro source.css meta.at-rule.property.header.css
# ^^^^^^^^^^^^ source.astro meta.scope.tag.style.astro meta.style.astro meta.embedded.block.astro source.css meta.at-rule.property.header.css variable.css
# ^^^ source.astro meta.scope.tag.style.astro meta.style.astro meta.embedded.block.astro source.css
> syntax: "<color>";
#^^^^^^^^^^^^^^^^^^^^^^^ source.astro meta.scope.tag.style.astro meta.style.astro meta.embedded.block.astro source.css
> inherits: false;
#^^^^^^^^^^^^^^^^^^^^^ source.astro meta.scope.tag.style.astro meta.style.astro meta.embedded.block.astro source.css
> initial-value: #c0ffee;
#^^^^^^^^^^^^^^^^^^^^^^^^^^^^ source.astro meta.scope.tag.style.astro meta.style.astro meta.embedded.block.astro source.css
> }
#^^^ source.astro meta.scope.tag.style.astro meta.style.astro meta.embedded.block.astro source.css
></style>
#^^ source.astro meta.scope.tag.style.astro meta.style.astro meta.tag.end.astro punctuation.definition.tag.begin.astro
# ^^^^^ source.astro meta.scope.tag.style.astro meta.style.astro meta.tag.end.astro entity.name.tag.astro
# ^ source.astro meta.scope.tag.style.astro meta.style.astro meta.tag.end.astro punctuation.definition.tag.end.astro
>
><style>
#^ source.astro meta.scope.tag.style.astro meta.style.astro meta.tag.start.astro punctuation.definition.tag.begin.astro
# ^^^^^ source.astro meta.scope.tag.style.astro meta.style.astro meta.tag.start.astro entity.name.tag.astro
# ^ source.astro meta.scope.tag.style.astro meta.style.astro meta.tag.start.astro punctuation.definition.tag.end.astro
> div {
#^^^^^^^^ source.astro meta.scope.tag.style.astro meta.style.astro meta.embedded.block.astro source.css
> background: red;
#^^^^^^^^^^^^^^^^^^^^^ source.astro meta.scope.tag.style.astro meta.style.astro meta.embedded.block.astro source.css
> }
#^^^^ source.astro meta.scope.tag.style.astro meta.style.astro meta.embedded.block.astro source.css
></style>
#^^ source.astro meta.scope.tag.style.astro meta.style.astro meta.tag.end.astro punctuation.definition.tag.begin.astro
# ^^^^^ source.astro meta.scope.tag.style.astro meta.style.astro meta.tag.end.astro entity.name.tag.astro
# ^ source.astro meta.scope.tag.style.astro meta.style.astro meta.tag.end.astro punctuation.definition.tag.end.astro
>
><script>
#^ source.astro meta.scope.tag.script.astro meta.script.astro meta.tag.start.astro punctuation.definition.tag.begin.astro
# ^^^^^^ source.astro meta.scope.tag.script.astro meta.script.astro meta.tag.start.astro entity.name.tag.astro
# ^ source.astro meta.scope.tag.script.astro meta.script.astro meta.tag.start.astro punctuation.definition.tag.end.astro
> console.log(window);
#^^^^^^^^^^^^^^^^^^^^^^^ source.astro meta.scope.tag.script.astro meta.script.astro meta.embedded.block.astro source.js
></script>
#^^ source.astro meta.scope.tag.script.astro meta.script.astro meta.tag.end.astro punctuation.definition.tag.begin.astro
# ^^^^^^ source.astro meta.scope.tag.script.astro meta.script.astro meta.tag.end.astro entity.name.tag.astro
# ^ source.astro meta.scope.tag.script.astro meta.script.astro meta.tag.end.astro punctuation.definition.tag.end.astro
>
Loading