From d1c97bb2adc23a4161bee881e88c021ccd11a224 Mon Sep 17 00:00:00 2001 From: Saya Date: Sat, 4 Jun 2022 18:23:53 +0800 Subject: [PATCH 1/3] extract gradient-to property --- packages/preset-wind/src/rules/background.ts | 6 ++-- .../preset-attributify.test.ts.snap | 4 +-- test/__snapshots__/preset-wind.test.ts.snap | 28 +++++++++---------- 3 files changed, 20 insertions(+), 18 deletions(-) diff --git a/packages/preset-wind/src/rules/background.ts b/packages/preset-wind/src/rules/background.ts index 4aaaca6e98..eecef6d0d2 100644 --- a/packages/preset-wind/src/rules/background.ts +++ b/packages/preset-wind/src/rules/background.ts @@ -26,11 +26,13 @@ const bgGradientColorResolver = (mode: 'from' | 'to' | 'via') => case 'from': return { '--un-gradient-from': colorString, - '--un-gradient-stops': 'var(--un-gradient-from), var(--un-gradient-to, rgba(255, 255, 255, 0))', + '--un-gradient-to': 'rgba(255, 255, 255, 0)', + '--un-gradient-stops': 'var(--un-gradient-from), var(--un-gradient-to)', } case 'via': return { - '--un-gradient-stops': `var(--un-gradient-from), ${colorString}, var(--un-gradient-to, rgba(255, 255, 255, 0))`, + '--un-gradient-to': 'rgba(255, 255, 255, 0)', + '--un-gradient-stops': `var(--un-gradient-from), ${colorString}, var(--un-gradient-to)`, } case 'to': return { diff --git a/test/__snapshots__/preset-attributify.test.ts.snap b/test/__snapshots__/preset-attributify.test.ts.snap index c4b6e520c6..a0445285c7 100644 --- a/test/__snapshots__/preset-attributify.test.ts.snap +++ b/test/__snapshots__/preset-attributify.test.ts.snap @@ -274,9 +274,9 @@ exports[`attributify > fixture2 1`] = ` [peer=\\"\\"]:focus~[peer-focus~=\\"scale-75\\"], [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-stops:var(--un-gradient-from), var(--un-gradient-to, rgba(255, 255, 255, 0));} +[bg-gradient~=\\"from-yellow-400\\"]{--un-gradient-from:rgba(250,204,21,var(--un-from-opacity, 1));--un-gradient-to:rgba(255, 255, 255, 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-stops:var(--un-gradient-from), rgba(239,68,68,var(--un-via-opacity, 1)), var(--un-gradient-to, rgba(255, 255, 255, 0));} +[bg-gradient~=\\"via-red-500\\"]{--un-gradient-to:rgba(255, 255, 255, 0);--un-gradient-stops:var(--un-gradient-from), rgba(239,68,68,var(--un-via-opacity, 1)), var(--un-gradient-to);} [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 321939a220..f122c7e9e9 100644 --- a/test/__snapshots__/preset-wind.test.ts.snap +++ b/test/__snapshots__/preset-wind.test.ts.snap @@ -202,14 +202,14 @@ exports[`preset-wind > targets 1`] = ` .bg-gradient-stops-\\\\[blue\\\\,pink\\\\], .stops-\\\\[blue\\\\,pink\\\\]{--un-gradient-stops:blue,pink;} .bg-gradient-from-current, -.from-current{--un-gradient-from:currentColor;--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to, rgba(255, 255, 255, 0));} -.bg-gradient-from-green-600{--un-gradient-from:rgba(22,163,74,var(--un-from-opacity, 1));--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to, rgba(255, 255, 255, 0));} -.bg-gradient-from-green-600\\\\/60{--un-gradient-from:rgba(22,163,74,0.6);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to, rgba(255, 255, 255, 0));} +.from-current{--un-gradient-from:currentColor;--un-gradient-to:rgba(255, 255, 255, 0);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} +.bg-gradient-from-green-600{--un-gradient-from:rgba(22,163,74,var(--un-from-opacity, 1));--un-gradient-to:rgba(255, 255, 255, 0);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} +.bg-gradient-from-green-600\\\\/60{--un-gradient-from:rgba(22,163,74,0.6);--un-gradient-to:rgba(255, 255, 255, 0);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} .bg-gradient-from-transparent, -.from-transparent{--un-gradient-from:transparent;--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to, rgba(255, 255, 255, 0));} -.from-\\\\$bg-from{--un-gradient-from:var(--bg-from);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to, rgba(255, 255, 255, 0));} -.from-green-500{--un-gradient-from:rgba(34,197,94,var(--un-from-opacity, 1));--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to, rgba(255, 255, 255, 0));} -.from-green-500\\\\/50{--un-gradient-from:rgba(34,197,94,0.5);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to, rgba(255, 255, 255, 0));} +.from-transparent{--un-gradient-from:transparent;--un-gradient-to:rgba(255, 255, 255, 0);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} +.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(255, 255, 255, 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(255, 255, 255, 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));} @@ -220,14 +220,14 @@ exports[`preset-wind > targets 1`] = ` .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-stops:var(--un-gradient-from), currentColor, var(--un-gradient-to, rgba(255, 255, 255, 0));} -.bg-gradient-via-green-600{--un-gradient-stops:var(--un-gradient-from), rgba(22,163,74,var(--un-via-opacity, 1)), var(--un-gradient-to, rgba(255, 255, 255, 0));} -.bg-gradient-via-green-600\\\\/40{--un-gradient-stops:var(--un-gradient-from), rgba(22,163,74,0.4), var(--un-gradient-to, rgba(255, 255, 255, 0));} +.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(255, 255, 255, 0);--un-gradient-stops:var(--un-gradient-from), rgba(22,163,74,var(--un-via-opacity, 1)), var(--un-gradient-to);} +.bg-gradient-via-green-600\\\\/40{--un-gradient-to:rgba(255, 255, 255, 0);--un-gradient-stops:var(--un-gradient-from), rgba(22,163,74,0.4), var(--un-gradient-to);} .bg-gradient-via-transparent, -.via-transparent{--un-gradient-stops:var(--un-gradient-from), transparent, var(--un-gradient-to, rgba(255, 255, 255, 0));} -.via-\\\\$bg-via{--un-gradient-stops:var(--un-gradient-from), var(--bg-via), var(--un-gradient-to, rgba(255, 255, 255, 0));} -.via-green-500{--un-gradient-stops:var(--un-gradient-from), rgba(34,197,94,var(--un-via-opacity, 1)), var(--un-gradient-to, rgba(255, 255, 255, 0));} -.via-green-500\\\\/30{--un-gradient-stops:var(--un-gradient-from), rgba(34,197,94,0.3), var(--un-gradient-to, rgba(255, 255, 255, 0));} +.via-transparent{--un-gradient-to:rgba(255, 255, 255, 0);--un-gradient-stops:var(--un-gradient-from), transparent, var(--un-gradient-to);} +.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(255, 255, 255, 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(255, 255, 255, 0);--un-gradient-stops:var(--un-gradient-from), rgba(34,197,94,0.3), var(--un-gradient-to);} .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))));} From c865e4fb968ac41f8eba3d00044ba1a6abd4dbd8 Mon Sep 17 00:00:00 2001 From: Saya Date: Sat, 4 Jun 2022 18:34:45 +0800 Subject: [PATCH 2/3] gradient-to use original color with 0 opacity --- packages/preset-wind/src/rules/background.ts | 25 ++++++++++------- .../preset-attributify.test.ts.snap | 4 +-- test/__snapshots__/preset-wind.test.ts.snap | 28 +++++++++---------- 3 files changed, 31 insertions(+), 26 deletions(-) diff --git a/packages/preset-wind/src/rules/background.ts b/packages/preset-wind/src/rules/background.ts index eecef6d0d2..bc7ea39352 100644 --- a/packages/preset-wind/src/rules/background.ts +++ b/packages/preset-wind/src/rules/background.ts @@ -1,7 +1,18 @@ -import type { Rule, RuleContext } from '@unocss/core' +import type { CSSColorValue, Rule, RuleContext } from '@unocss/core' import { colorOpacityToString, colorToString, handler as h, parseColor, positionMap } from '@unocss/preset-mini/utils' import type { Theme } from '@unocss/preset-mini' +const bgGradientColorValue = (mode: string, cssColor: CSSColorValue | undefined, color: string, alpha: any) => { + if (cssColor) { + if (alpha != null) + return colorToString(cssColor, alpha) + else + return colorToString(cssColor, `var(--un-${mode}-opacity, ${colorOpacityToString(cssColor)})`) + } + + return colorToString(color, alpha) +} + const bgGradientColorResolver = (mode: 'from' | 'to' | 'via') => ([, body]: string[], { theme }: RuleContext) => { const data = parseColor(body, theme) @@ -14,24 +25,18 @@ const bgGradientColorResolver = (mode: 'from' | 'to' | 'via') => if (!color) return - let colorString = color - if (cssColor) { - if (alpha != null) - colorString = colorToString(cssColor, alpha) - else - colorString = colorToString(cssColor, `var(--un-${mode}-opacity, ${colorOpacityToString(cssColor)})`) - } + const colorString = bgGradientColorValue(mode, cssColor, color, alpha) switch (mode) { case 'from': return { '--un-gradient-from': colorString, - '--un-gradient-to': 'rgba(255, 255, 255, 0)', + '--un-gradient-to': bgGradientColorValue(mode, cssColor, color, 0), '--un-gradient-stops': 'var(--un-gradient-from), var(--un-gradient-to)', } case 'via': return { - '--un-gradient-to': 'rgba(255, 255, 255, 0)', + '--un-gradient-to': bgGradientColorValue(mode, cssColor, color, 0), '--un-gradient-stops': `var(--un-gradient-from), ${colorString}, var(--un-gradient-to)`, } case 'to': diff --git a/test/__snapshots__/preset-attributify.test.ts.snap b/test/__snapshots__/preset-attributify.test.ts.snap index a0445285c7..e6be1382e9 100644 --- a/test/__snapshots__/preset-attributify.test.ts.snap +++ b/test/__snapshots__/preset-attributify.test.ts.snap @@ -274,9 +274,9 @@ exports[`attributify > fixture2 1`] = ` [peer=\\"\\"]:focus~[peer-focus~=\\"scale-75\\"], [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(255, 255, 255, 0);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} +[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(255, 255, 255, 0);--un-gradient-stops:var(--un-gradient-from), rgba(239,68,68,var(--un-via-opacity, 1)), var(--un-gradient-to);} +[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-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 f122c7e9e9..d9a8430240 100644 --- a/test/__snapshots__/preset-wind.test.ts.snap +++ b/test/__snapshots__/preset-wind.test.ts.snap @@ -202,14 +202,14 @@ exports[`preset-wind > targets 1`] = ` .bg-gradient-stops-\\\\[blue\\\\,pink\\\\], .stops-\\\\[blue\\\\,pink\\\\]{--un-gradient-stops:blue,pink;} .bg-gradient-from-current, -.from-current{--un-gradient-from:currentColor;--un-gradient-to:rgba(255, 255, 255, 0);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} -.bg-gradient-from-green-600{--un-gradient-from:rgba(22,163,74,var(--un-from-opacity, 1));--un-gradient-to:rgba(255, 255, 255, 0);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} -.bg-gradient-from-green-600\\\\/60{--un-gradient-from:rgba(22,163,74,0.6);--un-gradient-to:rgba(255, 255, 255, 0);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} +.from-current{--un-gradient-from:currentColor;--un-gradient-to:currentColor;--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} +.bg-gradient-from-green-600{--un-gradient-from:rgba(22,163,74,var(--un-from-opacity, 1));--un-gradient-to:rgba(22,163,74,0);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} +.bg-gradient-from-green-600\\\\/60{--un-gradient-from:rgba(22,163,74,0.6);--un-gradient-to:rgba(22,163,74,0);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} .bg-gradient-from-transparent, -.from-transparent{--un-gradient-from:transparent;--un-gradient-to:rgba(255, 255, 255, 0);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} -.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(255, 255, 255, 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(255, 255, 255, 0);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} +.from-transparent{--un-gradient-from:transparent;--un-gradient-to:transparent;--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} +.from-\\\\$bg-from{--un-gradient-from:var(--bg-from);--un-gradient-to:var(--bg-from);--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));} @@ -220,14 +220,14 @@ exports[`preset-wind > targets 1`] = ` .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(255, 255, 255, 0);--un-gradient-stops:var(--un-gradient-from), rgba(22,163,74,var(--un-via-opacity, 1)), var(--un-gradient-to);} -.bg-gradient-via-green-600\\\\/40{--un-gradient-to:rgba(255, 255, 255, 0);--un-gradient-stops:var(--un-gradient-from), rgba(22,163,74,0.4), var(--un-gradient-to);} +.via-current{--un-gradient-to:currentColor;--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);} +.bg-gradient-via-green-600\\\\/40{--un-gradient-to:rgba(22,163,74,0);--un-gradient-stops:var(--un-gradient-from), rgba(22,163,74,0.4), var(--un-gradient-to);} .bg-gradient-via-transparent, -.via-transparent{--un-gradient-to:rgba(255, 255, 255, 0);--un-gradient-stops:var(--un-gradient-from), transparent, var(--un-gradient-to);} -.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(255, 255, 255, 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(255, 255, 255, 0);--un-gradient-stops:var(--un-gradient-from), rgba(34,197,94,0.3), var(--un-gradient-to);} +.via-transparent{--un-gradient-to:transparent;--un-gradient-stops:var(--un-gradient-from), transparent, var(--un-gradient-to);} +.via-\\\\$bg-via{--un-gradient-to:var(--bg-via);--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-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))));} From 1377970369be54d5a318e555799cca3626392827 Mon Sep 17 00:00:00 2001 From: Saya Date: Sat, 4 Jun 2022 18:45:06 +0800 Subject: [PATCH 3/3] gradient-to revert to using white-transparent when the origin color is not parseable --- packages/preset-wind/src/rules/background.ts | 11 +++++++++-- test/__snapshots__/preset-wind.test.ts.snap | 12 ++++++------ 2 files changed, 15 insertions(+), 8 deletions(-) diff --git a/packages/preset-wind/src/rules/background.ts b/packages/preset-wind/src/rules/background.ts index bc7ea39352..221e2c4f43 100644 --- a/packages/preset-wind/src/rules/background.ts +++ b/packages/preset-wind/src/rules/background.ts @@ -2,6 +2,13 @@ import type { CSSColorValue, Rule, RuleContext } from '@unocss/core' import { colorOpacityToString, colorToString, handler as h, parseColor, positionMap } from '@unocss/preset-mini/utils' import type { Theme } from '@unocss/preset-mini' +const bgGradientToValue = (cssColor: CSSColorValue | undefined) => { + if (cssColor) + return colorToString(cssColor, 0) + + return 'rgba(255,255,255,0)' +} + const bgGradientColorValue = (mode: string, cssColor: CSSColorValue | undefined, color: string, alpha: any) => { if (cssColor) { if (alpha != null) @@ -31,12 +38,12 @@ const bgGradientColorResolver = (mode: 'from' | 'to' | 'via') => case 'from': return { '--un-gradient-from': colorString, - '--un-gradient-to': bgGradientColorValue(mode, cssColor, color, 0), + '--un-gradient-to': bgGradientToValue(cssColor), '--un-gradient-stops': 'var(--un-gradient-from), var(--un-gradient-to)', } case 'via': return { - '--un-gradient-to': bgGradientColorValue(mode, cssColor, color, 0), + '--un-gradient-to': bgGradientToValue(cssColor), '--un-gradient-stops': `var(--un-gradient-from), ${colorString}, var(--un-gradient-to)`, } case 'to': diff --git a/test/__snapshots__/preset-wind.test.ts.snap b/test/__snapshots__/preset-wind.test.ts.snap index d9a8430240..0bd07b4693 100644 --- a/test/__snapshots__/preset-wind.test.ts.snap +++ b/test/__snapshots__/preset-wind.test.ts.snap @@ -202,12 +202,12 @@ exports[`preset-wind > targets 1`] = ` .bg-gradient-stops-\\\\[blue\\\\,pink\\\\], .stops-\\\\[blue\\\\,pink\\\\]{--un-gradient-stops:blue,pink;} .bg-gradient-from-current, -.from-current{--un-gradient-from:currentColor;--un-gradient-to:currentColor;--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} +.from-current{--un-gradient-from:currentColor;--un-gradient-to:rgba(255,255,255,0);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} .bg-gradient-from-green-600{--un-gradient-from:rgba(22,163,74,var(--un-from-opacity, 1));--un-gradient-to:rgba(22,163,74,0);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} .bg-gradient-from-green-600\\\\/60{--un-gradient-from:rgba(22,163,74,0.6);--un-gradient-to:rgba(22,163,74,0);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} .bg-gradient-from-transparent, -.from-transparent{--un-gradient-from:transparent;--un-gradient-to:transparent;--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} -.from-\\\\$bg-from{--un-gradient-from:var(--bg-from);--un-gradient-to:var(--bg-from);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} +.from-transparent{--un-gradient-from:transparent;--un-gradient-to:rgba(255,255,255,0);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} +.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, @@ -220,12 +220,12 @@ exports[`preset-wind > targets 1`] = ` .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:currentColor;--un-gradient-stops:var(--un-gradient-from), currentColor, var(--un-gradient-to);} +.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);} .bg-gradient-via-green-600\\\\/40{--un-gradient-to:rgba(22,163,74,0);--un-gradient-stops:var(--un-gradient-from), rgba(22,163,74,0.4), var(--un-gradient-to);} .bg-gradient-via-transparent, -.via-transparent{--un-gradient-to:transparent;--un-gradient-stops:var(--un-gradient-from), transparent, var(--un-gradient-to);} -.via-\\\\$bg-via{--un-gradient-to:var(--bg-via);--un-gradient-stops:var(--un-gradient-from), var(--bg-via), var(--un-gradient-to);} +.via-transparent{--un-gradient-to:rgba(255,255,255,0);--un-gradient-stops:var(--un-gradient-from), transparent, var(--un-gradient-to);} +.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-via-opacity-40{--un-via-opacity:0.4;}