Skip to content

Commit

Permalink
feat(preset-wind): support linear-gradient percent (#2424)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Simon-He95
Simon-He95 committed Apr 8, 2023
1 parent c856379 commit 94bdb27
Show file tree
Hide file tree
Showing 6 changed files with 75 additions and 50 deletions.
21 changes: 16 additions & 5 deletions packages/preset-wind/src/rules/background.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,23 +37,34 @@ function bgGradientColorResolver(mode: 'from' | 'to' | 'via') {
switch (mode) {
case 'from':
return {
'--un-gradient-from': colorString,
'--un-gradient-to': bgGradientToValue(cssColor),
'--un-gradient-from-position': '0%',
'--un-gradient-from': `${colorString} var(--un-gradient-from-position)`,
'--un-gradient-to': `${bgGradientToValue(cssColor)} var(--un-gradient-to-position)`,
'--un-gradient-stops': 'var(--un-gradient-from), var(--un-gradient-to)',
}
case 'via':
return {
'--un-gradient-via-position': '50%',
'--un-gradient-to': bgGradientToValue(cssColor),
'--un-gradient-stops': `var(--un-gradient-from), ${colorString}, var(--un-gradient-to)`,
'--un-gradient-stops': `var(--un-gradient-from), ${colorString} var(--un-gradient-via-position), var(--un-gradient-to)`,
}
case 'to':
return {
'--un-gradient-to': colorString,
'--un-gradient-to-position': '100%',
'--un-gradient-to': `${colorString} var(--un-gradient-to-position)`,
}
}
}
}

function bgGradientPositionResolver() {
return ([, mode, body]: string[]) => {
return {
[`--un-gradient-${mode}-position`]: `${Number(h.bracket.cssvar.percent(body)) * 100}%`,
}
}
}

