v4: Show completions after any valid variant

We weren’t handling the case of arbitrary variants, variants with an arbitrary value, and variants with bare values. We have to compile a dummy class temporarily to determine whether or not the class is valid

Author: thecrypticace

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

@@ -1,5 +1,7 @@
-import { test } from 'vitest'
+import { test, expect, describe } from 'vitest'
 import { withFixture } from '../common'
+import { css, defineTest } from '../../src/testing'
+import { createClient } from '../utils/client'
 
 function buildCompletion(c) {
   return async function completion({
@@ -670,3 +672,92 @@ withFixture('v4/workspaces', (c) => {
     })
   })
 })
+
+defineTest({
+  name: 'v4: Completions show after a variant arbitrary value',
+  fs: {
+    'app.css': css`
+      @import 'tailwindcss';
+    `,
+  },
+  prepare: async ({ root }) => ({ client: await createClient({ root }) }),
+  handle: async ({ client }) => {
+    let document = await client.open({
+      lang: 'html',
+      text: '<div class="data-[foo]:">',
+    })
+
+    // <div class="data-[foo]:">
+    //                       ^
+    let completion = await document.completions({ line: 0, character: 23 })
+
+    expect(completion?.items.length).toBe(12289)
+  },
+})
+
+defineTest({
+  name: 'v4: Completions show after an arbitrary variant',
+  fs: {
+    'app.css': css`
+      @import 'tailwindcss';
+    `,
+  },
+  prepare: async ({ root }) => ({ client: await createClient({ root }) }),
+  handle: async ({ client }) => {
+    let document = await client.open({
+      lang: 'html',
+      text: '<div class="[&:hover]:">',
+    })
+
+    // <div class="[&:hover]:">
+    //                      ^
+    let completion = await document.completions({ line: 0, character: 22 })
+
+    expect(completion?.items.length).toBe(12289)
+  },
+})
+
+defineTest({
+  name: 'v4: Completions show after a variant with a bare value',
+  fs: {
+    'app.css': css`
+      @import 'tailwindcss';
+    `,
+  },
+  prepare: async ({ root }) => ({ client: await createClient({ root }) }),
+  handle: async ({ client }) => {
+    let document = await client.open({
+      lang: 'html',
+      text: '<div class="supports-not-hover:">',
+    })
+
+    // <div class="supports-not-hover:">
+    //                               ^
+    let completion = await document.completions({ line: 0, character: 31 })
+
+    expect(completion?.items.length).toBe(12289)
+  },
+})
+
+defineTest({
+  options: { only: true },
+  name: 'v4: Partial compound variants show completions',
+  fs: {
+    'app.css': css`
+      @import 'tailwindcss';
+    `,
+  },
+  prepare: async ({ root }) => ({ client: await createClient({ root }) }),
+  handle: async ({ client }) => {
+    let document = await client.open({
+      lang: 'html',
+      text: '<div class="not-supports-display:">',
+    })
+
+    // <div class="not-supports-display:">
+    //                                 ^
+    let completion = await document.completions({ line: 0, character: 33 })
+
+    expect(completion?.items.length).toBe(12289)
+  },
+})

packages/tailwindcss-language-service/src/util/getVariantsFromClassName.ts

@@ -29,6 +29,19 @@ export function getVariantsFromClassName(
 
     let className = `${part}${state.separator}[color:red]`
 
+    if (state.v4) {
+      // NOTE: This should never happen
+      if (!state.designSystem) return false
+
+      // We don't use `compile()` so there's no overhead from PostCSS
+      let compiled = state.designSystem.candidatesToCss([className])
+
+      // NOTE: This should never happen
+      if (compiled.length !== 1) return false
+
+      return compiled[0] !== null
+    }
+
     if (state.jit) {
       if ((part.includes('[') && part.endsWith(']')) || part.includes('/')) {
         return jit.generateRules(state, [className]).rules.length > 0