feat(preset-mini, preset-wind4): optimize contain-intrinsic-size rule

zyyv · zyyv · commit d53461ff84c1 · 2026-01-09T20:29:06.000+08:00
close #5045
diff --git a/packages-presets/preset-mini/src/_rules/static.ts b/packages-presets/preset-mini/src/_rules/static.ts
@@ -74,7 +74,19 @@ export const whitespaces: Rule[] = [
 ]
 
 export const contentVisibility: Rule[] = [
-  [/^intrinsic-size-(.+)$/, ([, d]) => ({ 'contain-intrinsic-size': h.bracket.cssvar.global.fraction.rem(d) }), { autocomplete: 'intrinsic-size-<num>' }],
+  [/^intrinsic(?:-(block|inline|w|h))?(?:-size)?-(.+)$/, ([, d, s]) => {
+    const sizeMap = {
+      block: 'block-size',
+      inline: 'inline-size',
+      w: 'width',
+      h: 'height',
+    }
+    return { [`contain-intrinsic-${sizeMap[d as keyof typeof sizeMap] ?? 'size'}`]: h.bracket.cssvar.global.fraction.rem(s) }
+  }, { autocomplete: [
+    'intrinsic-size-<num>',
+    'intrinsic-<num>',
+    'intrinsic-(block|inline|w|h)-<num>',
+  ] }],
   ['content-visibility-visible', { 'content-visibility': 'visible' }],
   ['content-visibility-hidden', { 'content-visibility': 'hidden' }],
   ['content-visibility-auto', { 'content-visibility': 'auto' }],
diff --git a/packages-presets/preset-wind4/src/rules/static.ts b/packages-presets/preset-wind4/src/rules/static.ts
@@ -85,7 +85,19 @@ export const whitespaces: Rule<Theme>[] = [
 ]
 
 export const contentVisibility: Rule<Theme>[] = [
-  [/^intrinsic-size-(.+)$/, ([, d]) => ({ 'contain-intrinsic-size': h.bracket.cssvar.global.fraction.rem(d) }), { autocomplete: 'intrinsic-size-<num>' }],
+  [/^intrinsic(?:-(block|inline|w|h))?(?:-size)?-(.+)$/, ([, d, s]) => {
+    const sizeMap = {
+      block: 'block-size',
+      inline: 'inline-size',
+      w: 'width',
+      h: 'height',
+    }
+    return { [`contain-intrinsic-${sizeMap[d as keyof typeof sizeMap] ?? 'size'}`]: h.bracket.cssvar.global.fraction.rem(s) }
+  }, { autocomplete: [
+    'intrinsic-size-<num>',
+    'intrinsic-<num>',
+    'intrinsic-(block|inline|w|h)-<num>',
+  ] }],
   ['content-visibility-visible', { 'content-visibility': 'visible' }],
   ['content-visibility-hidden', { 'content-visibility': 'hidden' }],
   ['content-visibility-auto', { 'content-visibility': 'auto' }],
diff --git a/test/assets/output/preset-mini-targets.css b/test/assets/output/preset-mini-targets.css
@@ -1098,10 +1098,14 @@ unocss .scope-\[unocss\]\:block{display:block;}
 .will-change-scroll{will-change:scroll-position;}
 .will-change-transform{will-change:transform;}
 .will-change-unset{will-change:unset;}
+.intrinsic-block-unset{contain-intrinsic-block-size:unset;}
+.intrinsic-h-size-1\/2{contain-intrinsic-height:50%;}
+.intrinsic-inline-size-\[auto\ 300px\]{contain-intrinsic-inline-size:auto 300px;}
 .intrinsic-size-1\/2{contain-intrinsic-size:50%;}
 .intrinsic-size-200{contain-intrinsic-size:50rem;}
 .intrinsic-size-200px{contain-intrinsic-size:200px;}
 .intrinsic-size-unset{contain-intrinsic-size:unset;}
+.intrinsic-w-200px{contain-intrinsic-width:200px;}
 .content-visibility-visible{content-visibility:visible;}
 .content-visibility-hidden{content-visibility:hidden;}
 .content-visibility-auto{content-visibility:auto;}
diff --git a/test/assets/output/preset-wind4-targets.css b/test/assets/output/preset-wind4-targets.css
@@ -1017,10 +1017,14 @@ unocss .scope-\[unocss\]\:block{display:block;}
 .whitespace-unset{white-space:unset;}
 .ws-nowrap{white-space:nowrap;}
 .ws-revert{white-space:revert;}
+.intrinsic-block-unset{contain-intrinsic-block-size:unset;}
+.intrinsic-h-size-1\/2{contain-intrinsic-height:50%;}
+.intrinsic-inline-size-\[auto\ 300px\]{contain-intrinsic-inline-size:auto 300px;}
 .intrinsic-size-1\/2{contain-intrinsic-size:50%;}
 .intrinsic-size-200{contain-intrinsic-size:50rem;}
 .intrinsic-size-200px{contain-intrinsic-size:200px;}
 .intrinsic-size-unset{contain-intrinsic-size:unset;}
+.intrinsic-w-200px{contain-intrinsic-width:200px;}
 .content-visibility-visible{content-visibility:visible;}
 .content-visibility-hidden{content-visibility:hidden;}
 .content-visibility-auto{content-visibility:auto;}
diff --git a/test/assets/preset-mini-targets.ts b/test/assets/preset-mini-targets.ts
@@ -787,6 +787,10 @@ export const presetMiniTargets: string[] = [
   'intrinsic-size-200px',
   'intrinsic-size-1/2',
   'intrinsic-size-unset',
+  'intrinsic-w-200px',
+  'intrinsic-h-size-1/2',
+  'intrinsic-block-unset',
+  'intrinsic-inline-size-[auto 300px]',
 
   // svg
   'fill-none',
