feat(preset-wind): add svh, lvh and dvh values to default theme (…

…#3469)

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

packages/preset-wind/src/rules/default.ts

@@ -5,7 +5,7 @@ import { container } from './container'
 import { backgroundStyles } from './background'
 import { filters } from './filters'
 import { spaces } from './spacing'
-import { backgroundBlendModes, hyphens, isolations, mixBlendModes, objectPositions, screenReadersAccess, textTransforms, writingModes, writingOrientations } from './static'
+import { backgroundBlendModes, dynamicViewportHeight, hyphens, isolations, mixBlendModes, objectPositions, screenReadersAccess, textTransforms, writingModes, writingOrientations } from './static'
 import { tables } from './table'
 import { accents, carets, imageRenderings, listStyle, overscrolls, scrollBehaviors } from './behaviors'
 import { animations } from './animation'
@@ -108,6 +108,7 @@ export const rules: Rule<Theme>[] = [
   placeholders,
   _.containerParent,
   viewTransition,
+  dynamicViewportHeight,
 
   // should be the last
   _.questionMark,

packages/preset-wind/src/rules/static.ts

@@ -125,3 +125,15 @@ export const mixBlendModes: Rule[] = [
   ['mix-blend-normal', { 'mix-blend-mode': 'normal' }],
   ...makeGlobalStaticRules('mix-blend'),
 ]
+
+export const dynamicViewportHeight: Rule[] = [
+  ['min-h-dvh', { 'min-height': '100dvh' }],
+  ['min-h-svh', { 'min-height': '100svh' }],
+  ['min-h-lvh', { 'min-height': '100lvh' }],
+  ['h-dvh', { height: '100dvh' }],
+  ['h-svh', { height: '100svh' }],
+  ['h-lvh', { height: '100lvh' }],
+  ['max-h-dvh', { 'max-height': '100dvh' }],
+  ['max-h-svh', { 'max-height': '100svh' }],
+  ['max-h-lvh', { 'max-height': '100lvh' }],
+]

test/__snapshots__/postcss.test.ts.snap

@@ -384,6 +384,15 @@ exports[`postcss > @unocss 1`] = `
 .placeholder-red-400::placeholder{--un-placeholder-opacity:1;color:rgb(248 113 113 / var(--un-placeholder-opacity));}
 .view-transition-foo{view-transition-name:foo;}
 .view-transition-none{view-transition-name:none;}
+.min-h-dvh{min-height:100dvh;}
+.min-h-svh{min-height:100svh;}
+.min-h-lvh{min-height:100lvh;}
+.h-dvh{height:100dvh;}
+.h-svh{height:100svh;}
+.h-lvh{height:100lvh;}
+.max-h-dvh{max-height:100dvh;}
+.max-h-svh{max-height:100svh;}
+.max-h-lvh{max-height:100lvh;}
 @media (hover: hover) and (pointer: fine){
 .\\@hover-text-red:hover{--un-text-opacity:1;color:rgb(248 113 113 / var(--un-text-opacity));}
 [open] .\\@hover\\:\\[\\[open\\]_\\&\\]\\:text-blue:hover{--un-text-opacity:1;color:rgb(96 165 250 / var(--un-text-opacity));}

test/assets/preset-wind-targets.ts

@@ -409,6 +409,17 @@ export const presetWindTargets: string[] = [
   // view-transition
   'view-transition-foo',
   'view-transition-none',
+
+  // dynamic viewport height
+  'h-svh',
+  'h-dvh',
+  'h-lvh',
+  'min-h-dvh',
+  'min-h-lvh',
+  'min-h-svh',
+  'max-h-dvh',
+  'max-h-svh',
+  'max-h-lvh',
 ]
 
 export const presetWindNonTargets: string[] = [