feat: handle arbitrary gradients correctly

src/rules/color.ts

@@ -16,6 +16,7 @@ export const opacity: Rule[] = [
 const bgUrlRE = /^\[url\(.+\)\]$/
 const bgLengthRE = /^\[length:.+\]$/
 const bgPositionRE = /^\[position:.+\]$/
+const bgGradientRE = /^\[(linear|conic|radial)-gradient\(.+\)\]$/
 export const bgColors: Rule<Theme>[] = [
   [/^bg-(.+)$/, (params, body) => {
     let [, d] = params
@@ -27,6 +28,8 @@ 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) }
     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>' }],

test/assets/output/preset-mini/targets.css

@@ -279,14 +279,17 @@ unocss .scope-\[unocss\]\:block{display:block;}
 .bg-\[10vw\]{background-position:10vw;}
 .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-\[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;}
 .bg-\[position\:10_20rem\]{background-position:10px 20rem;}
 .bg-\[position\:bottom_left_10\%\]{background-position:bottom left 10%;}
 .bg-\[position\:top_right_1\/3\]{background-position:top right 33.3333333333%;}
+.bg-\[radial-gradient\(red\,blue\)\]{background-image:radial-gradient(red,blue);}
 .bg-\[rgb\(4_5_6\/0\.7\)\]\/\[calc\(100\/3\)\]{background-color:rgba(4,5,6,calc(100 / 3));}
 .bg-\[rgba\(1\,2\,3\,0\.5\)\]{--licl-bg-opacity:0.5;background-color:rgba(1,2,3,var(--licl-bg-opacity));}
 .bg-\[rgba\(4_5_6\/0\.7\)\]{--licl-bg-opacity:0.7;background-color:rgba(4,5,6,var(--licl-bg-opacity));}

test/assets/output/preset-weapp/targets-custom-rules.css

@@ -277,14 +277,17 @@ unocss .scope-_lfl11_unocss_lfr11__cl11_block{display:block;}
 .bg-_lfl11_10vw_lfr11_{background-position:10vw;}
 .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_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;}
 .bg-_lfl11_position_cl11_10_20rem_lfr11_{background-position:10px 20rem;}
 .bg-_lfl11_position_cl11_bottom_left_10_pes11__lfr11_{background-position:bottom left 10%;}
 .bg-_lfl11_position_cl11_top_right_1_sl11_3_lfr11_{background-position:top right 33.3333333333%;}
+.bg-_lfl11_radial-gradient_lbl11_red_lco11_blue_lbr11__lfr11_{background-image:radial-gradient(red,blue);}
 .bg-_lfl11_rgb_lbl11_4_5_6_sl11_0_dl11_7_lbr11__lfr11__sl11__lfl11_calc_lbl11_100_sl11_3_lbr11__lfr11_{background-color:rgba(4,5,6,calc(100 / 3));}
 .bg-_lfl11_rgba_lbl11_1_lco11_2_lco11_3_lco11_0_dl11_5_lbr11__lfr11_{--un-bg-opacity:0.5;background-color:rgba(1,2,3,var(--un-bg-opacity));}
 .bg-_lfl11_rgba_lbl11_4_5_6_sl11_0_dl11_7_lbr11__lfr11_{--un-bg-opacity:0.7;background-color:rgba(4,5,6,var(--un-bg-opacity));}

test/assets/output/preset-weapp/targets.css

@@ -277,14 +277,17 @@ unocss .scope-_lfl_unocss_lfr__cl_block{display:block;}
 .bg-_lfl_10vw_lfr_{background-position:10vw;}
 .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_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;}
 .bg-_lfl_position_cl_10_20rem_lfr_{background-position:10px 20rem;}
 .bg-_lfl_position_cl_bottom_left_10_pes__lfr_{background-position:bottom left 10%;}
 .bg-_lfl_position_cl_top_right_1_sl_3_lfr_{background-position:top right 33.3333333333%;}
+.bg-_lfl_radial-gradient_lbl_red_lco_blue_lbr__lfr_{background-image:radial-gradient(red,blue);}
 .bg-_lfl_rgb_lbl_4_5_6_sl_0_dl_7_lbr__lfr__sl__lfl_calc_lbl_100_sl_3_lbr__lfr_{background-color:rgba(4,5,6,calc(100 / 3));}
 .bg-_lfl_rgba_lbl_1_lco_2_lco_3_lco_0_dl_5_lbr__lfr_{--un-bg-opacity:0.5;background-color:rgba(1,2,3,var(--un-bg-opacity));}
 .bg-_lfl_rgba_lbl_4_5_6_sl_0_dl_7_lbr__lfr_{--un-bg-opacity:0.7;background-color:rgba(4,5,6,var(--un-bg-opacity));}

test/assets/preset-mini-targets.ts

@@ -436,7 +436,11 @@ export const presetMiniTargets: string[] = [
   'bg-[position:10_20rem]',
   'bg-[position:1/2_20rem]',
   'bg-[position:bottom_left_10%]',
-  'bg-[position:top_right_1/3]',
+
+  // arbitrary gradients
+  'bg-[linear-gradient(45deg,#0072ff,#00d2e8,#04fd8f,#70fd6c)]',
+  'bg-[conic-gradient(red,blue)]',
+  'bg-[radial-gradient(red,blue)]',
 
   // color - ring
   'ring-red2',