feat(preset-mini): keep unitOnlyRE same with tailwind (#3674)

unocss · Apr 1, 2024 · f532b3f · f532b3f
1 parent 955764b
commit f532b3f
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 6 deletions.
diff --git a/packages/preset-mini/src/_utils/handlers/handlers.ts b/packages/preset-mini/src/_utils/handlers/handlers.ts
@@ -1,6 +1,6 @@
 import { escapeSelector } from '@unocss/core'
 import { globalKeywords } from '../mappings'
-import { bracketTypeRe, numberRE, numberWithUnitRE, unitOnlyRE } from './regex'
+import { bracketTypeRe, numberRE, numberWithUnitRE, unitOnlyMap, unitOnlyRE } from './regex'
 
 // Not all, but covers most high frequency attributes
 const cssProps = [
@@ -87,7 +87,7 @@ export function rem(str: string) {
   if (!str)
     return
   if (unitOnlyRE.test(str))
-    return `1${str}`
+    return `${unitOnlyMap[str]}${str}`
   const match = str.match(numberWithUnitRE)
   if (!match)
     return
@@ -102,7 +102,7 @@ export function rem(str: string) {
 
 export function px(str: string) {
   if (unitOnlyRE.test(str))
-    return `1${str}`
+    return `${unitOnlyMap[str]}${str}`
   const match = str.match(numberWithUnitRE)
   if (!match)
     return

diff --git a/packages/preset-mini/src/_utils/handlers/regex.ts b/packages/preset-mini/src/_utils/handlers/regex.ts
@@ -1,5 +1,16 @@
 export const numberWithUnitRE = /^(-?\d*(?:\.\d+)?)(px|pt|pc|%|r?(?:em|ex|lh|cap|ch|ic)|(?:[sld]?v|cq)(?:[whib]|min|max)|in|cm|mm|rpx)?$/i
 export const numberRE = /^(-?\d*(?:\.\d+)?)$/i
-export const unitOnlyRE = /^(px)$/i
+export const unitOnlyRE = /^(px|[sld]?v[wh])$/i
+export const unitOnlyMap: Record<string, number> = {
+  px: 1,
+  vw: 100,
+  vh: 100,
+  svw: 100,
+  svh: 100,
+  dvw: 100,
+  dvh: 100,
+  lvh: 100,
+  lvw: 100,
+}
 export const bracketTypeRe = /^\[(color|length|size|position|quoted|string):/i
 export const splitComma = /,(?![^()]*\))/g
diff --git a/test/preset-mini.test.ts b/test/preset-mini.test.ts
@@ -78,8 +78,29 @@ describe('preset-mini', () => {
     const code = presetWindTargets.join(' ')
     const { css, matched } = await uno.generate(code, { preflights: false })
 
-    expect(Array.from(matched)).toEqual([])
-    expect(css).toBe('')
+    expect(Array.from(matched)).toEqual([
+      'h-svh',
+      'h-dvh',
+      'h-lvh',
+      'min-h-dvh',
+      'min-h-lvh',
+      'min-h-svh',
+      'max-h-dvh',
+      'max-h-svh',
+      'max-h-lvh',
+    ])
+    expect(css).toMatchInlineSnapshot(`
+      "/* layer: default */
+      .h-dvh{height:100dvh;}
+      .h-lvh{height:100lvh;}
+      .h-svh{height:100svh;}
+      .max-h-dvh{max-height:100dvh;}
+      .max-h-lvh{max-height:100lvh;}
+      .max-h-svh{max-height:100svh;}
+      .min-h-dvh{min-height:100dvh;}
+      .min-h-lvh{min-height:100lvh;}
+      .min-h-svh{min-height:100svh;}"
+    `)
   })
 
   it('custom var prefix', async () => {