Make sure completions work when using prefixes in v4

Author: thecrypticace

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

@@ -1365,7 +1365,20 @@ function isAtRule(node: Node): node is AtRule {
 
 function getVariants(state: State): Array<Variant> {
   if (state.v4) {
-    return state.designSystem.getVariants()
+    let variants = Array.from(state.designSystem.getVariants())
+
+    let prefix = state.designSystem.theme.prefix ?? ''
+    if (prefix.length > 0) {
+      variants.unshift({
+        name: prefix,
+        values: [],
+        isArbitrary: false,
+        hasDash: true,
+        selectors: () => ['&'],
+      })
+    }
+
+    return variants
   }
 
   if (state.jitContext?.getVariants) {

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

@@ -72,6 +72,8 @@ export function completionsFromClassList(
   }
 
   if (state.v4) {
+    let prefix = state.designSystem.theme.prefix ?? ''
+
     let { variants: existingVariants, offset } = getVariantsFromClassName(state, partialClassName)
 
     if (
@@ -277,6 +279,35 @@ export function completionsFromClassList(
       }
     }
 
+    // TODO: This is a bit of a hack
+    if (prefix.length > 0) {
+      // No variants seen: suggest the prefix only
+      if (existingVariants.length === 0) {
+        items = items.slice(0, 1)
+
+        return withDefaults(
+          {
+            isIncomplete: false,
+            items,
+          },
+          {
+            data: {
+              ...(state.completionItemData ?? {}),
+              ...(important ? { important } : {}),
+              variants: existingVariants,
+            },
+            range: replacementRange,
+          },
+          state.editor.capabilities.itemDefaults,
+        )
+      }
+
+      // The first variant is not the prefix: don't suggest anything
+      if (existingVariants[0] !== prefix) {
+        return null
+      }
+    }
+
     return withDefaults(
       {
         isIncomplete: false,