fix(preset-mini): handle arbitrary gradients correctly (#3589)

unocss · Mar 3, 2024 · 84088d8 · 84088d8
1 parent 48cc394
commit 84088d8
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 0 deletions.
diff --git a/packages/preset-mini/src/_rules/color.ts b/packages/preset-mini/src/_rules/color.ts
@@ -11,6 +11,7 @@ export const opacity: Rule[] = [
 const bgUrlRE = /^\[url\(.+\)\]$/
 const bgLengthRE = /^\[length:.+\]$/
 const bgPositionRE = /^\[position:.+\]$/
+const bgGradientRE = /^\[(linear|conic|radial)-gradient\(.+\)\]$/
 export const bgColors: Rule[] = [
   [/^bg-(.+)$/, (...args) => {
     const d = args[0][1]
@@ -20,6 +21,8 @@ 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) }
     return colorResolver('background-color', 'bg', 'backgroundColor')(...args)
   }, { autocomplete: 'bg-$colors' }],
   [/^bg-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ '--un-bg-opacity': h.bracket.percent.cssvar(opacity) }), { autocomplete: 'bg-(op|opacity)-<percent>' }],

diff --git a/test/assets/output/preset-mini-targets.css b/test/assets/output/preset-mini-targets.css
@@ -142,14 +142,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:rgb(4 5 6 / calc(100 / 3));}
 .bg-\[rgba\(1\,2\,3\,0\.5\)\]{--un-bg-opacity:0.5;background-color:rgba(1, 2, 3, var(--un-bg-opacity));}
 .bg-\[rgba\(4_5_6\/0\.7\)\]{--un-bg-opacity:0.7;background-color:rgba(4, 5, 6, var(--un-bg-opacity));}

diff --git a/test/assets/preset-mini-targets.ts b/test/assets/preset-mini-targets.ts
@@ -282,6 +282,11 @@ export const presetMiniTargets: string[] = [
   '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',
   'ring-red2/5',