From 8582dc58e21cf394efc961a4642c763c0bf8350f Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Tue, 4 Feb 2025 12:08:36 -0500 Subject: [PATCH 1/5] Fix CSS completions inside `@utility` and `@custom-variant` --- .../tailwindcss-language-server/src/language/cssServer.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/tailwindcss-language-server/src/language/cssServer.ts b/packages/tailwindcss-language-server/src/language/cssServer.ts index a759a823..624c585d 100644 --- a/packages/tailwindcss-language-server/src/language/cssServer.ts +++ b/packages/tailwindcss-language-server/src/language/cssServer.ts @@ -334,6 +334,12 @@ function replace(delta = 0) { return `@media(${MEDIA_MARKER})${' '.repeat(p1.length + delta)}{` } } +function replaceWithStyleRule(delta = 0) { + return (_match: string, p1: string) => { + let spaces = ' '.repeat(p1.length + delta) + return `.foo${spaces}{` + } +} function createVirtualCssDocument(textDocument: TextDocument): TextDocument { let content = textDocument @@ -347,6 +353,8 @@ function createVirtualCssDocument(textDocument: TextDocument): TextDocument { .replace(/@screen(\s+[^{]+){/g, replace(-2)) .replace(/@variants(\s+[^{]+){/g, replace()) .replace(/@responsive(\s*){/g, replace()) + .replace(/@utility(\s+[^{]+){/g, replaceWithStyleRule()) + .replace(/@custom-variant(\s+[^{]+){/g, replaceWithStyleRule()) .replace(/@layer(\s+[^{]{2,}){/g, replace(-3)) .replace(/@reference\s*([^;]{2,})/g, '@import $1') .replace( From aa1f061ad72093dad5985d74eeffe0aeabbdc5ab Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Tue, 4 Feb 2025 12:08:47 -0500 Subject: [PATCH 2/5] =?UTF-8?q?Make=20sure=20`@slot`=20isn=E2=80=99t=20mar?= =?UTF-8?q?ked=20as=20an=20unknown=20at-rule?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/tailwindcss-language-server/src/language/cssServer.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/tailwindcss-language-server/src/language/cssServer.ts b/packages/tailwindcss-language-server/src/language/cssServer.ts index 624c585d..e1473f2a 100644 --- a/packages/tailwindcss-language-server/src/language/cssServer.ts +++ b/packages/tailwindcss-language-server/src/language/cssServer.ts @@ -409,7 +409,7 @@ async function validateTextDocument(textDocument: TextDocument): Promise { .filter((diagnostic) => { if ( diagnostic.code === 'unknownAtRules' && - /Unknown at rule @(tailwind|apply|config|theme|plugin|source|utility|variant|custom-variant)/.test( + /Unknown at rule @(tailwind|apply|config|theme|plugin|source|utility|variant|custom-variant|slot)/.test( diagnostic.message, ) ) { From 0ad53f5e81df8b1fd7f4bbfe39818a8a79ec7076 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Tue, 4 Feb 2025 15:26:00 -0500 Subject: [PATCH 3/5] Update changelog --- packages/vscode-tailwindcss/CHANGELOG.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/vscode-tailwindcss/CHANGELOG.md b/packages/vscode-tailwindcss/CHANGELOG.md index 4ee3bd7c..f68e55f6 100644 --- a/packages/vscode-tailwindcss/CHANGELOG.md +++ b/packages/vscode-tailwindcss/CHANGELOG.md @@ -5,6 +5,9 @@ - Allow v4.0 projects not installed with npm to use IntelliSense ([#1157](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1157)) - Ignore preprocessor files when looking for v4 configs ([#1159](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1159)) - Allow language service to be used in native ESM environments ([#1122](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1122)) +- Support property and variable completions inside `@utility` ([#1165](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1165)) +- Support style-rule like completions inside `@custom-variant` ([#1165](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1165)) +- Make sure `@slot` isn't considered an unknown at-rule ([#1165](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1165)) ## 0.14.2 From eae89f0913b95ac0de3c79dac58d1bd5aa6df37c Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Wed, 5 Feb 2025 08:52:46 -0500 Subject: [PATCH 4/5] Make `@variant` look like a style rule to the CSS language server --- packages/tailwindcss-language-server/src/language/cssServer.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/tailwindcss-language-server/src/language/cssServer.ts b/packages/tailwindcss-language-server/src/language/cssServer.ts index e1473f2a..7eda71cb 100644 --- a/packages/tailwindcss-language-server/src/language/cssServer.ts +++ b/packages/tailwindcss-language-server/src/language/cssServer.ts @@ -355,6 +355,7 @@ function createVirtualCssDocument(textDocument: TextDocument): TextDocument { .replace(/@responsive(\s*){/g, replace()) .replace(/@utility(\s+[^{]+){/g, replaceWithStyleRule()) .replace(/@custom-variant(\s+[^{]+){/g, replaceWithStyleRule()) + .replace(/@variant(\s+[^{]+){/g, replaceWithStyleRule()) .replace(/@layer(\s+[^{]{2,}){/g, replace(-3)) .replace(/@reference\s*([^;]{2,})/g, '@import $1') .replace( From 5d0d36309a62c9875ba8328d45fa7994619c8e38 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Wed, 5 Feb 2025 08:55:14 -0500 Subject: [PATCH 5/5] Update changelog --- packages/vscode-tailwindcss/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/vscode-tailwindcss/CHANGELOG.md b/packages/vscode-tailwindcss/CHANGELOG.md index f68e55f6..7bd24122 100644 --- a/packages/vscode-tailwindcss/CHANGELOG.md +++ b/packages/vscode-tailwindcss/CHANGELOG.md @@ -7,6 +7,7 @@ - Allow language service to be used in native ESM environments ([#1122](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1122)) - Support property and variable completions inside `@utility` ([#1165](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1165)) - Support style-rule like completions inside `@custom-variant` ([#1165](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1165)) +- Support style-rule like completions inside `@variant` ([#1165](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1165)) - Make sure `@slot` isn't considered an unknown at-rule ([#1165](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1165)) ## 0.14.2