From 9eec87d79be32b15da4bc639af5dbd314ca13e35 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Tue, 10 Jun 2025 10:13:19 -0400 Subject: [PATCH 1/7] Add tests for comments inside `@theme` --- .../tests/__snapshots__/syntax.test.ts.snap | 65 +++++++++++++++++++ .../tests/syntax.test.ts | 15 +++++ 2 files changed, 80 insertions(+) diff --git a/packages/tailwindcss-language-syntax/tests/__snapshots__/syntax.test.ts.snap b/packages/tailwindcss-language-syntax/tests/__snapshots__/syntax.test.ts.snap index 073bc3a8..3945d454 100644 --- a/packages/tailwindcss-language-syntax/tests/__snapshots__/syntax.test.ts.snap +++ b/packages/tailwindcss-language-syntax/tests/__snapshots__/syntax.test.ts.snap @@ -873,6 +873,71 @@ exports[`@theme 1`] = ` } ^^ 1: source.css.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 */ +^^^^^^^^^^^^^^^^^^^ 3: source.css.tailwind meta.at-rule.theme.body.tailwind + ^^^^^^^ 1: meta.property-name.css + + +^ 1: source.css.tailwind meta.at-rule.theme.body.tailwind + + /** Comment 1 */ +^^^^^^^^^^^^^^^^^^^ 3: source.css.tailwind meta.at-rule.theme.body.tailwind + ^^^^^^^ 1: meta.property-name.css + + --color-1: red; +^^^^^^^^^^^^^^^^^ 7: source.css.tailwind meta.at-rule.theme.body.tailwind + ^^^^^^^^ 1: meta.property-name.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 */ +^^^^^^^^^^^^^^^^^^^ 3: source.css.tailwind meta.at-rule.theme.body.tailwind + ^^^^^^^ 1: meta.property-name.css + + --color-2: green; +^^^^^^^^^^^^^^^^^^^ 7: source.css.tailwind meta.at-rule.theme.body.tailwind + ^^^^^^^^ 1: meta.property-name.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 */ +^^^^^^^^^^^^^^^^^^^ 3: source.css.tailwind meta.at-rule.theme.body.tailwind + ^^^^^^^ 1: meta.property-name.css + + --color-2: blue; +^^^^^^^^^^^^^^^^^^ 7: source.css.tailwind meta.at-rule.theme.body.tailwind + ^^^^^^^^ 1: meta.property-name.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 */ +^^^^^^^^^^^^^^^^^^^ 3: source.css.tailwind meta.at-rule.theme.body.tailwind + ^^^^^^^ 1: meta.property-name.css + +} +^ 1: source.css.tailwind meta.at-rule.theme.body.tailwind punctuation.section.theme.end.bracket.curly.tailwind " `; diff --git a/packages/tailwindcss-language-syntax/tests/syntax.test.ts b/packages/tailwindcss-language-syntax/tests/syntax.test.ts index fa68eab3..20941760 100644 --- a/packages/tailwindcss-language-syntax/tests/syntax.test.ts +++ b/packages/tailwindcss-language-syntax/tests/syntax.test.ts @@ -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() From e66d63334f7d5e87cf97a42688ec324ee48738ee Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Tue, 10 Jun 2025 10:16:36 -0400 Subject: [PATCH 2/7] Fix comment highlighting --- .../tests/__snapshots__/syntax.test.ts.snap | 30 ++++++++++++------- .../syntaxes/at-rules.tmLanguage.json | 3 ++ 2 files changed, 23 insertions(+), 10 deletions(-) diff --git a/packages/tailwindcss-language-syntax/tests/__snapshots__/syntax.test.ts.snap b/packages/tailwindcss-language-syntax/tests/__snapshots__/syntax.test.ts.snap index 3945d454..5a14e1a2 100644 --- a/packages/tailwindcss-language-syntax/tests/__snapshots__/syntax.test.ts.snap +++ b/packages/tailwindcss-language-syntax/tests/__snapshots__/syntax.test.ts.snap @@ -884,15 +884,19 @@ exports[`@theme 1`] = ` ^ 1: meta.at-rule.theme.body.tailwind punctuation.section.theme.begin.bracket.curly.tailwind /** Comment 0 */ -^^^^^^^^^^^^^^^^^^^ 3: source.css.tailwind meta.at-rule.theme.body.tailwind - ^^^^^^^ 1: meta.property-name.css +^^^^^^^^^^^^^^^^^^ 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 */ -^^^^^^^^^^^^^^^^^^^ 3: source.css.tailwind meta.at-rule.theme.body.tailwind - ^^^^^^^ 1: meta.property-name.css +^^^^^^^^^^^^^^^^^^ 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; ^^^^^^^^^^^^^^^^^ 7: source.css.tailwind meta.at-rule.theme.body.tailwind @@ -905,8 +909,10 @@ exports[`@theme 1`] = ` ^ 1: source.css.tailwind meta.at-rule.theme.body.tailwind /** Comment 2 */ -^^^^^^^^^^^^^^^^^^^ 3: source.css.tailwind meta.at-rule.theme.body.tailwind - ^^^^^^^ 1: meta.property-name.css +^^^^^^^^^^^^^^^^^^ 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; ^^^^^^^^^^^^^^^^^^^ 7: source.css.tailwind meta.at-rule.theme.body.tailwind @@ -919,8 +925,10 @@ exports[`@theme 1`] = ` ^ 1: source.css.tailwind meta.at-rule.theme.body.tailwind /** Comment 3 */ -^^^^^^^^^^^^^^^^^^^ 3: source.css.tailwind meta.at-rule.theme.body.tailwind - ^^^^^^^ 1: meta.property-name.css +^^^^^^^^^^^^^^^^^^ 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; ^^^^^^^^^^^^^^^^^^ 7: source.css.tailwind meta.at-rule.theme.body.tailwind @@ -933,8 +941,10 @@ exports[`@theme 1`] = ` ^ 1: source.css.tailwind meta.at-rule.theme.body.tailwind /** Comment 4 */ -^^^^^^^^^^^^^^^^^^^ 3: source.css.tailwind meta.at-rule.theme.body.tailwind - ^^^^^^^ 1: meta.property-name.css +^^^^^^^^^^^^^^^^^^ 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 punctuation.section.theme.end.bracket.curly.tailwind diff --git a/packages/vscode-tailwindcss/syntaxes/at-rules.tmLanguage.json b/packages/vscode-tailwindcss/syntaxes/at-rules.tmLanguage.json index 0e074444..53643d81 100644 --- a/packages/vscode-tailwindcss/syntaxes/at-rules.tmLanguage.json +++ b/packages/vscode-tailwindcss/syntaxes/at-rules.tmLanguage.json @@ -494,6 +494,9 @@ "repository": { "property-list": { "patterns": [ + { + "include": "source.css#comment-block" + }, { "begin": "(? Date: Tue, 10 Jun 2025 10:17:01 -0400 Subject: [PATCH 3/7] Highlight variables properly in `@theme` --- .../tests/__snapshots__/syntax.test.ts.snap | 26 +++++++++---------- .../syntaxes/at-rules.tmLanguage.json | 4 +++ 2 files changed, 17 insertions(+), 13 deletions(-) diff --git a/packages/tailwindcss-language-syntax/tests/__snapshots__/syntax.test.ts.snap b/packages/tailwindcss-language-syntax/tests/__snapshots__/syntax.test.ts.snap index 5a14e1a2..298a7f9d 100644 --- a/packages/tailwindcss-language-syntax/tests/__snapshots__/syntax.test.ts.snap +++ b/packages/tailwindcss-language-syntax/tests/__snapshots__/syntax.test.ts.snap @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -899,8 +899,8 @@ exports[`@theme 1`] = ` ^^ 1: punctuation.definition.comment.end.css --color-1: red; -^^^^^^^^^^^^^^^^^ 7: source.css.tailwind meta.at-rule.theme.body.tailwind - ^^^^^^^^ 1: meta.property-name.css +^^^^^^^^^^^^^^^^^ 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 @@ -915,8 +915,8 @@ exports[`@theme 1`] = ` ^^ 1: punctuation.definition.comment.end.css --color-2: green; -^^^^^^^^^^^^^^^^^^^ 7: source.css.tailwind meta.at-rule.theme.body.tailwind - ^^^^^^^^ 1: meta.property-name.css +^^^^^^^^^^^^^^^^^^^ 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 @@ -931,8 +931,8 @@ exports[`@theme 1`] = ` ^^ 1: punctuation.definition.comment.end.css --color-2: blue; -^^^^^^^^^^^^^^^^^^ 7: source.css.tailwind meta.at-rule.theme.body.tailwind - ^^^^^^^^ 1: meta.property-name.css +^^^^^^^^^^^^^^^^^^ 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 diff --git a/packages/vscode-tailwindcss/syntaxes/at-rules.tmLanguage.json b/packages/vscode-tailwindcss/syntaxes/at-rules.tmLanguage.json index 53643d81..6689f6be 100644 --- a/packages/vscode-tailwindcss/syntaxes/at-rules.tmLanguage.json +++ b/packages/vscode-tailwindcss/syntaxes/at-rules.tmLanguage.json @@ -497,6 +497,10 @@ { "include": "source.css#comment-block" }, + { + "match": "(?x) (? Date: Tue, 10 Jun 2025 10:18:48 -0400 Subject: [PATCH 4/7] Add escapes --- packages/vscode-tailwindcss/syntaxes/at-rules.tmLanguage.json | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/vscode-tailwindcss/syntaxes/at-rules.tmLanguage.json b/packages/vscode-tailwindcss/syntaxes/at-rules.tmLanguage.json index 6689f6be..319555bb 100644 --- a/packages/vscode-tailwindcss/syntaxes/at-rules.tmLanguage.json +++ b/packages/vscode-tailwindcss/syntaxes/at-rules.tmLanguage.json @@ -497,6 +497,9 @@ { "include": "source.css#comment-block" }, + { + "include": "source.css#escapes" + }, { "match": "(?x) (? Date: Tue, 10 Jun 2025 10:25:25 -0400 Subject: [PATCH 5/7] Handle at-rules more properly inside `@theme` --- .../tests/__snapshots__/syntax.test.ts.snap | 33 ++++++++++++------- .../syntaxes/at-rules.tmLanguage.json | 3 ++ 2 files changed, 24 insertions(+), 12 deletions(-) diff --git a/packages/tailwindcss-language-syntax/tests/__snapshots__/syntax.test.ts.snap b/packages/tailwindcss-language-syntax/tests/__snapshots__/syntax.test.ts.snap index 298a7f9d..5db256a2 100644 --- a/packages/tailwindcss-language-syntax/tests/__snapshots__/syntax.test.ts.snap +++ b/packages/tailwindcss-language-syntax/tests/__snapshots__/syntax.test.ts.snap @@ -833,46 +833,55 @@ 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 +^ 1: source.css.tailwind meta.at-rule.theme.body.tailwind punctuation.section.theme.end.bracket.curly.tailwind ^ 1: source.css.tailwind diff --git a/packages/vscode-tailwindcss/syntaxes/at-rules.tmLanguage.json b/packages/vscode-tailwindcss/syntaxes/at-rules.tmLanguage.json index 319555bb..a029bd4c 100644 --- a/packages/vscode-tailwindcss/syntaxes/at-rules.tmLanguage.json +++ b/packages/vscode-tailwindcss/syntaxes/at-rules.tmLanguage.json @@ -540,6 +540,9 @@ { "match": ";", "name": "punctuation.terminator.rule.css" + }, + { + "include": "source.css#at-rules" } ] }, From 9172597675d4aca11e0f29b734a53dbf7f72efd7 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Fri, 13 Jun 2025 11:06:57 -0400 Subject: [PATCH 6/7] Tweak CI job MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 🤦‍♂️ --- .github/workflows/ci.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 9ef3526d..a01f382e 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -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 From 2c90df3ec0a19151ed304877e74ae9ae75f3f221 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Fri, 13 Jun 2025 11:11:14 -0400 Subject: [PATCH 7/7] Update changelog --- packages/vscode-tailwindcss/CHANGELOG.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/vscode-tailwindcss/CHANGELOG.md b/packages/vscode-tailwindcss/CHANGELOG.md index 94971656..b481c4c1 100644 --- a/packages/vscode-tailwindcss/CHANGELOG.md +++ b/packages/vscode-tailwindcss/CHANGELOG.md @@ -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