Improve CSS completions (#1165)

- [x] Support property and variable completions inside `@utility`
(behave like a style rule)
- [x] Support style-rule like completions inside `@custom-variant`
- [x] Support style-rule like completions inside `@variant`
- [x] Make sure `@slot` isn't considered an unknown at-rule

Fixes #1146

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,9 @@ 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(/@variant(\s+[^{]+){/g, replaceWithStyleRule())
     .replace(/@layer(\s+[^{]{2,}){/g, replace(-3))
     .replace(/@reference\s*([^;]{2,})/g, '@import    $1')
     .replace(
@@ -401,7 +410,7 @@ async function validateTextDocument(textDocument: TextDocument): Promise<void> {
     .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,
         )
       ) {

packages/vscode-tailwindcss/CHANGELOG.md

@@ -6,6 +6,10 @@
 - 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))
 - Don't create v4 projects for CSS files that don't look like v4 configs [#1164](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1164)
+- 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