const bgUrlRE = /^\[url\(.+\)\]$/
const bgLengthRE = /^\[length:.+\]$/
const bgPositionRE = /^\[position:.+\]$/
Expand All @@ -78,7 +89,7 @@ export const backgroundStyles: Rule[] = [
[/^(?:bg-gradient-)?from-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ '--un-from-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) })],

[/^(from|via|to)-([\d\.]+)%$/, bgGradientPositionResolver()],
// images
[/^bg-gradient-((?:repeating-)?(?:linear|radial|conic))$/, ([, s]) => ({
'background-image': `${s}-gradient(var(--un-gradient, var(--un-gradient-stops, rgba(255, 255, 255, 0))))`,
Expand Down
5 changes: 5 additions & 0 deletions test/__snapshots__/cli.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,11 @@ exports[`cli > supports unocss.config.js 1`] = `
.box{margin-left:auto;margin-right:auto;max-width:80rem;border-radius:0.375rem;--un-bg-opacity:1;background-color:rgba(243,244,246,var(--un-bg-opacity));padding:1rem;--un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgba(0,0,0,0.05));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}"
`;

exports[`cli > supports unocss.config.ts changed rebuild 1`] = `
"/* layer: shortcuts */
.box{margin-left:auto;margin-right:auto;max-width:80rem;border-radius:0.375rem;--un-bg-opacity:1;background-color:rgba(243,244,246,var(--un-bg-opacity));padding:1rem;--un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgba(0,0,0,0.05));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}"
`;

exports[`cli > supports variantGroup transformer 1`] = `
"/* layer: default */
.border-red{--un-border-opacity:1;border-color:rgba(248,113,113,var(--un-border-opacity));}
Expand Down
45 changes: 24 additions & 21 deletions test/__snapshots__/postcss.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -215,34 +215,37 @@ exports[`postcss > @unocss 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(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);}
.from-current{--un-gradient-from-position:0%;--un-gradient-from:currentColor var(--un-gradient-from-position);--un-gradient-to:rgba(255,255,255,0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);}
.bg-gradient-from-green-600{--un-gradient-from-position:0%;--un-gradient-from:rgba(22,163,74,var(--un-from-opacity, 1)) var(--un-gradient-from-position);--un-gradient-to:rgba(22,163,74,0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);}
.bg-gradient-from-green-600\\\\/60{--un-gradient-from-position:0%;--un-gradient-from:rgba(22,163,74,0.6) var(--un-gradient-from-position);--un-gradient-to:rgba(22,163,74,0) var(--un-gradient-to-position);--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(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);}
.from-transparent{--un-gradient-from-position:0%;--un-gradient-from:transparent var(--un-gradient-from-position);--un-gradient-to:rgba(255,255,255,0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);}
.from-\\\\$bg-from{--un-gradient-from-position:0%;--un-gradient-from:var(--bg-from) var(--un-gradient-from-position);--un-gradient-to:rgba(255,255,255,0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);}
.from-green-500{--un-gradient-from-position:0%;--un-gradient-from:rgba(34,197,94,var(--un-from-opacity, 1)) var(--un-gradient-from-position);--un-gradient-to:rgba(34,197,94,0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);}
.from-green-500\\\\/50{--un-gradient-from-position:0%;--un-gradient-from:rgba(34,197,94,0.5) var(--un-gradient-from-position);--un-gradient-to:rgba(34,197,94,0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);}
.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);}
.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);}
.via-current{--un-gradient-via-position:50%;--un-gradient-to:rgba(255,255,255,0);--un-gradient-stops:var(--un-gradient-from), currentColor var(--un-gradient-via-position), var(--un-gradient-to);}
.bg-gradient-via-green-600{--un-gradient-via-position:50%;--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-via-position), var(--un-gradient-to);}
.bg-gradient-via-green-600\\\\/40{--un-gradient-via-position:50%;--un-gradient-to:rgba(22,163,74,0);--un-gradient-stops:var(--un-gradient-from), rgba(22,163,74,0.4) var(--un-gradient-via-position), 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(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);}
.via-transparent{--un-gradient-via-position:50%;--un-gradient-to:rgba(255,255,255,0);--un-gradient-stops:var(--un-gradient-from), transparent var(--un-gradient-via-position), var(--un-gradient-to);}
.via-\\\\$bg-via{--un-gradient-via-position:50%;--un-gradient-to:rgba(255,255,255,0);--un-gradient-stops:var(--un-gradient-from), var(--bg-via) var(--un-gradient-via-position), var(--un-gradient-to);}
.via-green-500{--un-gradient-via-position:50%;--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-via-position), var(--un-gradient-to);}
.via-green-500\\\\/30{--un-gradient-via-position:50%;--un-gradient-to:rgba(34,197,94,0);--un-gradient-stops:var(--un-gradient-from), rgba(34,197,94,0.3) var(--un-gradient-via-position), 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);}
.to-current{--un-gradient-to-position:100%;--un-gradient-to:currentColor var(--un-gradient-to-position);}
.bg-gradient-to-green-600{--un-gradient-to-position:100%;--un-gradient-to:rgba(22,163,74,var(--un-to-opacity, 1)) var(--un-gradient-to-position);}
.bg-gradient-to-green-600\\\\/60{--un-gradient-to-position:100%;--un-gradient-to:rgba(22,163,74,0.6) var(--un-gradient-to-position);}
.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);}
.to-transparent{--un-gradient-to-position:100%;--un-gradient-to:transparent var(--un-gradient-to-position);}
.to-\\\\$bg-to{--un-gradient-to-position:100%;--un-gradient-to:var(--bg-to) var(--un-gradient-to-position);}
.to-green-500{--un-gradient-to-position:100%;--un-gradient-to:rgba(34,197,94,var(--un-to-opacity, 1)) var(--un-gradient-to-position);}
.to-green-500\\\\/50{--un-gradient-to-position:100%;--un-gradient-to:rgba(34,197,94,0.5) var(--un-gradient-to-position);}
.bg-gradient-via-opacity-40{--un-via-opacity:0.4;}
.via-opacity-30{--un-via-opacity:0.3;}
.from-10\\\\%{--un-gradient-from-position:10%;}
.to-90\\\\%{--un-gradient-to-position:90%;}
.via-20\\\\%{--un-gradient-via-position:20%;}
.bg-gradient-linear{background-image:linear-gradient(var(--un-gradient, var(--un-gradient-stops, rgba(255, 255, 255, 0))));}
.bg-gradient-radial{background-image:radial-gradient(var(--un-gradient, var(--un-gradient-stops, rgba(255, 255, 255, 0))));}
.bg-gradient-repeating-conic{background-image:repeating-conic-gradient(var(--un-gradient, var(--un-gradient-stops, rgba(255, 255, 255, 0))));}
Expand Down
6 changes: 3 additions & 3 deletions test/__snapshots__/preset-attributify.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -250,9 +250,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=\\"\\"]{-webkit-user-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~=\\"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~=\\"from-yellow-400\\"]{--un-gradient-from-position:0%;--un-gradient-from:rgba(250,204,21,var(--un-from-opacity, 1)) var(--un-gradient-from-position);--un-gradient-to:rgba(250,204,21,0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);}
[bg-gradient~=\\"via-red-500\\"]{--un-gradient-via-position:50%;--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-via-position), var(--un-gradient-to);}
[bg-gradient~=\\"to-pink-500\\"]{--un-gradient-to-position:100%;--un-gradient-to:rgba(236,72,153,var(--un-to-opacity, 1)) var(--un-gradient-to-position);}
[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

0 comments on commit 94bdb27

Please sign in to comment.