Skip to content

Fix variable, comment, and at-rule highlighting in @theme #1409

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
wants to merge 7 commits into
base: main
Choose a base branch
from
+135 −21
Open

Fix variable, comment, and at-rule highlighting in @theme #1409

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
9eec87d
Add tests for comments inside `@theme`
thecrypticace Jun 10, 2025
e66d633
Fix comment highlighting
thecrypticace Jun 10, 2025
762a9d0
Highlight variables properly in `@theme`
thecrypticace Jun 10, 2025
b65a7ec
Add escapes
thecrypticace Jun 10, 2025
62aeb1e
Handle at-rules more properly inside `@theme`
thecrypticace Jun 10, 2025
9172597
Tweak CI job
thecrypticace Jun 13, 2025
2c90df3
Update changelog
thecrypticace Jun 13, 2025
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
2 changes: 1 addition & 1 deletion .github/workflows/ci.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ jobs:
- uses: actions/setup-node@v4
with:
cache: 'pnpm'
node-version: ${{ matrix.node-version }}
node-version: ${{ matrix.node }}

- name: Install dependencies
run: pnpm install
Expand Down
122 changes: 103 additions & 19 deletions packages/tailwindcss-language-syntax/tests/__snapshots__/syntax.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -733,7 +733,7 @@ exports[`@theme 1`] = `

--color: red;
^^^^^^^^^^^^^^^ 6: source.css.tailwind meta.at-rule.theme.body.tailwind
^^^^^^^ 1: meta.property-name.css
^^^^^^^ 1: variable.css
^ 1: punctuation.separator.key-value.css
^^^ 1: meta.property-value.css support.constant.color.w3c-standard-color-name.css
^ 1: punctuation.terminator.rule.css
Expand All @@ -750,7 +750,7 @@ exports[`@theme 1`] = `

--color: red;
^^^^^^^^^^^^^^^ 6: source.css.tailwind meta.at-rule.theme.body.tailwind
^^^^^^^ 1: meta.property-name.css
^^^^^^^ 1: variable.css
^ 1: punctuation.separator.key-value.css
^^^ 1: meta.property-value.css support.constant.color.w3c-standard-color-name.css
^ 1: punctuation.terminator.rule.css
Expand All @@ -767,7 +767,7 @@ exports[`@theme 1`] = `

--color: red;
^^^^^^^^^^^^^^^ 6: source.css.tailwind meta.at-rule.theme.body.tailwind
^^^^^^^ 1: meta.property-name.css
^^^^^^^ 1: variable.css
^ 1: punctuation.separator.key-value.css
^^^ 1: meta.property-value.css support.constant.color.w3c-standard-color-name.css
^ 1: punctuation.terminator.rule.css
Expand All @@ -788,7 +788,7 @@ exports[`@theme 1`] = `

--color: red;
^^^^^^^^^^^^^^^ 6: source.css.tailwind meta.at-rule.theme.body.tailwind
^^^^^^^ 1: meta.property-name.css
^^^^^^^ 1: variable.css
^ 1: punctuation.separator.key-value.css
^^^ 1: meta.property-value.css support.constant.color.w3c-standard-color-name.css
^ 1: punctuation.terminator.rule.css
Expand All @@ -807,21 +807,21 @@ exports[`@theme 1`] = `

--spacing: initial;
^^^^^^^^^^^^^^^^^^^^^ 6: source.css.tailwind meta.at-rule.theme.body.tailwind
^^^^^^^^^ 1: meta.property-name.css
^^^^^^^^^ 1: variable.css
^ 1: punctuation.separator.key-value.css
^^^^^^^ 1: meta.property-value.css support.constant.property-value.css
^ 1: punctuation.terminator.rule.css

--color-*: initial;
^^^^^^^^^^^^^^^^^^^^^ 7: source.css.tailwind meta.at-rule.theme.body.tailwind
^^^^^^^^ 1: meta.property-name.css
^^^^^^^^ 1: variable.css
^ 1: punctuation.separator.key-value.css
^^^^^^^ 1: meta.property-value.css support.constant.property-value.css
^ 1: punctuation.terminator.rule.css

--animate-pulse: 1s pulse infinite;
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 9: source.css.tailwind meta.at-rule.theme.body.tailwind
^^^^^^^^^^^^^^^ 1: meta.property-name.css
^^^^^^^^^^^^^^^ 1: variable.css
^ 1: punctuation.separator.key-value.css
^^^^^^^^^^^^^^^^^ 4: meta.property-value.css
^^ 2: constant.numeric.css
Expand All @@ -833,46 +833,130 @@ exports[`@theme 1`] = `
^ 1: source.css.tailwind meta.at-rule.theme.body.tailwind

