feat(preset-mini): support bg-[size:*] (#3629)

unocss · Mar 18, 2024 · e033363 · e033363
1 parent c64293c
commit e033363
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 5 deletions.
diff --git a/packages/preset-mini/src/_rules/color.ts b/packages/preset-mini/src/_rules/color.ts
@@ -9,7 +9,7 @@ export const opacity: Rule[] = [
 ]
 
 const bgUrlRE = /^\[url\(.+\)\]$/
-const bgLengthRE = /^\[length:.+\]$/
+const bgLengthRE = /^\[(length|size):.+\]$/
 const bgPositionRE = /^\[position:.+\]$/
 const bgGradientRE = /^\[(linear|conic|radial)-gradient\(.+\)\]$/
 export const bgColors: Rule[] = [

diff --git a/packages/preset-mini/src/_utils/handlers/regex.ts b/packages/preset-mini/src/_utils/handlers/regex.ts
@@ -1,4 +1,4 @@
 export const numberWithUnitRE = /^(-?\d*(?:\.\d+)?)(px|pt|pc|%|r?(?:em|ex|lh|cap|ch|ic)|(?:[sld]?v|cq)(?:[whib]|min|max)|in|cm|mm|rpx)?$/i
 export const numberRE = /^(-?\d*(?:\.\d+)?)$/i
 export const unitOnlyRE = /^(px)$/i
-export const bracketTypeRe = /^\[(color|length|position|quoted|string):/i
+export const bracketTypeRe = /^\[(color|length|size|position|quoted|string):/i
diff --git a/test/assets/output/preset-mini-targets.css b/test/assets/output/preset-mini-targets.css
@@ -143,9 +143,12 @@ unocss .scope-\[unocss\]\:block{display:block;}
 .bg-\[calc\(10\%\+10px\)\]{background-position:calc(10% + 10px);}
 .bg-\[calc\(10vw\+10px\)\]{background-position:calc(10vw + 10px);}
 .bg-\[conic-gradient\(red\,blue\)\]{background-image:conic-gradient(red,blue);}
-.bg-\[length\:--variable\]{background-size:var(--variable);}
-.bg-\[length\:1\/2_20rem\]{background-size:50% 20rem;}
-.bg-\[length\:10_20rem\]{background-size:10px 20rem;}
+.bg-\[length\:--variable\],
+.bg-\[size\:--variable\]{background-size:var(--variable);}
+.bg-\[length\:1\/2_20rem\],
+.bg-\[size\:1\/2_20rem\]{background-size:50% 20rem;}
+.bg-\[length\:10_20rem\],
+.bg-\[size\:10_20rem\]{background-size:10px 20rem;}
 .bg-\[linear-gradient\(45deg\,\#0072ff\,\#00d2e8\,\#04fd8f\,\#70fd6c\)\]{background-image:linear-gradient(45deg,#0072ff,#00d2e8,#04fd8f,#70fd6c);}
 .bg-\[position\:--variable\]{background-position:var(--variable);}
 .bg-\[position\:1\/2_20rem\]{background-position:50% 20rem;}

diff --git a/test/assets/preset-mini-targets.ts b/test/assets/preset-mini-targets.ts
@@ -276,6 +276,9 @@ export const presetMiniTargets: string[] = [
   'bg-[length:--variable]',
   'bg-[length:10_20rem]',
   'bg-[length:1/2_20rem]',
+  'bg-[size:--variable]',
+  'bg-[size:10_20rem]',
+  'bg-[size:1/2_20rem]',
   'bg-[position:--variable]',
   'bg-[position:10_20rem]',
   'bg-[position:1/2_20rem]',