From 53408527355df4599c00f2d09af842adbc8e541d Mon Sep 17 00:00:00 2001 From: tammai-bigin <101083410+tammai-bigin@users.noreply.github.com> Date: Fri, 24 Jun 2022 16:11:24 +0700 Subject: [PATCH] fix(preset-wind): fix background gradient stop order (#1138) --- packages/preset-wind/src/rules/background.ts | 4 ++-- .../preset-attributify.test.ts.snap | 2 +- test/__snapshots__/preset-wind.test.ts.snap | 18 +++++++++--------- 3 files changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/preset-wind/src/rules/background.ts b/packages/preset-wind/src/rules/background.ts index 221e2c4f43..5f0e3abf28 100644 --- 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 index 420a7dba08..add683e3d7 100644 --- 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 index 9467e3d4d8..f755a34d29 100644 --- 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))));}