Skip to content

Commit

Permalink
feat(preset-wind): refactor bg-gradient (#1063)
Browse files Browse the repository at this point in the history
  • Loading branch information
@chu121su12
chu121su12 committed Jun 4, 2022
1 parent 723e79a commit b37e8f1
Show file tree
Hide file tree
Showing 3 changed files with 40 additions and 26 deletions.
34 changes: 24 additions & 10 deletions packages/preset-wind/src/rules/background.ts
View file
@@ -1,7 +1,25 @@
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 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)
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<Theme>) => {
const data = parseColor(body, theme)
Expand All @@ -14,23 +32,19 @@ 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-stops': 'var(--un-gradient-from), var(--un-gradient-to, rgba(255, 255, 255, 0))',
'--un-gradient-to': bgGradientToValue(cssColor),
'--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': bgGradientToValue(cssColor),
'--un-gradient-stops': `var(--un-gradient-from), ${colorString}, var(--un-gradient-to)`,
}
case 'to':
return {
Expand Down
4 changes: 2 additions & 2 deletions test/__snapshots__/preset-attributify.test.ts.snap
View file
Expand Up @@ -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(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-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(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;}
Expand Down
28 changes: 14 additions & 14 deletions test/__snapshots__/preset-wind.test.ts.snap
View file
Expand Up @@ -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(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-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(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));}
Expand All @@ -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(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-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(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))));}
Expand Down

0 comments on commit b37e8f1

Please sign in to comment.