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..e4386ccb 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,53 @@ 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 + ^^^^^^^^^^^^ 4: meta.at-rule.header.css + ^^^^^^ 2: keyword.control.at-rule.css + ^ 1: punctuation.definition.keyword.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() 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" } ] }