Add support for more CSS directive completions

wip

wpi

Author: thecrypticace

packages/tailwindcss-language-server/src/language/cssServer.ts

@@ -381,7 +381,7 @@ async function validateTextDocument(textDocument: TextDocument): Promise<void> {
     .filter((diagnostic) => {
       if (
         diagnostic.code === 'unknownAtRules' &&
-        /Unknown at rule @(tailwind|apply|config|theme|plugin|source)/.test(diagnostic.message)
+        /Unknown at rule @(tailwind|apply|config|theme|plugin|source|utility|variant)/.test(diagnostic.message)
       ) {
         return false
       }

packages/tailwindcss-language-service/src/completionProvider.ts

@@ -1485,7 +1485,7 @@ function provideCssDirectiveCompletions(
     })
   }
 
-  if (semver.gte(state.version, '4.0.0')) {
+  if (state.v4) {
     items.push({
       label: '@theme',
       documentation: {
@@ -1496,6 +1496,50 @@ function provideCssDirectiveCompletions(
         )})`,
       },
     })
+
+    items.push({
+      label: '@utility',
+      documentation: {
+        kind: 'markdown' as typeof MarkupKind.Markdown,
+        value: `Use the \`@utility\` directive to define a custom utility.\n\n[Tailwind CSS Documentation](${docsUrl(
+          state.version,
+          'functions-and-directives/#utility',
+        )})`,
+      },
+    })
+
+    items.push({
+      label: '@variant',
+      documentation: {
+        kind: 'markdown' as typeof MarkupKind.Markdown,
+        value: `Use the \`@variant\` directive to define a custom variant or override an existing one.\n\n[Tailwind CSS Documentation](${docsUrl(
+          state.version,
+          'functions-and-directives/#variant',
+        )})`,
+      },
+    })
+
+    items.push({
+      label: '@source',
+      documentation: {
+        kind: 'markdown' as typeof MarkupKind.Markdown,
+        value: `Use the \`@source\` directive to scan additional files for classes.\n\n[Tailwind CSS Documentation](${docsUrl(
+          state.version,
+          'functions-and-directives/#source',
+        )})`,
+      },
+    })
+
+    items.push({
+      label: '@plugin',
+      documentation: {
+        kind: 'markdown' as typeof MarkupKind.Markdown,
+        value: `Use the \`@plugin\` directive to include a JS plugin in your Tailwind CSS build.\n\n[Tailwind CSS Documentation](${docsUrl(
+          state.version,
+          'functions-and-directives/#source',
+        )})`,
+      },
+    })
   }
 
   return withDefaults(