feat(preset-mini): support common prefix size- for w- and h-

unocss · Jan 8, 2023 · bf434f3 · bf434f3
1 parent 5812486
commit bf434f3
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 7 deletions.
diff --git a/packages/preset-mini/src/_rules/size.ts b/packages/preset-mini/src/_rules/size.ts
@@ -32,17 +32,17 @@ function getSizeValue(minmax: string, hw: string, theme: Theme, prop: string) {
 }
 
 export const sizes: Rule<Theme>[] = [
-  [/^(min-|max-)?([wh])-?(.+)$/, ([, m, w, s], { theme }) => ({ [getPropName(m, w)]: getSizeValue(m, w, theme, s) })],
-  [/^(min-|max-)?(block|inline)-(.+)$/, ([, m, w, s], { theme }) => ({ [getPropName(m, w)]: getSizeValue(m, w, 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: [
       '(w|h)-$width|height|maxWidth|maxHeight|minWidth|minHeight|inlineSize|blockSize|maxInlineSize|maxBlockSize|minInlineSize|minBlockSize',
       '(block|inline)-$width|height|maxWidth|maxHeight|minWidth|minHeight|inlineSize|blockSize|maxInlineSize|maxBlockSize|minInlineSize|minBlockSize',
       '(max|min)-(w|h|block|inline)',
       '(max|min)-(w|h|block|inline)-$width|height|maxWidth|maxHeight|minWidth|minHeight|inlineSize|blockSize|maxInlineSize|maxBlockSize|minInlineSize|minBlockSize',
     ],
   }],
-  [/^(min-|max-)?(h)-screen-(.+)$/, ([, m, w, s], context) => ({ [getPropName(m, w)]: resolveVerticalBreakpoints(context)?.[s] })],
-  [/^(min-|max-)?(w)-screen-(.+)$/, ([, m, w, s], context) => ({ [getPropName(m, w)]: resolveBreakpoints(context)?.[s] }), {
+  [/^(?:size-)?(min-|max-)?(h)-screen-(.+)$/, ([, m, w, s], context) => ({ [getPropName(m, w)]: resolveVerticalBreakpoints(context)?.[s] })],
+  [/^(?:size-)?(min-|max-)?(w)-screen-(.+)$/, ([, m, w, s], context) => ({ [getPropName(m, w)]: resolveBreakpoints(context)?.[s] }), {
     autocomplete: [
       '(w|h)-screen',
       '(min|max)-(w|h)-screen',
@@ -67,5 +67,5 @@ function getAspectRatio(prop: string) {
 }
 
 export const aspectRatio: Rule[] = [
-  [/^aspect-(?:ratio-)?(.+)$/, ([, d]: string[]) => ({ 'aspect-ratio': getAspectRatio(d) }), { autocomplete: ['aspect-(square|video|ratio)', 'aspect-ratio-(square|video)'] }],
+  [/^(?:size-)?aspect-(?:ratio-)?(.+)$/, ([, d]: string[]) => ({ 'aspect-ratio': getAspectRatio(d) }), { autocomplete: ['aspect-(square|video|ratio)', 'aspect-ratio-(square|video)'] }],
 ]
diff --git a/test/__snapshots__/preset-attributify.test.ts.snap b/test/__snapshots__/preset-attributify.test.ts.snap
@@ -36,6 +36,8 @@ Set {
   "[x-transition:enter-start~=\\"opacity-0\\"]",
   "[pt2=\\"\\"]",
   "[rounded-sm=\\"\\"]",
+  "[size~=\\"w-1\\"]",
+  "[size~=\\"h-0.5\\"]",
   "[inline-block=\\"\\"]",
   "[transform=\\"\\"]",
   "[translate-x-100%=\\"\\"]",
@@ -178,6 +180,8 @@ exports[`attributify > fixture1 1`] = `
 [un-children~=\\"m-auto\\"]>*{margin:auto;}
 [ml-1\\\\.5=\\"\\"]{margin-left:0.375rem;}
 [inline-block=\\"\\"]{display:inline-block;}
+[size~=\\"h-0\\\\.5\\"]{height:0.125rem;}
+[size~=\\"w-1\\"]{width:0.25rem;}
 [flex~=\\"\\\\!\\\\~\\"]{display:flex !important;}
 [flex~=\\"col\\"]{flex-direction:column;}
 [translate-x-100\\\\%=\\"\\"]{--un-translate-x:100%;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
@@ -374,6 +378,8 @@ exports[`attributify > variant 1`] = `
   "x-transition:enter-start-opacity-0",
   "pt2",
   "rounded-sm",
+  "size-w-1",
+  "size-h-0.5",
   "inline-block",
   "transform",
   "translate-x-100%",

diff --git a/test/__snapshots__/preset-mini.test.ts.snap b/test/__snapshots__/preset-mini.test.ts.snap
@@ -607,7 +607,8 @@ unocss .scope-\\\\[unocss\\\\]\\\\:block{display:block;}
 .pos-unset{position:unset;}
 .position-inherit{position:inherit;}
 .static{position:static;}
-.h-\\\\[calc\\\\(1000px-4rem\\\\)\\\\]{height:calc(1000px - 4rem);}
+.h-\\\\[calc\\\\(1000px-4rem\\\\)\\\\],
+.size-h-\\\\[calc\\\\(1000px-4rem\\\\)\\\\]{height:calc(1000px - 4rem);}
 .h-\\\\$var{height:var(--var);}
 .h-1{height:0.25rem;}
 .h-1\\\\.000\\\\%,
@@ -648,10 +649,12 @@ unocss .scope-\\\\[unocss\\\\]\\\\:block{display:block;}
 .min-h-unset{min-height:unset;}
 .min-w-\\\\$var{min-width:var(--var);}
 .min-w-20{min-width:5rem;}
-.min-w-full{min-width:100%;}
+.min-w-full,
+.size-min-w-full{min-width:100%;}
 .min-w-lg{min-width:32rem;}
 .min-w-none{min-width:none;}
 .min-w-revert-layer{min-width:revert-layer;}
+.size-w-10{width:2.5rem;}
 .w-\\\\[calc\\\\(calc\\\\(100px\\\\*10\\\\)-4rem\\\\)\\\\]{width:calc(calc(100px * 10) - 4rem);}
 .w-1{width:0.25rem;}
 .w-1\\\\/4{width:25%;}

diff --git a/test/assets/preset-mini-targets.ts b/test/assets/preset-mini-targets.ts
@@ -478,6 +478,9 @@ export const presetMiniTargets: string[] = [
   'h-$var',
   'h-[calc(1000px-4rem)]',
   'w-[calc(calc(100px*10)-4rem)]',
+  'size-w-10',
+  'size-h-[calc(1000px-4rem)]',
+  'size-min-w-full',
 
   // size - logical
   'block-auto',

diff --git a/test/preset-attributify.test.ts b/test/preset-attributify.test.ts
@@ -27,6 +27,7 @@ describe('attributify', () => {
   :x-transition:enter-start="opacity-0"
   v-bind:x-transition:enter-start="opacity-0"
   pt2 rounded-sm
+  size="w-1 h-0.5"
   inline-block
   transform
   translate-x-100%