From b95ebc579040d63f66e85f955e70c2d0fe7d40ec Mon Sep 17 00:00:00 2001 From: MellowCo <799478052@qq.com> Date: Thu, 21 Mar 2024 21:31:13 +0800 Subject: [PATCH] feat: support bg-[size:*] --- src/rules/color.ts | 2 +- src/utils/handlers/regex.ts | 2 +- test/assets/output/preset-mini/targets.css | 9 ++++++--- test/assets/output/preset-weapp/targets-custom-rules.css | 9 ++++++--- test/assets/output/preset-weapp/targets.css | 9 ++++++--- test/assets/preset-mini-targets.ts | 3 +++ 6 files changed, 23 insertions(+), 11 deletions(-) diff --git a/src/rules/color.ts b/src/rules/color.ts index 2dcd13f..d461fc9 100644 --- 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[] = [ diff --git a/src/utils/handlers/regex.ts b/src/utils/handlers/regex.ts index 8111807..05e721b 100644 --- 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 index 6221e80..6d900a5 100644 --- 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 index ab43553..d7be7ce 100644 --- 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 index 5d28ccb..cad0ada 100644 --- 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 index fa8df10..738d805 100644 --- 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]',