diff --git a/packages/preset-mini/src/_rules/size.ts b/packages/preset-mini/src/_rules/size.ts index bf1de38769..86e35cfa04 100644 --- a/packages/preset-mini/src/_rules/size.ts +++ b/packages/preset-mini/src/_rules/size.ts @@ -32,8 +32,8 @@ function getSizeValue(minmax: string, hw: string, theme: Theme, prop: string) { } export const sizes: Rule[] = [ - [/^(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', @@ -41,8 +41,8 @@ export const sizes: Rule[] = [ '(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 index 47f1de0e40..e8179c70b6 100644 --- 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 index 9ba7360b18..b41acfcb0a 100644 --- 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 index dc7393cd7f..433317706a 100644 --- 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 index d3906d88f8..5d0e11dba2 100644 --- 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%