fix(autocomplete): optimize suggestions sort (#3054)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

packages/autocomplete/src/create.ts

@@ -192,10 +192,17 @@ export function createAutocomplete(uno: UnoGenerator, options: AutocompleteOptio
     return uniq(suggestions.flat())
       .filter((i): i is string => !!(i && !i.match(/-$/) && !uno.isBlocked(i)))
       .sort((a, b) => {
+        if (/\d/.test(a) && /\D/.test(b))
+          return 1
+
+        if (/\D/.test(a) && /\d/.test(b))
+          return -1
+
         const numA = +(a.match(/\d+$/)?.[0] || Number.NaN)
         const numB = +(b.match(/\d+$/)?.[0] || Number.NaN)
         if (!Number.isNaN(numA) && !Number.isNaN(numB))
           return numA - numB
+
         return a.localeCompare(b)
       })
       .map(i => prefix + i + suffix)

packages/autocomplete/src/parse.ts

@@ -87,7 +87,7 @@ export function parseAutocomplete(template: string, theme: any = {}, extraShorth
       (m) => {
         parts.push({
           type: 'group',
-          values: m[1].split('|').sort((a, b) => b.length - a.length),
+          values: m[1].split('|'),
         })
       },
       (str) => {

test/__snapshots__/autocomplete.test.ts.snap

@@ -2,6 +2,7 @@
 
 exports[`autocomplete > should accept variants 1`] = `
 [
+  "dark:md:m-xy",
   "dark:md:m-0",
   "dark:md:m-1",
   "dark:md:m-2",
@@ -14,50 +15,49 @@ exports[`autocomplete > should accept variants 1`] = `
   "dark:md:m-12",
   "dark:md:m-24",
   "dark:md:m-36",
-  "dark:md:m-xy",
 ]
 `;
 
 exports[`autocomplete > should provide autocomplete 1`] = `
 {
-  "align-": "align-10% align-100% align-20% align-30% align-40% align-50% align-60% align-70% align-80% align-90%",
+  "align-": "align-base align-baseline align-bottom align-btm align-end align-inherit align-initial align-mid align-middle align-revert",
   "aspect-": "aspect-ratio aspect-square aspect-video",
   "auto-flow-": "auto-flow-col auto-flow-col-dense auto-flow-dense auto-flow-row auto-flow-row-dense",
   "bg-": "bg-amber bg-auto bg-black bg-blend-color bg-blend-color-burn bg-blend-color-dodge bg-blend-darken bg-blend-difference bg-blend-exclusion bg-blend-hard-light",
   "bg-gradient-": "bg-gradient-conic bg-gradient-from bg-gradient-linear bg-gradient-radial bg-gradient-repeating bg-gradient-shape bg-gradient-to bg-gradient-via",
   "bg-r": "bg-red bg-repeat bg-repeat-inherit bg-repeat-initial bg-repeat-revert bg-repeat-revert-layer bg-repeat-round bg-repeat-space bg-repeat-unset bg-repeat-x",
   "border": "border border-collapse border-separate border-spacing border-style",
-  "border-": "border-0 border-1 border-2 border-3 border-4 border-5 border-6 border-8 border-10 border-12",
+  "border-": "border-amber border-b border-b-style border-black border-blue border-bluegray border-blueGray border-collapse border-coolgray border-coolGray",
   "border-r": "border-r border-r-style border-rd border-red border-revert border-revert-layer border-ridge border-rose border-rounded",
-  "border-spacing-": "border-spacing-2xl border-spacing-3xl border-spacing-4xl border-spacing-5xl border-spacing-6xl border-spacing-7xl border-spacing-8xl border-spacing-9xl border-spacing-lg border-spacing-none",
+  "border-spacing-": "border-spacing-lg border-spacing-none border-spacing-sm border-spacing-x border-spacing-xl border-spacing-xs border-spacing-y border-spacing-2xl border-spacing-3xl border-spacing-4xl",
   "columns-": "columns-0 columns-1 columns-2 columns-3 columns-4 columns-5 columns-6 columns-8 columns-10 columns-12",
   "divide-": "divide-amber divide-black divide-block divide-block-reverse divide-blue divide-bluegray divide-blueGray divide-coolgray divide-coolGray divide-current",
   "fill-": "fill-amber fill-black fill-blue fill-bluegray fill-blueGray fill-coolgray fill-coolGray fill-current fill-cyan fill-dark",
   "filter-": "filter-blur filter-drop filter-drop-shadow filter-drop-shadow-color filter-grayscale filter-inherit filter-initial filter-invert filter-none filter-revert",
-  "fle": "flex flex-1 flex-auto flex-col flex-col-reverse flex-content-around flex-content-between flex-content-center flex-content-end flex-content-evenly",
-  "font-": "font-100 font-200 font-300 font-400 font-500 font-600 font-700 font-800 font-900 font-black",
+  "fle": "flex flex-auto flex-col flex-col-reverse flex-content-around flex-content-between flex-content-center flex-content-end flex-content-evenly flex-content-inherit",
+  "font-": "font-black font-bold font-extrabold font-extralight font-italic font-light font-medium font-mono font-normal font-not-italic",
   "grid-auto-flow-": "grid-auto-flow-col grid-auto-flow-col-dense grid-auto-flow-dense grid-auto-flow-row grid-auto-flow-row-dense",
   "grid-auto-rows-": "grid-auto-rows-0 grid-auto-rows-1 grid-auto-rows-2 grid-auto-rows-3 grid-auto-rows-4 grid-auto-rows-5 grid-auto-rows-6 grid-auto-rows-8 grid-auto-rows-10 grid-auto-rows-12",
   "grid-flow-": "grid-flow-col grid-flow-col-dense grid-flow-dense grid-flow-row grid-flow-row-dense",
   "grid-row": "grid-rows-none",
   "grid-row-end-": "grid-row-end-0 grid-row-end-1 grid-row-end-2 grid-row-end-3 grid-row-end-4 grid-row-end-5 grid-row-end-6 grid-row-end-8 grid-row-end-10 grid-row-end-12",
   "grid-row-start-": "grid-row-start-0 grid-row-start-1 grid-row-start-2 grid-row-start-3 grid-row-start-4 grid-row-start-5 grid-row-start-6 grid-row-start-8 grid-row-start-10 grid-row-start-12",
-  "grid-rows-": "grid-rows-0 grid-rows-1 grid-rows-2 grid-rows-3 grid-rows-4 grid-rows-5 grid-rows-6 grid-rows-8 grid-rows-10 grid-rows-12",
+  "grid-rows-": "grid-rows-none grid-rows-0 grid-rows-1 grid-rows-2 grid-rows-3 grid-rows-4 grid-rows-5 grid-rows-6 grid-rows-8 grid-rows-10",
   "grow-": "grow-0 grow-1 grow-2 grow-3 grow-4 grow-5 grow-6 grow-8 grow-10 grow-12",
   "keyframes-": "keyframes-back-in-down keyframes-back-in-left keyframes-back-in-right keyframes-back-in-up keyframes-back-out-down keyframes-back-out-left keyframes-back-out-right keyframes-back-out-up keyframes-bounce keyframes-bounce-alt",
   "leading-": "leading-loose leading-none leading-normal leading-relaxed leading-snug leading-tight",
-  "line-clamp-": "line-clamp-0 line-clamp-1 line-clamp-2 line-clamp-3 line-clamp-4 line-clamp-5 line-clamp-6 line-clamp-8 line-clamp-10 line-clamp-12",
-  "m-": "m-0 m-1 m-2 m-3 m-4 m-5 m-6 m-8 m-10 m-12",
-  "max-w-": "max-w-2xl max-w-3xl max-w-4xl max-w-5xl max-w-6xl max-w-7xl max-w-auto max-w-full max-w-lg max-w-md",
+  "line-clamp-": "line-clamp-inherit line-clamp-initial line-clamp-none line-clamp-revert line-clamp-revert-layer line-clamp-unset line-clamp-0 line-clamp-1 line-clamp-2 line-clamp-3",
+  "m-": "m-xy m-0 m-1 m-2 m-3 m-4 m-5 m-6 m-8 m-10",
+  "max-w-": "max-w-auto max-w-full max-w-lg max-w-md max-w-none max-w-prose max-w-screen max-w-sm max-w-xl max-w-xs",
   "mx-": "mx-0 mx-1 mx-2 mx-3 mx-4 mx-5 mx-6 mx-8 mx-10 mx-12",
   "object-": "object-b object-bc object-bl object-bottom object-bottom-center object-bottom-left object-bottom-right object-br object-c object-cb",
   "origin-": "origin-b origin-bc origin-bl origin-bottom origin-bottom-center origin-bottom-left origin-bottom-right origin-br origin-c origin-cb",
   "outline-": "outline-amber outline-auto outline-black outline-blue outline-bluegray outline-blueGray outline-coolgray outline-coolGray outline-current outline-cyan",
   "outline-offset-": "outline-offset-0 outline-offset-1 outline-offset-2 outline-offset-3 outline-offset-4 outline-offset-5 outline-offset-6 outline-offset-8 outline-offset-10 outline-offset-12",
   "placeholder-": "placeholder-.dark: placeholder-.light: placeholder-@dark: placeholder-@hover: placeholder-@light: placeholder-absolute placeholder-active: placeholder-after: placeholder-animate-delay placeholder-animate-direction",
   "scroll-": "scroll-auto scroll-block scroll-inherit scroll-initial scroll-inline scroll-m scroll-ma scroll-p scroll-pa scroll-revert",
-  "scroll-m-": "scroll-m-2xl scroll-m-3xl scroll-m-4xl scroll-m-5xl scroll-m-6xl scroll-m-7xl scroll-m-8xl scroll-m-9xl scroll-m-b scroll-m-be",
-  "shadow-": "shadow-2xl shadow-amber shadow-black shadow-blue shadow-bluegray shadow-blueGray shadow-coolgray shadow-coolGray shadow-current shadow-cyan",
+  "scroll-m-": "scroll-m-b scroll-m-be scroll-m-bs scroll-m-ie scroll-m-is scroll-m-l scroll-m-lg scroll-m-none scroll-m-r scroll-m-sm",
+  "shadow-": "shadow-amber shadow-black shadow-blue shadow-bluegray shadow-blueGray shadow-coolgray shadow-coolGray shadow-current shadow-cyan shadow-dark",
   "space-": "space-block space-block-reverse space-inline space-inline-reverse space-x space-x-reverse space-y space-y-reverse",
   "text-r": "text-red text-revert text-revert-layer text-right text-rose",
   "text-red-": "text-red-1 text-red-2 text-red-3 text-red-4 text-red-5 text-red-6 text-red-7 text-red-8 text-red-9 text-red-50",
@@ -68,8 +68,8 @@ exports[`autocomplete > should provide autocomplete 1`] = `
   "transform-skew-x-": "transform-skew-x-0 transform-skew-x-10 transform-skew-x-20 transform-skew-x-30 transform-skew-x-40 transform-skew-x-50 transform-skew-x-60 transform-skew-x-70 transform-skew-x-80 transform-skew-x-90",
   "transform-skew-y-": "transform-skew-y-0 transform-skew-y-10 transform-skew-y-20 transform-skew-y-30 transform-skew-y-40 transform-skew-y-50 transform-skew-y-60 transform-skew-y-70 transform-skew-y-80 transform-skew-y-90",
   "transition-": "transition-all transition-colors transition-inherit transition-initial transition-none transition-opacity transition-revert transition-revert-layer transition-shadow transition-transform",
-  "v-": "v-10% v-100% v-20% v-30% v-40% v-50% v-60% v-70% v-80% v-90%",
-  "w-": "w-2xl w-3xl w-4xl w-5xl w-6xl w-7xl w-auto w-full w-lg w-md",
+  "v-": "v-base v-baseline v-bottom v-btm v-end v-inherit v-initial v-mid v-middle v-revert",
+  "w-": "w-auto w-full w-lg w-md w-none w-prose w-screen w-sm w-xl w-xs",
   "z-": "z-0 z-1 z-2 z-3 z-4 z-5 z-6 z-8 z-10 z-12",
 }
 `;

test/autocomplete-parse.test.ts

@@ -25,11 +25,11 @@ describe('autocomplete-parse', () => {
           {
             "type": "group",
             "values": [
+              "solid",
               "dashed",
               "dotted",
               "double",
               "hidden",
-              "solid",
               "none",
             ],
           },
@@ -53,11 +53,11 @@ describe('autocomplete-parse', () => {
     expect(parsed.suggest('prefix-border-'))
       .toMatchInlineSnapshot(`
         [
+          "prefix-border-solid",
           "prefix-border-dashed",
           "prefix-border-dotted",
           "prefix-border-double",
           "prefix-border-hidden",
-          "prefix-border-solid",
           "prefix-border-none",
         ]
       `)
@@ -67,10 +67,6 @@ describe('autocomplete-parse', () => {
     const parsed = parseAutocomplete('(m|p)<directions>-<num>')
     expect(parsed.suggest('pt-')).toMatchInlineSnapshot(`
       [
-        "pt-10",
-        "pt-12",
-        "pt-24",
-        "pt-36",
         "pt-0",
         "pt-1",
         "pt-2",
@@ -79,6 +75,10 @@ describe('autocomplete-parse', () => {
         "pt-5",
         "pt-6",
         "pt-8",
+        "pt-10",
+        "pt-12",
+        "pt-24",
+        "pt-36",
       ]
     `)
 
@@ -97,7 +97,6 @@ describe('autocomplete-parse', () => {
     const parsed3 = parseAutocomplete('w-<percentage>')
     expect(parsed3.suggest('w-')).toMatchInlineSnapshot(`
       [
-        "w-100%",
         "w-10%",
         "w-20%",
         "w-30%",
@@ -107,6 +106,7 @@ describe('autocomplete-parse', () => {
         "w-70%",
         "w-80%",
         "w-90%",
+        "w-100%",
       ]
     `)
   })

test/autocomplete.test.ts

@@ -136,11 +136,11 @@ describe('autocomplete', () => {
     expect(await ac.suggest('lt-'))
       .toMatchInlineSnapshot(`
         [
-          "lt-2xl:",
           "lt-lg:",
           "lt-md:",
           "lt-sm:",
           "lt-xl:",
+          "lt-2xl:",
         ]
       `)
   })
@@ -165,19 +165,19 @@ describe('autocomplete', () => {
     expect(replacement).toMatchInlineSnapshot(`
       {
         "end": 40,
-        "replacement": "b-0",
+        "replacement": "b-amber",
         "start": 38,
       }
     `)
 
     expect(fixture.slice(0, replacement.start) + replacement.replacement + fixture.slice(replacement.end))
       .toMatchInlineSnapshot(`
-      "
-      <div bg=\\"blue-500\\">
-        <div border=\\"~ b-0
-      </div>
-      "
-    `)
+        "
+        <div bg=\\"blue-500\\">
+          <div border=\\"~ b-amber
+        </div>
+        "
+      `)
   })
 
   it('should escape regex', async () => {