@keyframes pulse {
^^^^^^^^^^^^^^^^^^^^^ 5: source.css.tailwind meta.at-rule.theme.body.tailwind
^^^^^^^^^ ^^^^^ 2: meta.property-name.css
^^^^^^^^^^^^^^^^^^^^ 7: source.css.tailwind meta.at-rule.theme.body.tailwind
^^^^^^^^^^^^^^^^ 4: meta.at-rule.keyframes.header.css
^^^^^^^^^^ 2: keyword.control.at-rule.keyframes.css
^ 1: punctuation.definition.keyword.css
^^^^^ 1: variable.parameter.keyframe-list.css
^ 1: meta.at-rule.keyframes.body.css punctuation.section.keyframes.begin.bracket.curly.css

0%,
^^^^^^^^ 1: source.css.tailwind meta.at-rule.theme.body.tailwind
^^^^^^^^ 3: source.css.tailwind meta.at-rule.theme.body.tailwind meta.at-rule.keyframes.body.css
^^ 1: entity.other.keyframe-offset.percentage.css

100% {
^^^^^^^^^^^ 1: source.css.tailwind meta.at-rule.theme.body.tailwind
^^^^^^^^^^ 4: source.css.tailwind meta.at-rule.theme.body.tailwind meta.at-rule.keyframes.body.css
^^^^ 1: entity.other.keyframe-offset.percentage.css
^ 1: meta.property-list.css punctuation.section.property-list.begin.bracket.curly.css

opacity: 0;
^^^^^^^^^^^^^^^^^ 6: source.css.tailwind meta.at-rule.theme.body.tailwind
^^^^^^^^^^^^^^^^^ 6: source.css.tailwind meta.at-rule.theme.body.tailwind meta.at-rule.keyframes.body.css meta.property-list.css
^^^^^^^ 1: meta.property-name.css support.type.property-name.css
^ 1: punctuation.separator.key-value.css
^ 1: meta.property-value.css constant.numeric.css
^ 1: punctuation.terminator.rule.css

}
^^^^^ 2: source.css.tailwind meta.at-rule.theme.body.tailwind
^ 1: punctuation.section.theme.end.bracket.curly.tailwind
^^^^^ 2: source.css.tailwind meta.at-rule.theme.body.tailwind meta.at-rule.keyframes.body.css meta.property-list.css
^ 1: punctuation.section.property-list.end.bracket.curly.css

50% {
^^^^^^^^^ 2: source.css.tailwind
^^^^^^^^^ 4: source.css.tailwind meta.at-rule.theme.body.tailwind meta.at-rule.keyframes.body.css
^^^ 1: entity.other.keyframe-offset.percentage.css
^ 1: meta.property-list.css punctuation.section.property-list.begin.bracket.curly.css

opacity: 1;
^^^^^^^^^^^^^^^^^ 6: source.css.tailwind meta.property-list.css
^^^^^^^^^^^^^^^^^ 6: source.css.tailwind meta.at-rule.theme.body.tailwind meta.at-rule.keyframes.body.css meta.property-list.css
^^^^^^^ 1: meta.property-name.css support.type.property-name.css
^ 1: punctuation.separator.key-value.css
^ 1: meta.property-value.css constant.numeric.css
^ 1: punctuation.terminator.rule.css

}
^^^^^ 2: source.css.tailwind meta.property-list.css
^^^^^ 2: source.css.tailwind meta.at-rule.theme.body.tailwind meta.at-rule.keyframes.body.css meta.property-list.css
^ 1: punctuation.section.property-list.end.bracket.curly.css

}
^^^^ 1: source.css.tailwind
^^^ 2: source.css.tailwind meta.at-rule.theme.body.tailwind meta.at-rule.keyframes.body.css
^ 1: punctuation.section.keyframes.end.bracket.curly.css

}
^ 1: source.css.tailwind meta.at-rule.theme.body.tailwind punctuation.section.theme.end.bracket.curly.tailwind


^ 1: source.css.tailwind

