feat(preset-mini): add vertical align number/percentage support (#3037)

Co-authored-by: Chris <1633711653@qq.com>
Co-authored-by: chris <chriszhub@wicresoft.com>
Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

packages/autocomplete/src/parse.ts

@@ -4,9 +4,10 @@ import type { AutoCompleteMatchType, AutocompleteTemplatePart, ParsedAutocomplet
 import { cartesian } from './utils'
 
 export const shorthands: Record<string, string> = {
-  num: `(${[0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 24, 36].join('|')})`,
-  percent: `(${Array.from({ length: 11 }, (_, i) => i * 10).join('|')})`,
   directions: '(x|y|t|b|l|r|s|e)',
+  num: `(${[0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 24, 36].join('|')})`,
+  percent: `(${[0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100].join('|')})`,
+  percentage: `(${['10%', '20%', '30%', '40%', '50%', '60%', '70%', '80%', '90%', '100%'].join('|')})`,
 }
 
 export const ignoredThemeKeys = ['DEFAULT']

packages/core/src/utils/escape.ts

@@ -25,6 +25,12 @@ export function escapeSelector(str: string): string {
       continue
     }
 
+    // Percentage
+    if (codeUnit === 37) {
+      result += '\\%'
+      continue
+    }
+
     // Comma
     if (codeUnit === 44) {
       result += '\\,'

packages/preset-mini/src/_rules/align.ts

@@ -19,7 +19,12 @@ const verticalAlignAlias: Record<string, string> = {
 }
 
 export const verticalAligns: Rule[] = [
-  [/^(?:vertical|align|v)-([-\w]+)$/, ([, v]) => ({ 'vertical-align': verticalAlignAlias[v] }), { autocomplete: `(vertical|align|v)-(${Object.keys(verticalAlignAlias).join('|')})` }],
+  [/^(?:vertical|align|v)-([-\w]+%?)$/, ([, v]) => ({ 'vertical-align': verticalAlignAlias[v] ?? v }), {
+    autocomplete: [
+      `(vertical|align|v)-(${Object.keys(verticalAlignAlias).join('|')})`,
+      '(vertical|align|v)-<percentage>',
+    ],
+  }],
 ]
 
 export const textAligns: Rule[] = ['center', 'left', 'right', 'justify', 'start', 'end'].map(v => [`text-${v}`, { 'text-align': v }])

playground/src/components.d.ts

@@ -7,7 +7,10 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    Analyzer: typeof import('./../../packages/inspector/client/components/Analyzer.vue')['default']
+    AnalyzerItem: typeof import('./../../packages/inspector/client/components/AnalyzerItem.vue')['default']
     CodeMirror: typeof import('./../../packages/inspector/client/components/CodeMirror.vue')['default']
+    Copy: typeof import('./../../packages/inspector/client/components/Copy.vue')['default']
     Editor: typeof import('./components/Editor.vue')['default']
     FileIcon: typeof import('./../../packages/inspector/client/components/FileIcon.vue')['default']
     HeaderBar: typeof import('./components/HeaderBar.vue')['default']
@@ -16,6 +19,7 @@ declare module 'vue' {
     ModuleTreeNode: typeof import('./../../packages/inspector/client/components/ModuleTreeNode.vue')['default']
     NarBar: typeof import('./../../packages/inspector/client/components/NarBar.vue')['default']
     Overview: typeof import('./../../packages/inspector/client/components/Overview.vue')['default']
+    OverviewTabs: typeof import('./../../packages/inspector/client/components/OverviewTabs.vue')['default']
     PanelConfig: typeof import('./components/panel/PanelConfig.vue')['default']
     PanelCustomCss: typeof import('./components/panel/PanelCustomCss.vue')['default']
     PanelHtml: typeof import('./components/panel/PanelHtml.vue')['default']
@@ -27,6 +31,7 @@ declare module 'vue' {
     RouterView: typeof import('vue-router')['RouterView']
     Sidebar: typeof import('./../../packages/inspector/client/components/Sidebar.vue')['default']
     StatusBar: typeof import('./../../packages/inspector/client/components/StatusBar.vue')['default']
+    Tabs: typeof import('./../../packages/inspector/client/components/Tabs.vue')['default']
     TitleBar: typeof import('./../../packages/inspector/client/components/TitleBar.vue')['default']
   }
 }

test/__snapshots__/autocomplete.test.ts.snap

@@ -20,7 +20,7 @@ exports[`autocomplete > should accept variants 1`] = `
 
 exports[`autocomplete > should provide autocomplete 1`] = `
 {
-  "align-": "align-base align-baseline align-bottom align-btm align-end align-inherit align-initial align-mid align-middle align-revert",
+  "align-": "align-10% align-100% align-20% align-30% align-40% align-50% align-60% align-70% align-80% align-90%",
   "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",
@@ -68,7 +68,7 @@ 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-base v-baseline v-bottom v-btm v-end v-inherit v-initial v-mid v-middle v-revert",
+  "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",
   "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

@@ -93,6 +93,22 @@ describe('autocomplete-parse', () => {
         "text-xl",
       ]
     `)
+
+    const parsed3 = parseAutocomplete('w-<percentage>')
+    expect(parsed3.suggest('w-')).toMatchInlineSnapshot(`
+      [
+        "w-100%",
+        "w-10%",
+        "w-20%",
+        "w-30%",
+        "w-40%",
+        "w-50%",
+        "w-60%",
+        "w-70%",
+        "w-80%",
+        "w-90%",
+      ]
+    `)
   })
 
   it('theme', () => {

test/cases/preset-attributify/case-2/input.html

@@ -5,13 +5,14 @@
       <div
         font-100 text-4xl mb--3 p-10
         bg-gradient="to-r from-yellow-400 via-red-500 to-pink-500"
+        align-10px
       >
         ~
       </div>
-      <div text-5xl font-100 sm="bg-blue-600">
+      <div text-5xl font-100 sm="bg-blue-600" align-20%>
         unocss
       </div>
-      <div op-20 font-200 mt-1 tracking-wider group-hover="text-teal-400 op-50">
+      <div op-20 font-200 mt-1 tracking-wider group-hover="text-teal-400 op-50" align-1rem>
         Re-imaging Atomic CSS
       </div>
     </div>

test/cases/preset-attributify/case-2/output.css

@@ -30,6 +30,10 @@
 [px-4=""]{padding-left:1rem;padding-right:1rem;}
 [pt-4=""]{padding-top:1rem;}
 [text-center=""]{text-align:center;}
+[align-10px=""]{vertical-align:10px;}
+[align-1rem=""]{vertical-align:1rem;}
+[align-20\%=""]{vertical-align:20%;}
+[align-center=""]{vertical-align:center;}
 [text-4xl=""],
 [peer=""]:checked~[peer-checked~="text-4xl"]{font-size:2.25rem;line-height:2.5rem;}
 [text-5xl=""]{font-size:3rem;line-height:1;}