fix(preset-wind): fix background gradient stop order (#1138)

unocss · Jun 24, 2022 · 5340852 · 5340852
1 parent 5bb7b0a
commit 5340852
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 12 deletions.
diff --git a/packages/preset-wind/src/rules/background.ts b/packages/preset-wind/src/rules/background.ts
@@ -72,11 +72,11 @@ export const backgroundStyles: Rule[] = [
   }],
   [/^(?:bg-gradient-)?stops-(\[.+\])$/, ([, s]) => ({ '--un-gradient-stops': h.bracket(s) })],
   [/^(?:bg-gradient-)?from-(.+)$/, bgGradientColorResolver('from')],
-  [/^(?:bg-gradient-)?to-(.+)$/, bgGradientColorResolver('to')],
   [/^(?:bg-gradient-)?via-(.+)$/, bgGradientColorResolver('via')],
+  [/^(?:bg-gradient-)?to-(.+)$/, bgGradientColorResolver('to')],
   [/^(?:bg-gradient-)?from-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ '--un-from-opacity': h.bracket.percent(opacity) })],
-  [/^(?:bg-gradient-)?to-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ '--un-to-opacity': h.bracket.percent(opacity) })],
   [/^(?:bg-gradient-)?via-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ '--un-via-opacity': h.bracket.percent(opacity) })],
+  [/^(?:bg-gradient-)?to-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ '--un-to-opacity': h.bracket.percent(opacity) })],
 
   // images
   [/^bg-gradient-((?:repeating-)?(?:linear|radial|conic))$/, ([, s]) => ({

diff --git a/test/__snapshots__/preset-attributify.test.ts.snap b/test/__snapshots__/preset-attributify.test.ts.snap
@@ -237,8 +237,8 @@ exports[`attributify > fixture2 1`] = `
 [peer=\\"\\"]:not(:placeholder-shown)~[peer-not-placeholder-shown~=\\"scale-75\\"]{--un-scale-x:0.75;--un-scale-y:0.75;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
 [select-none=\\"\\"]{user-select:none;}
 [bg-gradient~=\\"from-yellow-400\\"]{--un-gradient-from:rgba(250,204,21,var(--un-from-opacity, 1));--un-gradient-to:rgba(250,204,21,0);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);}
-[bg-gradient~=\\"to-pink-500\\"]{--un-gradient-to:rgba(236,72,153,var(--un-to-opacity, 1));}
 [bg-gradient~=\\"via-red-500\\"]{--un-gradient-to:rgba(239,68,68,0);--un-gradient-stops:var(--un-gradient-from), rgba(239,68,68,var(--un-via-opacity, 1)), var(--un-gradient-to);}
+[bg-gradient~=\\"to-pink-500\\"]{--un-gradient-to:rgba(236,72,153,var(--un-to-opacity, 1));}
 [bg-gradient~=\\"to-r\\"]{--un-gradient-shape:to right;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));}
 [p-10=\\"\\"]{padding:2.5rem;}
 [px-4=\\"\\"]{padding-left:1rem;padding-right:1rem;}

diff --git a/test/__snapshots__/preset-wind.test.ts.snap b/test/__snapshots__/preset-wind.test.ts.snap
@@ -206,15 +206,6 @@ exports[`preset-wind > targets 1`] = `
 .from-\\\\$bg-from{--un-gradient-from:var(--bg-from);--un-gradient-to:rgba(255,255,255,0);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);}
 .from-green-500{--un-gradient-from:rgba(34,197,94,var(--un-from-opacity, 1));--un-gradient-to:rgba(34,197,94,0);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);}
 .from-green-500\\\\/50{--un-gradient-from:rgba(34,197,94,0.5);--un-gradient-to:rgba(34,197,94,0);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);}
-.bg-gradient-to-current,
-.to-current{--un-gradient-to:currentColor;}
-.bg-gradient-to-green-600{--un-gradient-to:rgba(22,163,74,var(--un-to-opacity, 1));}
-.bg-gradient-to-green-600\\\\/60{--un-gradient-to:rgba(22,163,74,0.6);}
-.bg-gradient-to-transparent,
-.to-transparent{--un-gradient-to:transparent;}
-.to-\\\\$bg-to{--un-gradient-to:var(--bg-to);}
-.to-green-500{--un-gradient-to:rgba(34,197,94,var(--un-to-opacity, 1));}
-.to-green-500\\\\/50{--un-gradient-to:rgba(34,197,94,0.5);}
 .bg-gradient-via-current,
 .via-current{--un-gradient-to:rgba(255,255,255,0);--un-gradient-stops:var(--un-gradient-from), currentColor, var(--un-gradient-to);}
 .bg-gradient-via-green-600{--un-gradient-to:rgba(22,163,74,0);--un-gradient-stops:var(--un-gradient-from), rgba(22,163,74,var(--un-via-opacity, 1)), var(--un-gradient-to);}
@@ -224,6 +215,15 @@ exports[`preset-wind > targets 1`] = `
 .via-\\\\$bg-via{--un-gradient-to:rgba(255,255,255,0);--un-gradient-stops:var(--un-gradient-from), var(--bg-via), var(--un-gradient-to);}
 .via-green-500{--un-gradient-to:rgba(34,197,94,0);--un-gradient-stops:var(--un-gradient-from), rgba(34,197,94,var(--un-via-opacity, 1)), var(--un-gradient-to);}
 .via-green-500\\\\/30{--un-gradient-to:rgba(34,197,94,0);--un-gradient-stops:var(--un-gradient-from), rgba(34,197,94,0.3), var(--un-gradient-to);}
+.bg-gradient-to-current,
+.to-current{--un-gradient-to:currentColor;}
+.bg-gradient-to-green-600{--un-gradient-to:rgba(22,163,74,var(--un-to-opacity, 1));}
+.bg-gradient-to-green-600\\\\/60{--un-gradient-to:rgba(22,163,74,0.6);}
+.bg-gradient-to-transparent,
+.to-transparent{--un-gradient-to:transparent;}
+.to-\\\\$bg-to{--un-gradient-to:var(--bg-to);}
+.to-green-500{--un-gradient-to:rgba(34,197,94,var(--un-to-opacity, 1));}
+.to-green-500\\\\/50{--un-gradient-to:rgba(34,197,94,0.5);}
 .bg-gradient-via-opacity-40{--un-via-opacity:0.4;}
 .via-opacity-30{--un-via-opacity:0.3;}
 .bg-gradient-linear{background-image:linear-gradient(var(--un-gradient, var(--un-gradient-stops, rgba(255, 255, 255, 0))));}