Add support for @custom-variant

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(7)
     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(4)
     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,
@@ -1293,10 +1353,16 @@ function provideLayerDirectiveCompletions(
 
   if (match === null) return null
 
+  let layerNames = ['base', 'components', 'utilities']
+
+  if (state.v4) {
+    layerNames = ['theme', 'base', 'components', 'utilities']
+  }
+
   return withDefaults(
     {
       isIncomplete: false,
-      items: ['base', 'components', 'utilities'].map((layer, index, layers) => ({
+      items: layerNames.map((layer, index, layers) => ({
         label: layer,
         kind: 21,
         sortText: naturalExpand(index, layers.length),
@@ -1423,42 +1489,53 @@ function provideCssDirectiveCompletions(
 
   if (match === null) return null
 
+  let isNested = isInsideNesting(document, position)
+
   let items: CompletionItem[] = []
 
-  items.push({
-    label: '@tailwind',
-    documentation: {
-      kind: 'markdown' as typeof MarkupKind.Markdown,
-      value: `Use the \`@tailwind\` directive to insert Tailwind’s \`base\`, \`components\`, \`utilities\` and \`${
-        state.jit && semver.gte(state.version, '2.1.99') ? 'variants' : 'screens'
-      }\` styles into your CSS.\n\n[Tailwind CSS Documentation](${docsUrl(
-        state.version,
-        'functions-and-directives/#tailwind',
-      )})`,
-    },
-  })
+  if (state.v4) {
+    // We don't suggest @tailwind anymore in v4 because we prefer that people
+    // use the imports instead
+  } else {
+    items.push({
+      label: '@tailwind',
+      documentation: {
+        kind: 'markdown' as typeof MarkupKind.Markdown,
+        value: `Use the \`@tailwind\` directive to insert Tailwind’s \`base\`, \`components\`, \`utilities\` and \`${
+          state.jit && semver.gte(state.version, '2.1.99') ? 'variants' : 'screens'
+        }\` styles into your CSS.\n\n[Tailwind CSS Documentation](${docsUrl(
+          state.version,
+          'functions-and-directives/#tailwind',
+        )})`,
+      },
+    })
+  }
 
-  items.push({
-    label: '@screen',
-    documentation: {
-      kind: 'markdown' as typeof MarkupKind.Markdown,
-      value: `The \`@screen\` directive allows you to create media queries that reference your breakpoints by name instead of duplicating their values in your own CSS.\n\n[Tailwind CSS Documentation](${docsUrl(
-        state.version,
-        'functions-and-directives/#screen',
-      )})`,
-    },
-  })
+  if (!state.v4) {
+    items.push({
+      label: '@screen',
+      documentation: {
+        kind: 'markdown' as typeof MarkupKind.Markdown,
+        value: `The \`@screen\` directive allows you to create media queries that reference your breakpoints by name instead of duplicating their values in your own CSS.\n\n[Tailwind CSS Documentation](${docsUrl(
+          state.version,
+          'functions-and-directives/#screen',
+        )})`,
+      },
+    })
+  }
 
-  items.push({
-    label: '@apply',
-    documentation: {
-      kind: 'markdown' as typeof MarkupKind.Markdown,
-      value: `Use \`@apply\` to inline any existing utility classes into your own custom CSS.\n\n[Tailwind CSS Documentation](${docsUrl(
-        state.version,
-        'functions-and-directives/#apply',
-      )})`,
-    },
-  })
+  if (isNested) {
+    items.push({
+      label: '@apply',
+      documentation: {
+        kind: 'markdown' as typeof MarkupKind.Markdown,
+        value: `Use \`@apply\` to inline any existing utility classes into your own custom CSS.\n\n[Tailwind CSS Documentation](${docsUrl(
+          state.version,
+          'functions-and-directives/#apply',
+        )})`,
+      },
+    })
+  }
 
   if (semver.gte(state.version, '1.8.0')) {
     items.push({
@@ -1498,7 +1575,7 @@ function provideCssDirectiveCompletions(
     })
   }
 
-  if (semver.gte(state.version, '3.2.0')) {
+  if (semver.gte(state.version, '3.2.0') && !isNested) {
     items.push({
       label: '@config',
       documentation: {
@@ -1511,7 +1588,7 @@ function provideCssDirectiveCompletions(
     })
   }
 
-  if (state.v4) {
+  if (state.v4 && !isNested) {
     items.push({
       label: '@theme',
       documentation: {
@@ -1535,12 +1612,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 +1643,22 @@ function provideCssDirectiveCompletions(
         )})`,
       },
     })
+  }
+
+  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 @variant directive, also add `@slot`
-    if (isInsideAtRule('variant', document, position)) {
+    // If we're inside an @custom-variant directive, also add `@slot`
+    if (isInsideAtRule('custom-variant', document, position)) {
       items.push({
         label: '@slot',
         documentation: {
@@ -1611,20 +1701,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 +1973,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) ||

packages/vscode-tailwindcss/CHANGELOG.md

@@ -5,6 +5,9 @@
 - Don't break when importing missing CSS files ([#1106](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1106))
 - Resolve CSS imports as relative first ([#1106](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1106))
 - Add TypeScript config path support in v4 CSS files ([#1106](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1106))
+- Add support for `@custom-variant` ([#1127](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1127))
+- Add variant suggestions to `@variant` ([#1127](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1127))
+- Don't suggest at-rules when nested that cannot be used in a nested context ([#1127](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1127))
 
 ## 0.12.18