Add support for @custom-variant

Author: thecrypticace

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

@@ -396,7 +396,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)/.test(
+        /Unknown at rule @(tailwind|apply|config|theme|plugin|source|utility|variant|custom-variant)/.test(
           diagnostic.message,
         )
       ) {

packages/tailwindcss-language-server/tests/completions/completions.test.js

@@ -477,15 +477,15 @@ withFixture('v4/basic', (c) => {
     expect(result.items.filter((item) => item.label.startsWith('--')).length).toBe(23)
   })
 
-  test.concurrent('@slot is suggeted inside @variant', async ({ expect }) => {
+  test.concurrent('@slot is suggeted inside @custom-variant', async ({ expect }) => {
     let result = await completion({
       lang: 'css',
       text: '@',
       position: { line: 0, character: 1 },
     })
 
     // Make sure `@slot` is NOT suggested by default
-    expect(result.items.length).toBe(10)
+    expect(result.items.length).toBe(11)
     expect(result.items).not.toEqual(
       expect.arrayContaining([
         expect.objectContaining({ kind: 14, label: '@slot', sortText: '-0000000' }),
@@ -494,12 +494,12 @@ withFixture('v4/basic', (c) => {
 
     result = await completion({
       lang: 'css',
-      text: '@variant foo {\n@',
+      text: '@custom-variant foo {\n@',
       position: { line: 1, character: 1 },
     })
 
     // Make sure `@slot` is suggested
-    expect(result.items.length).toBe(11)
+    expect(result.items.length).toBe(12)
     expect(result.items).toEqual(
       expect.arrayContaining([
         expect.objectContaining({ kind: 14, label: '@slot', sortText: '-0000000' }),

packages/tailwindcss-language-server/tests/fixtures/v4/invalid-import-order/tailwind.css

@@ -4,7 +4,7 @@
  * This is invalid in this position because some `@import`s are not at the top of the file.
  * We don't want project discovery to fail so we hoist them up and then warn in the console.
  */
-@variant dark (&:where(.dark, .dark *));
+@custom-variant dark (&:where(.dark, .dark *));
 
 @import './a.css';
 @import './b.css';

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

@@ -1275,6 +1275,66 @@ function provideVariantsDirectiveCompletions(
   )
 }
 
+function provideVariantDirectiveCompletions(
+  state: State,
+  document: TextDocument,
+  position: Position,
+): CompletionList {
+  if (!state.v4) return null
+  if (!isCssContext(state, document, position)) return null
+
+  let text = document.getText({
+    start: { line: position.line, character: 0 },
+    end: position,
+  })
+
+  let match = text.match(/^\s*@variant\s+(?<partial>[^}]*)$/i)
+  if (match === null) return null
+
+  let partial = match.groups.partial.trim()
+
+  // We only allow one variant `@variant` call
+  if (/\s/.test(partial)) return null
+
+  // We don't allow applying stacked variants so don't suggest them
+  if (/:/.test(partial)) return null
+
+  let possibleVariants = state.variants.flatMap((variant) => {
+    if (variant.values.length) {
+      return variant.values.map((value) =>
+        value === 'DEFAULT' ? variant.name : `${variant.name}${variant.hasDash ? '-' : ''}${value}`,
+      )
+    }
+
+    return [variant.name]
+  })
+
+  return withDefaults(
+    {
+      isIncomplete: false,
+      items: possibleVariants.map((variant, index, variants) => ({
+        label: variant,
+        kind: 21,
+        sortText: naturalExpand(index, variants.length),
+      })),
+    },
+    {
+      data: {
+        ...(state.completionItemData ?? {}),
+        _type: 'variant',
+      },
+      range: {
+        start: {
+          line: position.line,
+          character: position.character,
+        },
+        end: position,
+      },
+    },
+    state.editor.capabilities.itemDefaults,
+  )
+}
+
 function provideLayerDirectiveCompletions(
   state: State,
   document: TextDocument,
@@ -1423,6 +1483,8 @@ function provideCssDirectiveCompletions(
 
   if (match === null) return null
 
+  let isNested = isInsideNesting(document, position)
+
   let items: CompletionItem[] = []
 
   items.push({
@@ -1535,12 +1597,12 @@ function provideCssDirectiveCompletions(
     })
 
     items.push({
-      label: '@variant',
+      label: '@custom-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(
+        value: `Use the \`@custom-variant\` directive to define a custom variant or override an existing one.\n\n[Tailwind CSS Documentation](${docsUrl(
           state.version,
-          'functions-and-directives/#variant',
+          'functions-and-directives/#custom-variant',
         )})`,
       },
     })
@@ -1566,9 +1628,22 @@ function provideCssDirectiveCompletions(
         )})`,
       },
     })
+  }
 
-    // If we're inside an @variant directive, also add `@slot`
-    if (isInsideAtRule('variant', document, position)) {
+  if (state.v4 && isNested) {
+    items.push({
+      label: '@variant',
+      documentation: {
+        kind: 'markdown' as typeof MarkupKind.Markdown,
+        value: `Use the \`@variant\` directive to use a variant in CSS.\n\n[Tailwind CSS Documentation](${docsUrl(
+          state.version,
+          'functions-and-directives/variant',
+        )})`,
+      },
+    })
+
+    // If we're inside an @custom-variant directive, also add `@slot`
+    if (isInsideAtRule('custom-variant', document, position)) {
       items.push({
         label: '@slot',
         documentation: {
@@ -1611,20 +1686,29 @@ function provideCssDirectiveCompletions(
 }
 
 function isInsideAtRule(name: string, document: TextDocument, position: Position) {
-  // 1. Get all text up to the current position
   let text = document.getText({
     start: { line: 0, character: 0 },
     end: position,
   })
 
-  // 2. Find the last instance of the at-rule
+  // Find the last instance of the at-rule
   let block = text.lastIndexOf(`@${name}`)
   if (block === -1) return false
 
-  // 4. Count the number of open and close braces following the rule to determine if we're inside it
+  // Check if we're inside it by counting the number of still-open braces
   return braceLevel(text.slice(block)) > 0
 }
 
+function isInsideNesting(document: TextDocument, position: Position) {
+  let text = document.getText({
+    start: { line: 0, character: 0 },
+    end: position,
+  })
+
+  // Check if we're inside a rule by counting the number of still-open braces
+  return braceLevel(text) > 0
+}
+
 // Provide completions for directives that take file paths
 const PATTERN_AT_THEME = /@(?<directive>theme)\s+(?:(?<parts>[^{]+)\s$|$)/
 const PATTERN_IMPORT_THEME = /@(?<directive>import)\s*[^;]+?theme\((?:(?<parts>[^)]+)\s$|$)/
@@ -1874,6 +1958,7 @@ export async function doComplete(
     provideCssHelperCompletions(state, document, position) ||
     provideCssDirectiveCompletions(state, document, position) ||
     provideScreenDirectiveCompletions(state, document, position) ||
+    provideVariantDirectiveCompletions(state, document, position) ||
     provideVariantsDirectiveCompletions(state, document, position) ||
     provideTailwindDirectiveCompletions(state, document, position) ||
     provideLayerDirectiveCompletions(state, document, position) ||