fix(preset-mini): vertical align false positive

unocss · Sep 2, 2023 · 22cb3d3 · 22cb3d3
1 parent 54101f1
commit 22cb3d3
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 9 deletions.
diff --git a/packages/preset-mini/src/_rules/align.ts b/packages/preset-mini/src/_rules/align.ts
@@ -1,5 +1,6 @@
 import type { Rule } from '@unocss/core'
 import { globalKeywords } from '../_utils/mappings'
+import { h } from '../_utils/handlers'
 
 const verticalAlignAlias: Record<string, string> = {
   'mid': 'middle',
@@ -19,12 +20,16 @@ const verticalAlignAlias: Record<string, string> = {
 }
 
 export const verticalAligns: Rule[] = [
-  [/^(?:vertical|align|v)-([-\w]+%?)$/, ([, v]) => ({ 'vertical-align': verticalAlignAlias[v] ?? v }), {
-    autocomplete: [
-      `(vertical|align|v)-(${Object.keys(verticalAlignAlias).join('|')})`,
-      '(vertical|align|v)-<percentage>',
-    ],
-  }],
+  [/^(?:vertical|align|v)-([-\w]+%?)$/,
+    ([, v]) => ({ 'vertical-align': verticalAlignAlias[v] ?? h.numberWithUnit(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 }])
+export const textAligns: Rule[] = ['center', 'left', 'right', 'justify', 'start', 'end']
+  .map(v => [`text-${v}`, { 'text-align': v }])
diff --git a/test/assets/preset-mini-targets.ts b/test/assets/preset-mini-targets.ts
@@ -1135,6 +1135,11 @@ export const presetMiniNonTargets = [
   // variants - combinator
   'all:[svg]:fill-red',
 
+  // vertical align
+  'v-random',
+  'v-foo-100%',
+  'vertical-x-100%',
+
   // arbitrary css properties edge cases that cause invalid output
   '[name].[hash:9]',
   '["update:modelValue"]',

diff --git a/test/cases/preset-attributify/case-2/input.html b/test/cases/preset-attributify/case-2/input.html
@@ -1,5 +1,5 @@
 <template>
-  <div h-80 text-center flex flex-col align-center select-none all:transition-400>
+  <div h-80 text-center flex flex-col align-middle select-none all:transition-400>
     <input type="checkbox" peer placeholder=">" class="<md:color-red" mt-a>
     <div mb-a group peer-checked="text-4xl">
       <div

diff --git a/test/cases/preset-attributify/case-2/output.css b/test/cases/preset-attributify/case-2/output.css
@@ -33,7 +33,7 @@
 [align-10px=""]{vertical-align:10px;}
 [align-1rem=""]{vertical-align:1rem;}
 [align-20\%=""]{vertical-align:20%;}
-[align-center=""]{vertical-align:center;}
+[align-middle=""]{vertical-align:middle;}
 [text-4xl=""],
 [peer=""]:checked~[peer-checked~="text-4xl"]{font-size:2.25rem;line-height:2.5rem;}
 [text-5xl=""]{font-size:3rem;line-height:1;}