From 383b628d74ded9f3adaf764d0c31518b59f1597d Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Wed, 26 Nov 2025 07:31:05 -0500 Subject: [PATCH 1/2] Add tests --- .../tests/__snapshots__/syntax.test.ts.snap | 46 +++++++++++++++++++ .../tests/syntax.test.ts | 10 ++++ 2 files changed, 56 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 27140aab..2e669fb1 100644 --- a/packages/tailwindcss-language-syntax/tests/__snapshots__/syntax.test.ts.snap +++ b/packages/tailwindcss-language-syntax/tests/__snapshots__/syntax.test.ts.snap @@ -1103,6 +1103,52 @@ exports[`@utility 1`] = ` } ^ 1: source.css.tailwind meta.at-rule.utility.body.tailwind punctuation.section.utility.end.bracket.curly.tailwind + + +^ 1: source.css.tailwind + +@utility foo { +^^^^^^^^^^^^^^ 6: source.css.tailwind +^^^^^^^^ 2: keyword.control.at-rule.utility.tailwind +^ 1: punctuation.definition.keyword.css + ^^^ 1: variable.parameter.utility.tailwind + ^ 1: meta.at-rule.utility.body.tailwind punctuation.section.utility.begin.bracket.curly.tailwind + + @apply flex; +^^^^^^^^^^^^^^ 5: source.css.tailwind meta.at-rule.utility.body.tailwind + ^^^^^ ^^^^ 2: meta.property-name.css + ^^^^ 1: support.type.property-name.css + ^ 1: punctuation.terminator.rule.css + +} +^ 1: source.css.tailwind meta.at-rule.utility.body.tailwind punctuation.section.utility.end.bracket.curly.tailwind + + +^ 1: source.css.tailwind + +@utility foo { +^^^^^^^^^^^^^^ 6: source.css.tailwind +^^^^^^^^ 2: keyword.control.at-rule.utility.tailwind +^ 1: punctuation.definition.keyword.css + ^^^ 1: variable.parameter.utility.tailwind + ^ 1: meta.at-rule.utility.body.tailwind punctuation.section.utility.begin.bracket.curly.tailwind + + & { +^^^^^^ 1: source.css.tailwind meta.at-rule.utility.body.tailwind + + color: red; +^^^^^^^^^^^^^^^ 6: source.css.tailwind meta.at-rule.utility.body.tailwind + ^^^^^ 1: meta.property-name.css support.type.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 + + } +^^^ 2: source.css.tailwind meta.at-rule.utility.body.tailwind + ^ 1: punctuation.section.utility.end.bracket.curly.tailwind + +} +^^ 1: source.css.tailwind " `; diff --git a/packages/tailwindcss-language-syntax/tests/syntax.test.ts b/packages/tailwindcss-language-syntax/tests/syntax.test.ts index a1d49d76..e36c81a9 100644 --- a/packages/tailwindcss-language-syntax/tests/syntax.test.ts +++ b/packages/tailwindcss-language-syntax/tests/syntax.test.ts @@ -196,6 +196,16 @@ test('@utility', async ({ expect }) => { tab-size: --value(--tab-size-*); font-size: 12px; } + + @utility foo { + @apply flex; + } + + @utility foo { + & { + color: red; + } + } `) expect(result.toString()).toMatchSnapshot() From 5ea44e2ac5dc3d384d71b43c282904023b92eb0c Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Wed, 26 Nov 2025 07:31:57 -0500 Subject: [PATCH 2/2] Fix at-rule syntax highlighting in `@utility` --- .../tests/__snapshots__/syntax.test.ts.snap | 5 +++-- .../vscode-tailwindcss/syntaxes/at-rules.tmLanguage.json | 2 +- 2 files changed, 4 insertions(+), 3 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 2e669fb1..e4386ccb 100644 --- a/packages/tailwindcss-language-syntax/tests/__snapshots__/syntax.test.ts.snap +++ b/packages/tailwindcss-language-syntax/tests/__snapshots__/syntax.test.ts.snap @@ -1116,8 +1116,9 @@ exports[`@utility 1`] = ` @apply flex; ^^^^^^^^^^^^^^ 5: source.css.tailwind meta.at-rule.utility.body.tailwind - ^^^^^ ^^^^ 2: meta.property-name.css - ^^^^ 1: support.type.property-name.css + ^^^^^^^^^^^^ 4: meta.at-rule.header.css + ^^^^^^ 2: keyword.control.at-rule.css + ^ 1: punctuation.definition.keyword.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 a029bd4c..fae53bbd 100644 --- a/packages/vscode-tailwindcss/syntaxes/at-rules.tmLanguage.json +++ b/packages/vscode-tailwindcss/syntaxes/at-rules.tmLanguage.json @@ -389,7 +389,7 @@ "name": "meta.at-rule.utility.body.tailwind", "patterns": [ { - "include": "source.css#rule-list-innards" + "include": "#property-list" } ] }