wip

Author: bradlc

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

@@ -569,7 +569,7 @@ function provideCssHelperCompletions(
   }
 
   let obj: any
-  let offset: number = 0
+  let offset: number = keys[keys.length - 1].length
   let separator: string = separators.length ? separators[separators.length - 1] : null
 
   if (keys.length === 1) {
@@ -588,6 +588,14 @@ function provideCssHelperCompletions(
 
   if (!obj) return null
 
+  let editRange = {
+    start: {
+      line: position.line,
+      character: position.character - offset,
+    },
+    end: position,
+  }
+
   return {
     isIncomplete: false,
     items: Object.keys(obj).map((item, index) => {
@@ -600,8 +608,8 @@ function provideCssHelperCompletions(
 
       return {
         label: item,
-        filterText: `${replaceDot ? '.' : ''}${item}`,
         sortText: naturalExpand(index),
+        commitCharacters: [!item.includes('.') && '.', !item.includes('[') && '['].filter(Boolean),
         kind: color ? 16 : isObject(obj[item]) ? 9 : 10,
         // VS Code bug causes some values to not display in some cases
         detail: detail === '0' || detail === 'transparent' ? `${detail} ` : detail,
@@ -610,16 +618,23 @@ function provideCssHelperCompletions(
             ? culori.formatRgb(color)
             : null,
         textEdit: {
-          newText: `${replaceDot ? '[' : ''}${item}${insertClosingBrace ? ']' : ''}`,
-          range: {
-            start: {
-              line: position.line,
-              character:
-                position.character - keys[keys.length - 1].length - (replaceDot ? 1 : 0) - offset,
-            },
-            end: position,
-          },
+          newText: `${item}${insertClosingBrace ? ']' : ''}`,
+          range: editRange,
         },
+        additionalTextEdits: replaceDot
+          ? [
+              {
+                newText: '[',
+                range: {
+                  start: {
+                    ...editRange.start,
+                    character: editRange.start.character - 1,
+                  },
+                  end: editRange.start,
+                },
+              },
+            ]
+          : [],
         data: 'helper',
       }
     }),

packages/vscode-tailwindcss/src/extension.ts

@@ -378,7 +378,11 @@ export async function activate(context: ExtensionContext) {
         async resolveCompletionItem(item, token, next) {
           let result = await next(item, token)
           let selections = Window.activeTextEditor.selections
-          if (selections.length > 1 && result.additionalTextEdits?.length > 0) {
+          if (
+            result['data'] === 'variant' &&
+            selections.length > 1 &&
+            result.additionalTextEdits?.length > 0
+          ) {
             let length =
               selections[0].start.character - result.additionalTextEdits[0].range.start.character
             let prefixLength =