From bfd115cc74b5b212a2706ce92db5adcec9dc180f Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Wed, 2 Jul 2025 19:18:51 -0400 Subject: [PATCH 1/4] Add failing test --- .../tests/__snapshots__/syntax.test.ts.snap | 32 +++++++++++++++++++ .../tests/syntax.test.ts | 5 +++ 2 files changed, 37 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 5db256a2..be29c0a8 100644 --- a/packages/tailwindcss-language-syntax/tests/__snapshots__/syntax.test.ts.snap +++ b/packages/tailwindcss-language-syntax/tests/__snapshots__/syntax.test.ts.snap @@ -1007,6 +1007,38 @@ 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 tab-* { +^^^^^^^^^^^^^^^^ 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 + + tab-size: --value(--tab-size); +^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 9: 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 + ^^^^^^^^^^^^^^^^^^^ 4: meta.property-value.css + ^^^^^^^ 1: support.function.value.tailwind + ^ 1: punctuation.section.function.begin.bracket.round.css + ^^^^^^^^^^ 1: variable.theme-namespace.css + ^ 1: punctuation.section.function.end.bracket.round.css + ^ 1: punctuation.terminator.rule.css + + font-size: 12px; +^^^^^^^^^^^^^^^^^^ 7: 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 + ^^^^ 2: meta.property-value.css constant.numeric.css + ^^ 1: keyword.other.unit.px.css + ^ 1: punctuation.terminator.rule.css + +} +^ 1: source.css.tailwind meta.at-rule.utility.body.tailwind punctuation.section.utility.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 20941760..bb7d62ee 100644 --- a/packages/tailwindcss-language-syntax/tests/syntax.test.ts +++ b/packages/tailwindcss-language-syntax/tests/syntax.test.ts @@ -181,6 +181,11 @@ test('@utility', async ({ expect }) => { @utility functional-* { width: calc(--value(number) * 1px); } + + @utility tab-* { + tab-size: --value(--tab-size); + font-size: 12px; + } `) expect(result.toString()).toMatchSnapshot() From 93b294f7cc84594f2a70116f2658da71c47b9b19 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Wed, 2 Jul 2025 19:19:18 -0400 Subject: [PATCH 2/4] Terminate variables inside utility helpers --- packages/vscode-tailwindcss/syntaxes/theme-fn.tmLanguage.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vscode-tailwindcss/syntaxes/theme-fn.tmLanguage.json b/packages/vscode-tailwindcss/syntaxes/theme-fn.tmLanguage.json index 0e02015f..04c573dd 100644 --- a/packages/vscode-tailwindcss/syntaxes/theme-fn.tmLanguage.json +++ b/packages/vscode-tailwindcss/syntaxes/theme-fn.tmLanguage.json @@ -147,7 +147,7 @@ "name": "punctuation.separator.list.comma.css" }, { - "match": "(--[^,\\s]+)", + "match": "(--[^,\\s)]+)", "name": "variable.theme-namespace.css" }, { "include": "#utility-data-type-bare" }, From 96edcd28f10647e19f10b2e699d6fb5f351fd894 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Wed, 2 Jul 2025 19:23:32 -0400 Subject: [PATCH 3/4] Add more tests --- .../tests/__snapshots__/syntax.test.ts.snap | 103 ++++++++++++++++++ .../tests/syntax.test.ts | 17 +++ 2 files changed, 120 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 be29c0a8..c85fd2fa 100644 --- a/packages/tailwindcss-language-syntax/tests/__snapshots__/syntax.test.ts.snap +++ b/packages/tailwindcss-language-syntax/tests/__snapshots__/syntax.test.ts.snap @@ -1009,6 +1009,38 @@ 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 tab-* { +^^^^^^^^^^^^^^^^ 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 + + tab-size: --value(--); +^^^^^^^^^^^^^^^^^^^^^^^^ 9: 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 + ^^^^^^^^^^^ 4: meta.property-value.css + ^^^^^^^ 1: support.function.value.tailwind + ^ 1: punctuation.section.function.begin.bracket.round.css + ^^ 1: variable.parameter.value.tailwind + ^ 1: punctuation.section.function.end.bracket.round.css + ^ 1: punctuation.terminator.rule.css + + font-size: 12px; +^^^^^^^^^^^^^^^^^^ 7: 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 + ^^^^ 2: meta.property-value.css constant.numeric.css + ^^ 1: keyword.other.unit.px.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 tab-* { @@ -1039,6 +1071,77 @@ 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 tab-* { +^^^^^^^^^^^^^^^^ 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 + + tab-size: --value(--tab-size-*); +^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 9: 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 + ^^^^^^^^^^^^^^^^^^^^^ 4: meta.property-value.css + ^^^^^^^ 1: support.function.value.tailwind + ^ 1: punctuation.section.function.begin.bracket.round.css + ^^^^^^^^^^^^ 1: variable.theme-namespace.css + ^ 1: punctuation.section.function.end.bracket.round.css + ^ 1: punctuation.terminator.rule.css + + font-size: 12px; +^^^^^^^^^^^^^^^^^^ 7: 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 + ^^^^ 2: meta.property-value.css constant.numeric.css + ^^ 1: keyword.other.unit.px.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 tab-* { +^^^^^^^^^^^^^^^^ 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 + + tab-size: --value(--tab-size-*); +^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 9: 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 + ^^^^^^^^^^^^^^^^^^^^^ 4: meta.property-value.css + ^^^^^^^ 1: support.function.value.tailwind + ^ 1: punctuation.section.function.begin.bracket.round.css + ^^^^^^^^^^^^ 1: variable.theme-namespace.css + ^ 1: punctuation.section.function.end.bracket.round.css + ^ 1: punctuation.terminator.rule.css + + font-size: 16px; +^^^^^^^^^^^^^^^^^^^^ 7: 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 + ^^^^ 2: meta.property-value.css constant.numeric.css + ^^ 1: keyword.other.unit.px.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 bb7d62ee..b107adb0 100644 --- a/packages/tailwindcss-language-syntax/tests/syntax.test.ts +++ b/packages/tailwindcss-language-syntax/tests/syntax.test.ts @@ -182,10 +182,27 @@ test('@utility', async ({ expect }) => { width: calc(--value(number) * 1px); } + @utility tab-* { + tab-size: --value(--); + font-size: 12px; + } + @utility tab-* { tab-size: --value(--tab-size); font-size: 12px; } + + @utility tab-* { + tab-size: --value(--tab-size-*); + font-size: 12px; + } + + @utility tab-* { + & { + tab-size: --value(--tab-size-*); + font-size: 16px; + } + } `) expect(result.toString()).toMatchSnapshot() From a2991c8189cbf4c2b133f152594867d87a8fd84e Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Wed, 2 Jul 2025 19:26:13 -0400 Subject: [PATCH 4/4] Drop test MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Nesting isn’t highlighted correctly yet so adding this test isn’t super useful --- .../tests/__snapshots__/syntax.test.ts.snap | 39 ------------------- .../tests/syntax.test.ts | 7 ---- 2 files changed, 46 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 c85fd2fa..27140aab 100644 --- a/packages/tailwindcss-language-syntax/tests/__snapshots__/syntax.test.ts.snap +++ b/packages/tailwindcss-language-syntax/tests/__snapshots__/syntax.test.ts.snap @@ -1103,45 +1103,6 @@ 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 tab-* { -^^^^^^^^^^^^^^^^ 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 - - tab-size: --value(--tab-size-*); -^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 9: 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 - ^^^^^^^^^^^^^^^^^^^^^ 4: meta.property-value.css - ^^^^^^^ 1: support.function.value.tailwind - ^ 1: punctuation.section.function.begin.bracket.round.css - ^^^^^^^^^^^^ 1: variable.theme-namespace.css - ^ 1: punctuation.section.function.end.bracket.round.css - ^ 1: punctuation.terminator.rule.css - - font-size: 16px; -^^^^^^^^^^^^^^^^^^^^ 7: 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 - ^^^^ 2: meta.property-value.css constant.numeric.css - ^^ 1: keyword.other.unit.px.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 b107adb0..a1d49d76 100644 --- a/packages/tailwindcss-language-syntax/tests/syntax.test.ts +++ b/packages/tailwindcss-language-syntax/tests/syntax.test.ts @@ -196,13 +196,6 @@ test('@utility', async ({ expect }) => { tab-size: --value(--tab-size-*); font-size: 12px; } - - @utility tab-* { - & { - tab-size: --value(--tab-size-*); - font-size: 16px; - } - } `) expect(result.toString()).toMatchSnapshot()