fix(vscode): attributify auto complete (#2661)

unocss · May 24, 2023 · 113ba40 · 113ba40
1 parent 4165995
commit 113ba40
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 21 deletions.
diff --git a/packages/preset-attributify/src/autocomplete.ts b/packages/preset-attributify/src/autocomplete.ts
@@ -54,15 +54,10 @@ export function autocompleteExtractorAttributify(options?: AttributifyOptions):
       if (attrValues === undefined) {
         return {
           extracted: attrNameWithoutPrefix,
-          transformSuggestions(suggestion) {
-            if (hasPrefix)
-              return suggestion.map(s => options.prefix! + s)
-            else
-              return suggestion
-          },
           resolveReplacement(suggestion) {
+            const startOffset = hasPrefix ? options.prefix!.length : 0
             return {
-              start: attrsPos,
+              start: attrsPos + startOffset,
               end: attrsPos + attrName!.length,
               replacement: suggestion,
             }

diff --git a/packages/vscode/src/autocomplete.ts b/packages/vscode/src/autocomplete.ts
@@ -36,10 +36,12 @@ const delimiters = ['-', ':']
 
 class UnoCompletionItem extends CompletionItem {
   uno: UnoGenerator
+  value: string
 
-  constructor(label: string, kind: CompletionItemKind, uno: UnoGenerator) {
+  constructor(label: string, kind: CompletionItemKind, value: string, uno: UnoGenerator) {
     super(label, kind)
     this.uno = uno
+    this.value = value
   }
 }
 
@@ -119,7 +121,7 @@ export async function registerAutoComplete(
           const css = await getCSS(ctx!.uno, value)
           const colorString = getColorString(css)
           const itemKind = colorString ? CompletionItemKind.Color : CompletionItemKind.EnumMember
-          const item = new UnoCompletionItem(value, itemKind, ctx!.uno)
+          const item = new UnoCompletionItem(label, itemKind, value, ctx!.uno)
           const resolved = result.resolveReplacement(value)
 
           item.insertText = resolved.replacement
@@ -143,9 +145,9 @@ export async function registerAutoComplete(
 
     async resolveCompletionItem(item) {
       if (item.kind === CompletionItemKind.Color)
-        item.detail = await (await getPrettiedCSS(item.uno, item.label as string)).prettified
+        item.detail = await (await getPrettiedCSS(item.uno, item.value)).prettified
       else
-        item.documentation = await getMarkdown(item.uno, item.label as string)
+        item.documentation = await getMarkdown(item.uno, item.value)
       return item
     },
   }

diff --git a/playground/src/composables/uno.ts b/playground/src/composables/uno.ts
@@ -39,9 +39,10 @@ export async function getHint(context: CompletionContext): Promise<CompletionRes
   const resolved = result.resolveReplacement(result.suggestions[0][0])
   return {
     from: resolved.start,
-    options: result.suggestions.map(([, label]) => {
+    options: result.suggestions.map(([value, label]) => {
       return ({
         label,
+        apply: value,
         type: 'text',
         boost: 99,
       })

diff --git a/test/preset-attributify.test.ts b/test/preset-attributify.test.ts
@@ -121,25 +121,18 @@ describe('attributify', async () => {
       expect(res1).not.toBeNull()
 
       expect(res1!.extracted).toMatchInlineSnapshot('"text-cent"')
-      expect(res1!.transformSuggestions!([`${res1!.extracted}1`, `${res1!.extracted}2`]))
-        .toMatchInlineSnapshot(`
-          [
-            "un-text-cent1",
-            "un-text-cent2",
-          ]
-        `)
 
       const reversed1 = res1!.resolveReplacement(`${res1!.extracted}1`)
       expect(reversed1).toMatchInlineSnapshot(`
         {
           "end": 18,
           "replacement": "text-cent1",
-          "start": 6,
+          "start": 9,
         }
       `)
 
       expect(fixtureWithPrefix.slice(reversed1.start, reversed1.end))
-        .toMatchInlineSnapshot('"un-text-cent"')
+        .toMatchInlineSnapshot('"text-cent"')
 
       const res2 = await autocompleteExtractorAttributify({ prefix: 'un-' }).extract({
         content: fixtureWithPrefix,