@theme {
^^^^^^^^ 4: source.css.tailwind
^^^^^^ 2: keyword.control.at-rule.theme.tailwind
^ 1: punctuation.definition.keyword.css
^ 1: meta.at-rule.theme.body.tailwind punctuation.section.theme.begin.bracket.curly.tailwind

/** Comment 0 */
^^^^^^^^^^^^^^^^^^ 4: source.css.tailwind meta.at-rule.theme.body.tailwind
^^^^^^^^^^^^^^^^ 3: comment.block.css
^^ 1: punctuation.definition.comment.begin.css
^^ 1: punctuation.definition.comment.end.css


^ 1: source.css.tailwind meta.at-rule.theme.body.tailwind

/** Comment 1 */
^^^^^^^^^^^^^^^^^^ 4: source.css.tailwind meta.at-rule.theme.body.tailwind
^^^^^^^^^^^^^^^^ 3: comment.block.css
^^ 1: punctuation.definition.comment.begin.css
^^ 1: punctuation.definition.comment.end.css

--color-1: red;
^^^^^^^^^^^^^^^^^ 6: source.css.tailwind meta.at-rule.theme.body.tailwind
^^^^^^^^^ 1: variable.css
^ 1: punctuation.separator.key-value.css
^^^ 1: meta.property-value.css support.constant.color.w3c-standard-color-name.css
^ 1: punctuation.terminator.rule.css


^ 1: source.css.tailwind meta.at-rule.theme.body.tailwind

/** Comment 2 */
^^^^^^^^^^^^^^^^^^ 4: source.css.tailwind meta.at-rule.theme.body.tailwind
^^^^^^^^^^^^^^^^ 3: comment.block.css
^^ 1: punctuation.definition.comment.begin.css
^^ 1: punctuation.definition.comment.end.css

--color-2: green;
^^^^^^^^^^^^^^^^^^^ 6: source.css.tailwind meta.at-rule.theme.body.tailwind
^^^^^^^^^ 1: variable.css
^ 1: punctuation.separator.key-value.css
^^^^^ 1: meta.property-value.css support.constant.color.w3c-standard-color-name.css
^ 1: punctuation.terminator.rule.css


^ 1: source.css.tailwind meta.at-rule.theme.body.tailwind

/** Comment 3 */
^^^^^^^^^^^^^^^^^^ 4: source.css.tailwind meta.at-rule.theme.body.tailwind
^^^^^^^^^^^^^^^^ 3: comment.block.css
^^ 1: punctuation.definition.comment.begin.css
^^ 1: punctuation.definition.comment.end.css

--color-2: blue;
^^^^^^^^^^^^^^^^^^ 6: source.css.tailwind meta.at-rule.theme.body.tailwind
^^^^^^^^^ 1: variable.css
^ 1: punctuation.separator.key-value.css
^^^^ 1: meta.property-value.css support.constant.color.w3c-standard-color-name.css
^ 1: punctuation.terminator.rule.css


^ 1: source.css.tailwind meta.at-rule.theme.body.tailwind

/** Comment 4 */
^^^^^^^^^^^^^^^^^^ 4: source.css.tailwind meta.at-rule.theme.body.tailwind
^^^^^^^^^^^^^^^^ 3: comment.block.css
^^ 1: punctuation.definition.comment.begin.css
^^ 1: punctuation.definition.comment.end.css

}
^^ 1: source.css.tailwind
^ 1: source.css.tailwind meta.at-rule.theme.body.tailwind punctuation.section.theme.end.bracket.curly.tailwind
"
`;

Expand Down
15 changes: 15 additions & 0 deletions packages/tailwindcss-language-syntax/tests/syntax.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,21 @@ test('@theme', async ({ expect }) => {
}
}
}

@theme {
/** Comment 0 */

/** Comment 1 */
--color-1: red;

/** Comment 2 */
--color-2: green;

/** Comment 3 */
--color-2: blue;

/** Comment 4 */
}
`)

expect(result.toString()).toMatchSnapshot()
Expand Down
4 changes: 3 additions & 1 deletion packages/vscode-tailwindcss/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,9 @@

## Prerelease

- Nothing yet!
- Highlight CSS variables correctly inside `@theme` ([#1409](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1409))
- Highlight comments inside `@theme` ([#1409](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1409))
- Highlight at-rules inside `@theme` ([#1409](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1409))

## 0.14.21

Expand Down
13 changes: 13 additions & 0 deletions packages/vscode-tailwindcss/syntaxes/at-rules.tmLanguage.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -494,6 +494,16 @@
"repository": {
"property-list": {
"patterns": [
{
"include": "source.css#comment-block"
},
{
"include": "source.css#escapes"
},
{
"match": "(?x) (?<![\\w-])\n--\n(?:[-a-zA-Z_] | [^\\x00-\\x7F]) # First letter\n(?:[-a-zA-Z0-9_] | [^\\x00-\\x7F] # Remainder of identifier\n |\\\\(?:[0-9a-fA-F]{1,6}|.)\n)*",
"name": "variable.css"
},
{
"begin": "(?<![-a-zA-Z])(?=[-a-zA-Z])",
"end": "$|(?![-a-zA-Z])",
Expand Down Expand Up @@ -530,6 +540,9 @@
{
"match": ";",
"name": "punctuation.terminator.rule.css"
},
{
"include": "source.css#at-rules"
}
]
},
Expand Down