feat(preset-mini, preset-wind4): add stretch keyword for width/height (#5048)

zyyv · web-flow · commit 126d15ab870c · 2026-01-09T10:55:14.000+08:00
diff --git a/packages-presets/preset-mini/src/_rules/size.ts b/packages-presets/preset-mini/src/_rules/size.ts
@@ -26,6 +26,8 @@ function getSizeValue(minmax: string, hw: string, theme: Theme, prop: string) {
     case 'max':
     case 'min':
       return `${prop}-content`
+    case 'stretch':
+      return 'stretch'
   }
 
   return h.bracket.cssvar.global.auto.fraction.rem(prop)
diff --git a/packages-presets/preset-wind4/src/rules/size.ts b/packages-presets/preset-wind4/src/rules/size.ts
@@ -32,6 +32,9 @@ function getSizeValue(theme: Theme, hw: string, prop: string) {
       case 'min':
         v = `${prop}-content`
         break
+      case 'stretch':
+        v = 'stretch'
+        break
       case 'screen':
         v = hw === 'w' ? '100vw' : '100vh'
         break
diff --git a/test/assets/output/preset-mini-targets.css b/test/assets/output/preset-mini-targets.css
@@ -239,6 +239,7 @@ unocss .scope-\[unocss\]\:block{display:block;}
 .max-w-lg{max-width:32rem;}
 .max-w-none{max-width:none;}
 .max-w-revert{max-width:revert;}
+.max-w-stretch{max-width:stretch;}
 .min-h-\[1px\]{min-height:1px;}
 .min-h-unset{min-height:unset;}
 .min-w-\$var{min-width:var(--var);}
@@ -259,6 +260,7 @@ unocss .scope-\[unocss\]\:block{display:block;}
 .w-21{width:5.25rem;}
 .w-auto{width:auto;}
 .w-lg{width:32rem;}
+.w-stretch{width:stretch;}
 .w-unset{width:unset;}
 .block-\[calc\(1000px-4rem\)\]{block-size:calc(1000px - 4rem);}
 .block-\$var{block-size:var(--var);}
diff --git a/test/assets/output/preset-wind4-targets.css b/test/assets/output/preset-wind4-targets.css
@@ -916,6 +916,7 @@
 .max-w-lg{max-width:var(--container-lg);}
 .max-w-none{max-width:none;}
 .max-w-revert{max-width:revert;}
+.max-w-stretch{max-width:stretch;}
 .min-h-\[1px\]{min-height:1px;}
 .min-h-unset{min-height:unset;}
 .min-w-\$var{min-width:var(--var);}
@@ -937,6 +938,7 @@
 .w-auto{width:auto;}
 .w-lg{width:var(--container-lg);}
 .w-none{width:none;}
+.w-stretch{width:stretch;}
 .w-unset{width:unset;}
 .block-\[calc\(1000px-4rem\)\]{block-size:calc(1000px - 4rem);}
 .block-\$var{block-size:var(--var);}
diff --git a/test/assets/preset-mini-targets.ts b/test/assets/preset-mini-targets.ts
@@ -575,6 +575,7 @@ export const presetMiniTargets: string[] = [
   'w-none',
   'w-auto',
   'w-unset',
+  'w-stretch',
   'w-1',
   'w-21',
   'w-1/4',
@@ -588,6 +589,7 @@ export const presetMiniTargets: string[] = [
   'max-w-20',
   'max-w-lg',
   'max-w-full',
+  'max-w-stretch',
   'max-w-$var',
   'max-w-screen-lg',
   'max-w-revert',

Original file line number	Diff line number	Diff line change
`@@ -26,6 +26,8 @@ function getSizeValue(minmax: string, hw: string, theme: Theme, prop: string) {`
`26`	`26`	`case 'max':`
`27`	`27`	`case 'min':`
`28`	`28`	return `${prop}-content`
	`29`	`+ case 'stretch':`
	`30`	`+ return 'stretch'`
`29`	`31`	`}`
`30`	`32`
`31`	`33`	`return h.bracket.cssvar.global.auto.fraction.rem(prop)`