From 50f20f8647285cbb6d4af3e5ad8ad4ed63dfb00d Mon Sep 17 00:00:00 2001 From: MellowCo <799478052@qq.com> Date: Fri, 4 Oct 2024 08:20:51 +0800 Subject: [PATCH] feat: support bg-[image:*] --- src/rules/color.ts | 11 +++++++++-- src/utils/handlers/regex.ts | 2 +- test/assets/output/preset-mini/targets.css | 2 ++ .../output/preset-weapp/targets-custom-rules.css | 2 ++ test/assets/output/preset-weapp/targets.css | 2 ++ test/assets/preset-mini-targets.ts | 2 ++ 6 files changed, 18 insertions(+), 3 deletions(-) diff --git a/src/rules/color.ts b/src/rules/color.ts index f8429d3..63a9ac4 100644 --- a/src/rules/color.ts +++ b/src/rules/color.ts @@ -17,6 +17,8 @@ const bgUrlRE = /^\[url\(.+\)\]$/ const bgLengthRE = /^\[(?:length|size):.+\]$/ const bgPositionRE = /^\[position:.+\]$/ const bgGradientRE = /^\[(?:linear|conic|radial)-gradient\(.+\)\]$/ +const bgImageRE = /^\[image:.+\]$/ + export const bgColors: Rule[] = [ [/^bg-(.+)$/, (params, body) => { let [, d] = params @@ -28,8 +30,13 @@ export const bgColors: Rule[] = [ return { 'background-size': h.bracketOfLength(d)!.split(' ').map(e => h.fraction.auto.px.cssvar(e) ?? e).join(' ') } if ((isSize(d) || bgPositionRE.test(d)) && h.bracketOfPosition(d) != null) return { 'background-position': h.bracketOfPosition(d)!.split(' ').map(e => h.position.fraction.auto.px.cssvar(e) ?? e).join(' ') } - if (bgGradientRE.test(d)) - return { 'background-image': h.bracket(d) } + if (bgGradientRE.test(d) || bgImageRE.test(d)) { + const s = h.bracket(d) + if (s) { + const url = s.startsWith('http') ? `url(${s})` : h.cssvar(s) + return { 'background-image': url ?? s } + } + } return colorResolver('background-color', 'bg', 'backgroundColor')(params, body) }, { autocomplete: 'bg-$colors' }], [/^bg-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ '--un-bg-opacity': h.bracket.percent.cssvar(opacity) }), { autocomplete: 'bg-(op|opacity)-' }], diff --git a/src/utils/handlers/regex.ts b/src/utils/handlers/regex.ts index 86b79bf..03f551f 100644 --- a/src/utils/handlers/regex.ts +++ b/src/utils/handlers/regex.ts @@ -12,5 +12,5 @@ export const unitOnlyMap: Record = { lvh: 100, lvw: 100, } -export const bracketTypeRe = /^\[(color|length|size|position|quoted|string):/i +export const bracketTypeRe = /^\[(color|image|length|size|position|quoted|string):/i export const splitComma = /,(?![^()]*\))/g diff --git a/test/assets/output/preset-mini/targets.css b/test/assets/output/preset-mini/targets.css index 2321d13..0c16817 100644 --- a/test/assets/output/preset-mini/targets.css +++ b/test/assets/output/preset-mini/targets.css @@ -649,6 +649,8 @@ 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-\[image\:\$variable\]{background-image:var(--variable);} +.bg-\[image\:https\:\/\/test\.unocss\.png\]{background-image:url(https://test.unocss.png);} .bg-\[length\:--variable\], .bg-\[size\:--variable\]{background-size:var(--variable);} .bg-\[length\:1\/2_20rem\], diff --git a/test/assets/output/preset-weapp/targets-custom-rules.css b/test/assets/output/preset-weapp/targets-custom-rules.css index 9032b55..5e6d8f0 100644 --- a/test/assets/output/preset-weapp/targets-custom-rules.css +++ b/test/assets/output/preset-weapp/targets-custom-rules.css @@ -647,6 +647,8 @@ 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_image_cl11__do11_variable_lfr11_{background-image:var(--variable);} +.bg-_lfl11_image_cl11_https_cl11__sl11__sl11_test_dl11_unocss_dl11_png_lfr11_{background-image:url(https://test.unocss.png);} .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_, diff --git a/test/assets/output/preset-weapp/targets.css b/test/assets/output/preset-weapp/targets.css index 991b317..7a637e6 100644 --- a/test/assets/output/preset-weapp/targets.css +++ b/test/assets/output/preset-weapp/targets.css @@ -649,6 +649,8 @@ 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_image_cl__do_variable_lfr_{background-image:var(--variable);} +.bg-_lfl_image_cl_https_cl__sl__sl_test_dl_unocss_dl_png_lfr_{background-image:url(https://test.unocss.png);} .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_, diff --git a/test/assets/preset-mini-targets.ts b/test/assets/preset-mini-targets.ts index cd8408d..95e71e3 100644 --- a/test/assets/preset-mini-targets.ts +++ b/test/assets/preset-mini-targets.ts @@ -73,6 +73,8 @@ export const presetMiniTargets: string[] = [ 'bg-[calc(10%+10px)]', 'bg-[calc(10vw+10px)]', 'bg-[url(https://test.unocss.png)]', + 'bg-[image:$variable]', + 'bg-[image:https://test.unocss.png]', 'bg-[length:--variable]', 'bg-[length:--variable]', 'bg-[length:10_20rem]',