feat: support bg-[image:*]

MellowCo · Oct 4, 2024 · 50f20f8 · 50f20f8
1 parent 109ef8c
commit 50f20f8
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 3 deletions.
diff --git 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<Theme>[] = [
   [/^bg-(.+)$/, (params, body) => {
     let [, d] = params
@@ -28,8 +30,13 @@ export const bgColors: Rule<Theme>[] = [
       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)-<percent>' }],

diff --git a/src/utils/handlers/regex.ts b/src/utils/handlers/regex.ts
@@ -12,5 +12,5 @@ export const unitOnlyMap: Record<string, number> = {
   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
@@ -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
@@ -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
@@ -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
@@ -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]',