feat: support bg-[size:*]

MellowCo · Mar 21, 2024 · b95ebc5 · b95ebc5
1 parent ae4f356
commit b95ebc5
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 11 deletions.
diff --git a/src/rules/color.ts b/src/rules/color.ts
@@ -14,7 +14,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<Theme>[] = [

diff --git a/src/utils/handlers/regex.ts b/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 = /^(-?[0-9.]+)$/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
@@ -280,9 +280,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/output/preset-weapp/targets-custom-rules.css b/test/assets/output/preset-weapp/targets-custom-rules.css
@@ -278,9 +278,12 @@ unocss .scope-_lfl11_unocss_lfr11__cl11_block{display:block;}
 .bg-_lfl11_calc_lbl11_10_pes11__plus_10px_lbr11__lfr11_{background-position:calc(10% + 10px);}
 .bg-_lfl11_calc_lbl11_10vw_plus_10px_lbr11__lfr11_{background-position:calc(10vw + 10px);}
 .bg-_lfl11_conic-gradient_lbl11_red_lco11_blue_lbr11__lfr11_{background-image:conic-gradient(red,blue);}
-.bg-_lfl11_length_cl11_--variable_lfr11_{background-size:var(--variable);}
-.bg-_lfl11_length_cl11_1_sl11_2_20rem_lfr11_{background-size:50% 20rem;}
-.bg-_lfl11_length_cl11_10_20rem_lfr11_{background-size:10px 20rem;}
+.bg-_lfl11_length_cl11_--variable_lfr11_,
+.bg-_lfl11_size_cl11_--variable_lfr11_{background-size:var(--variable);}
+.bg-_lfl11_length_cl11_1_sl11_2_20rem_lfr11_,
+.bg-_lfl11_size_cl11_1_sl11_2_20rem_lfr11_{background-size:50% 20rem;}
+.bg-_lfl11_length_cl11_10_20rem_lfr11_,
+.bg-_lfl11_size_cl11_10_20rem_lfr11_{background-size:10px 20rem;}
 .bg-_lfl11_linear-gradient_lbl11_45deg_lco11__wn11_0072ff_lco11__wn11_00d2e8_lco11__wn11_04fd8f_lco11__wn11_70fd6c_lbr11__lfr11_{background-image:linear-gradient(45deg,#0072ff,#00d2e8,#04fd8f,#70fd6c);}
 .bg-_lfl11_position_cl11_--variable_lfr11_{background-position:var(--variable);}
 .bg-_lfl11_position_cl11_1_sl11_2_20rem_lfr11_{background-position:50% 20rem;}

diff --git a/test/assets/output/preset-weapp/targets.css b/test/assets/output/preset-weapp/targets.css
@@ -278,9 +278,12 @@ unocss .scope-_lfl_unocss_lfr__cl_block{display:block;}
 .bg-_lfl_calc_lbl_10_pes__plus_10px_lbr__lfr_{background-position:calc(10% + 10px);}
 .bg-_lfl_calc_lbl_10vw_plus_10px_lbr__lfr_{background-position:calc(10vw + 10px);}
 .bg-_lfl_conic-gradient_lbl_red_lco_blue_lbr__lfr_{background-image:conic-gradient(red,blue);}
-.bg-_lfl_length_cl_--variable_lfr_{background-size:var(--variable);}
-.bg-_lfl_length_cl_1_sl_2_20rem_lfr_{background-size:50% 20rem;}
-.bg-_lfl_length_cl_10_20rem_lfr_{background-size:10px 20rem;}
+.bg-_lfl_length_cl_--variable_lfr_,
+.bg-_lfl_size_cl_--variable_lfr_{background-size:var(--variable);}
+.bg-_lfl_length_cl_1_sl_2_20rem_lfr_,
+.bg-_lfl_size_cl_1_sl_2_20rem_lfr_{background-size:50% 20rem;}
+.bg-_lfl_length_cl_10_20rem_lfr_,
+.bg-_lfl_size_cl_10_20rem_lfr_{background-size:10px 20rem;}
 .bg-_lfl_linear-gradient_lbl_45deg_lco__wn_0072ff_lco__wn_00d2e8_lco__wn_04fd8f_lco__wn_70fd6c_lbr__lfr_{background-image:linear-gradient(45deg,#0072ff,#00d2e8,#04fd8f,#70fd6c);}
 .bg-_lfl_position_cl_--variable_lfr_{background-position:var(--variable);}
 .bg-_lfl_position_cl_1_sl_2_20rem_lfr_{background-position:50% 20rem;}

diff --git a/test/assets/preset-mini-targets.ts b/test/assets/preset-mini-targets.ts
@@ -432,6 +432,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]',