feat(preset-mini): support size-* shorthand (#3425)

Mini-ghost · zyyv · antfu · web-flow · commit 7623e65f9083 · 2023-12-27T11:28:24.000Z
Co-authored-by: Chris &lt;1633711653@qq.com&gt;
Co-authored-by: Anthony Fu &lt;anthonyfu117@hotmail.com&gt;
diff --git a/packages/preset-mini/src/_rules/size.ts b/packages/preset-mini/src/_rules/size.ts
@@ -32,6 +32,7 @@ function getSizeValue(minmax: string, hw: string, theme: Theme, prop: string) {
 }
 
 export const sizes: Rule<Theme>[] = [
+  [/^size-(min-|max-)?(.+)$/, ([, m, s], { theme }) => ({ [getPropName(m, 'w')]: getSizeValue(m, 'w', theme, s), [getPropName(m, 'h')]: getSizeValue(m, 'h', theme, s) })],
   [/^(?:size-)?(min-|max-)?([wh])-?(.+)$/, ([, m, w, s], { theme }) => ({ [getPropName(m, w)]: getSizeValue(m, w, theme, s) })],
   [/^(?:size-)?(min-|max-)?(block|inline)-(.+)$/, ([, m, w, s], { theme }) => ({ [getPropName(m, w)]: getSizeValue(m, w, theme, s) }), {
     autocomplete: [
diff --git a/test/assets/output/preset-mini-targets.css b/test/assets/output/preset-mini-targets.css
@@ -671,6 +671,11 @@ unocss .scope-\[unocss\]\:block{display:block;}
 .pos-unset{position:unset;}
 .position-inherit{position:inherit;}
 .static{position:static;}
+.size-\[calc\(1000px-4rem\)\]{width:calc(1000px - 4rem);height:calc(1000px - 4rem);}
+.size-\[var\(--something\)\]{width:var(--something);height:var(--something);}
+.size-10{width:2.5rem;height:2.5rem;}
+.size-max-10{max-width:2.5rem;max-height:2.5rem;}
+.size-min-10{min-width:2.5rem;min-height:2.5rem;}
 .h-\[calc\(1000px-4rem\)\],
 .size-h-\[calc\(1000px-4rem\)\]{height:calc(1000px - 4rem);}
 .h-\$var{height:var(--var);}
diff --git a/test/assets/preset-mini-targets.ts b/test/assets/preset-mini-targets.ts
@@ -559,6 +559,11 @@ export const presetMiniTargets: string[] = [
   'size-w-10',
   'size-h-[calc(1000px-4rem)]',
   'size-min-w-full',
+  'size-10',
+  'size-[calc(1000px-4rem)]',
+  'size-[var(--something)]',
+  'size-min-10',
+  'size-max-10',
 
   // size - logical
   'block-auto',

Original file line number	Diff line number	Diff line change
`@@ -32,6 +32,7 @@ function getSizeValue(minmax: string, hw: string, theme: Theme, prop: string) {`
`32`	`32`	`}`
`33`	`33`
`34`	`34`	`export const sizes: Rule<Theme>[] = [`
	`35`	`+ [/^size-(min-\|max-)?(.+)$/, ([, m, s], { theme }) => ({ [getPropName(m, 'w')]: getSizeValue(m, 'w', theme, s), [getPropName(m, 'h')]: getSizeValue(m, 'h', theme, s) })],`
`35`	`36`	`[/^(?:size-)?(min-\|max-)?([wh])-?(.+)$/, ([, m, w, s], { theme }) => ({ [getPropName(m, w)]: getSizeValue(m, w, theme, s) })],`
`36`	`37`	`[/^(?:size-)?(min-\|max-)?(block\|inline)-(.+)$/, ([, m, w, s], { theme }) => ({ [getPropName(m, w)]: getSizeValue(m, w, theme, s) }), {`
`37`	`38`	`autocomplete: [`