Skip to content

Commit

Permalink
feat(preset-mini): enable to use css variable for opacities rule (#2494)
Browse files Browse the repository at this point in the history
  • Loading branch information
@praburangki
praburangki committed Apr 12, 2023
1 parent 680b917 commit 6b39445
Show file tree
Hide file tree
Showing 9 changed files with 33 additions and 11 deletions.
2 changes: 1 addition & 1 deletion packages/preset-mini/src/_rules/border.ts
View file
Expand Up @@ -106,7 +106,7 @@ function handlerBorderColor([, a = '', c]: string[], { theme }: RuleContext<Them
}

function handlerBorderOpacity([, a = '', opacity]: string[]): CSSEntries | undefined {
const v = h.bracket.percent(opacity)
const v = h.bracket.percent.cssvar(opacity)
if (a in directionMap && v != null)
return directionMap[a].map(i => [`--un-border${i}-opacity`, v])
}
Expand Down
4 changes: 2 additions & 2 deletions packages/preset-mini/src/_rules/color.ts
View file
Expand Up @@ -17,10 +17,10 @@ export const textColors: Rule[] = [
// auto detection and fallback to font-size if the content looks like a size
[/^text-(.+)$/, colorResolver('color', 'text', css => !css.color?.toString().match(numberWithUnitRE)), { autocomplete: 'text-$colors' }],
[/^(?:text|color|c)-(.+)$/, ([, v]) => globalKeywords.includes(v) ? { color: v } : undefined, { autocomplete: `(text|color|c)-(${globalKeywords.join('|')})` }],
[/^(?:text|color|c)-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ '--un-text-opacity': h.bracket.percent(opacity) }), { autocomplete: '(text|color|c)-(op|opacity)-<percent>' }],
[/^(?:text|color|c)-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ '--un-text-opacity': h.bracket.percent.cssvar(opacity) }), { autocomplete: '(text|color|c)-(op|opacity)-<percent>' }],
]

export const bgColors: Rule[] = [
[/^bg-(.+)$/, colorResolver('background-color', 'bg'), { autocomplete: 'bg-$colors' }],
[/^bg-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ '--un-bg-opacity': h.bracket.percent(opacity) }), { autocomplete: 'bg-(op|opacity)-<percent>' }],
[/^bg-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ '--un-bg-opacity': h.bracket.percent.cssvar(opacity) }), { autocomplete: 'bg-(op|opacity)-<percent>' }],
]
2 changes: 1 addition & 1 deletion packages/preset-mini/src/_rules/decoration.ts
View file
Expand Up @@ -21,7 +21,7 @@ export const textDecorations: Rule<Theme>[] = [
}
}
}, { autocomplete: '(underline|decoration)-$colors' }],
[/^(?:underline|decoration)-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ '--un-line-opacity': h.bracket.percent(opacity) }), { autocomplete: '(underline|decoration)-(op|opacity)-<percent>' }],
[/^(?:underline|decoration)-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ '--un-line-opacity': h.bracket.percent.cssvar(opacity) }), { autocomplete: '(underline|decoration)-(op|opacity)-<percent>' }],

// offset
[/^(?:underline|decoration)-offset-(.+)$/, ([, s], { theme }) => ({ 'text-underline-offset': theme.lineWidth?.[s] ?? h.auto.bracket.cssvar.global.px(s) }), { autocomplete: '(underline|decoration)-(offset)-<num>' }],
Expand Down
4 changes: 2 additions & 2 deletions packages/preset-mini/src/_rules/ring.ts
View file
Expand Up @@ -33,11 +33,11 @@ export const rings: Rule<Theme>[] = [

// colors
[/^ring-(.+)$/, colorResolver('--un-ring-color', 'ring'), { autocomplete: 'ring-$colors' }],
[/^ring-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ '--un-ring-opacity': h.bracket.percent(opacity) }), { autocomplete: 'ring-(op|opacity)-<percent>' }],
[/^ring-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ '--un-ring-opacity': h.bracket.percent.cssvar(opacity) }), { autocomplete: 'ring-(op|opacity)-<percent>' }],

// offset color
[/^ring-offset-(.+)$/, colorResolver('--un-ring-offset-color', 'ring-offset'), { autocomplete: 'ring-offset-$colors' }],
[/^ring-offset-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ '--un-ring-offset-opacity': h.bracket.percent(opacity) }), { autocomplete: 'ring-offset-(op|opacity)-<percent>' }],
[/^ring-offset-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ '--un-ring-offset-opacity': h.bracket.percent.cssvar(opacity) }), { autocomplete: 'ring-offset-(op|opacity)-<percent>' }],

// style
['ring-inset', { '--un-ring-inset': 'inset' }],
Expand Down
2 changes: 1 addition & 1 deletion packages/preset-mini/src/_rules/shadow.ts
View file
Expand Up @@ -26,7 +26,7 @@ export const boxShadows: Rule<Theme>[] = [
}
return colorResolver('--un-shadow-color', 'shadow')(match, context)
}, { autocomplete: ['shadow-$colors', 'shadow-$boxShadow'] }],
[/^shadow-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ '--un-shadow-opacity': h.bracket.percent(opacity) }), { autocomplete: 'shadow-(op|opacity)-<percent>' }],
[/^shadow-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ '--un-shadow-opacity': h.bracket.percent.cssvar(opacity) }), { autocomplete: 'shadow-(op|opacity)-<percent>' }],

// inset
['shadow-inset', { '--un-shadow-inset': 'inset' }],
Expand Down
4 changes: 2 additions & 2 deletions packages/preset-mini/src/_rules/svg.ts
View file
Expand Up @@ -5,7 +5,7 @@ import { colorResolver, handler as h } from '../utils'
export const svgUtilities: Rule<Theme>[] = [
// fills
[/^fill-(.+)$/, colorResolver('fill', 'fill'), { autocomplete: 'fill-$colors' }],
[/^fill-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ '--un-fill-opacity': h.bracket.percent(opacity) }), { autocomplete: 'fill-(op|opacity)-<percent>' }],
[/^fill-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ '--un-fill-opacity': h.bracket.percent.cssvar(opacity) }), { autocomplete: 'fill-(op|opacity)-<percent>' }],
['fill-none', { fill: 'none' }],

// stroke size
Expand All @@ -17,7 +17,7 @@ export const svgUtilities: Rule<Theme>[] = [

// stroke colors
[/^stroke-(.+)$/, colorResolver('stroke', 'stroke'), { autocomplete: 'stroke-$colors' }],
[/^stroke-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ '--un-stroke-opacity': h.bracket.percent(opacity) }), { autocomplete: 'stroke-(op|opacity)-<percent>' }],
[/^stroke-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ '--un-stroke-opacity': h.bracket.percent.cssvar(opacity) }), { autocomplete: 'stroke-(op|opacity)-<percent>' }],

// line cap
['stroke-cap-square', { 'stroke-linecap': 'square' }],
Expand Down
4 changes: 2 additions & 2 deletions packages/preset-mini/src/_rules/typography.ts
View file
Expand Up @@ -122,7 +122,7 @@ export const textStrokes: Rule<Theme>[] = [

// colors
[/^text-stroke-(.+)$/, colorResolver('-webkit-text-stroke-color', 'text-stroke'), { autocomplete: 'text-stroke-$colors' }],
[/^text-stroke-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ '--un-text-stroke-opacity': h.bracket.percent(opacity) }), { autocomplete: 'text-stroke-(op|opacity)-<percent>' }],
[/^text-stroke-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ '--un-text-stroke-opacity': h.bracket.percent.cssvar(opacity) }), { autocomplete: 'text-stroke-(op|opacity)-<percent>' }],
]

export const textShadows: Rule<Theme>[] = [
Expand All @@ -139,5 +139,5 @@ export const textShadows: Rule<Theme>[] = [

// colors
[/^text-shadow-color-(.+)$/, colorResolver('--un-text-shadow-color', 'text-shadow'), { autocomplete: 'text-shadow-color-$colors' }],
[/^text-shadow-color-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ '--un-text-shadow-opacity': h.bracket.percent(opacity) }), { autocomplete: 'text-shadow-color-(op|opacity)-<percent>' }],
[/^text-shadow-color-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ '--un-text-shadow-opacity': h.bracket.percent.cssvar(opacity) }), { autocomplete: 'text-shadow-color-(op|opacity)-<percent>' }],
]
11 changes: 11 additions & 0 deletions test/assets/output/preset-mini-targets.css
View file
Expand Up @@ -144,12 +144,14 @@ unocss .scope-\[unocss\]\:block{display:block;}
.marker\:bg-violet-200::marker{--un-bg-opacity:1;background-color:rgba(221,214,254,var(--un-bg-opacity));}
.peer:checked~.peer-checked\:bg-blue-500{--un-bg-opacity:1;background-color:rgba(59,130,246,var(--un-bg-opacity));}
.previous\/label:checked+.previous-checked\/label\:bg-red-500{--un-bg-opacity:1;background-color:rgba(239,68,68,var(--un-bg-opacity));}
.bg-opacity-\$opacity-variable{--un-bg-opacity:var(--opacity-variable);}
.bg-opacity-45{--un-bg-opacity:0.45;}
.all-\[svg\]\:fill-red svg{--un-fill-opacity:1;fill:rgba(248,113,113,var(--un-fill-opacity));}
.fill-\[\#123\]{--un-fill-opacity:1;fill:rgba(17,34,51,var(--un-fill-opacity));}
.fill-\[1rem\]{fill:1rem;}
.fill-current{fill:currentColor;}
.fill-green-400{--un-fill-opacity:1;fill:rgba(74,222,128,var(--un-fill-opacity));}
.fill-opacity-\$opacity-variable{--un-fill-opacity:var(--opacity-variable);}
.fill-opacity-80{--un-fill-opacity:0.8;}
.fill-none{fill:none;}
.stroke-size-\[1rem\],
Expand All @@ -173,6 +175,7 @@ unocss .scope-\[unocss\]\:block{display:block;}
.stroke-\[1rem\]{stroke:1rem;}
.stroke-current{stroke:currentColor;}
.stroke-green-400{--un-stroke-opacity:1;stroke:rgba(74,222,128,var(--un-stroke-opacity));}
.stroke-opacity-\$opacity-variable{--un-stroke-opacity:var(--opacity-variable);}
.stroke-opacity-80{--un-stroke-opacity:0.8;}
.stroke-cap-round{stroke-linecap:round;}
.stroke-cap-auto{stroke-linecap:butt;}
Expand Down Expand Up @@ -228,6 +231,7 @@ unocss .scope-\[unocss\]\:block{display:block;}
.border-t-\[\#124\]{--un-border-opacity:1;--un-border-top-opacity:var(--un-border-opacity);border-top-color:rgba(17,34,68,var(--un-border-top-opacity));}
.border-t-\$color{border-top-color:var(--color);}
.border-t-black\/10{border-top-color:rgba(0,0,0,0.1);}
.border-opacity-\$opacity-variable{--un-border-opacity:var(--opacity-variable);}
.border-opacity-20{--un-border-opacity:0.2;}
.border-y-op-30{--un-border-top-opacity:0.3;--un-border-bottom-opacity:0.3;}
.border-b-op40{--un-border-bottom-opacity:0.4;}
Expand Down Expand Up @@ -386,6 +390,7 @@ unocss .scope-\[unocss\]\:block{display:block;}
.decoration-purple\/50{-webkit-text-decoration-color:rgba(192,132,252,0.5);text-decoration-color:rgba(192,132,252,0.5);}
.decoration-transparent{-webkit-text-decoration-color:transparent;text-decoration-color:transparent;}
.underline-red-500{-webkit-text-decoration-color:rgba(239,68,68,var(--un-line-opacity));--un-line-opacity:1;text-decoration-color:rgba(239,68,68,var(--un-line-opacity));}
.underline-op-\$opacity-variable{--un-line-opacity:var(--opacity-variable);}
.underline-op80{--un-line-opacity:0.8;}
.decoration-offset-0\.6rem,
.underline-offset-0\.6rem{text-underline-offset:0.6rem;}
Expand All @@ -398,12 +403,14 @@ unocss .scope-\[unocss\]\:block{display:block;}
.text-stroke-6{-webkit-text-stroke-width:6px;}
.text-stroke-sm{-webkit-text-stroke-width:thin;}
.text-stroke-blue-500{--un-text-stroke-opacity:1;-webkit-text-stroke-color:rgba(59,130,246,var(--un-text-stroke-opacity));}
.text-stroke-op-\$opacity-variable{--un-text-stroke-opacity:var(--opacity-variable);}
.text-stroke-op-60{--un-text-stroke-opacity:0.6;}
.text-shadow{--un-text-shadow:0 0 1px var(--un-text-shadow-color, rgba(0,0,0,0.2)),0 0 1px var(--un-text-shadow-color, rgba(1,0,5,0.1));text-shadow:var(--un-text-shadow);}
.text-shadow-\$var{text-shadow:var(--var);}
.text-shadow-lg{--un-text-shadow:3px 3px 6px var(--un-text-shadow-color, rgba(0,0,0,0.26)),0 0 5px var(--un-text-shadow-color, rgba(15,3,86,0.22));text-shadow:var(--un-text-shadow);}
.text-shadow-none{--un-text-shadow:0 0 var(--un-text-shadow-color, rgba(0,0,0,0));text-shadow:var(--un-text-shadow);}
.text-shadow-color-red-300{--un-text-shadow-opacity:1;--un-text-shadow-color:rgba(252,165,165,var(--un-text-shadow-opacity));}
.text-shadow-color-op-\$opacity-variable{--un-text-shadow-opacity:var(--opacity-variable);}
.text-shadow-color-op-30{--un-text-shadow-opacity:0.3;}
.case-upper{text-transform:uppercase;}
.case-normal{text-transform:none;}
Expand Down Expand Up @@ -489,6 +496,7 @@ unocss .scope-\[unocss\]\:block{display:block;}
.text-revert{color:revert;}
.placeholder-color-opacity-60::placeholder{--un-text-opacity:0.6;}
.text-opacity-\[13\.3333333\%\]{--un-text-opacity:13.3333333%;}
.text-opacity-\$opacity-variable{--un-text-opacity:var(--opacity-variable);}
.font-italic,
.italic{font-style:italic;}
.font-oblique,
Expand All @@ -506,6 +514,7 @@ unocss .scope-\[unocss\]\:block{display:block;}
.shadow-none{--un-shadow:0 0 var(--un-shadow-color, rgba(0,0,0,0));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
.shadow-transparent{--un-shadow-color:transparent;}
.shadow-xl{--un-shadow:var(--un-shadow-inset) 0 20px 25px -5px var(--un-shadow-color, rgba(0,0,0,0.1)),var(--un-shadow-inset) 0 8px 10px -6px var(--un-shadow-color, rgba(0,0,0,0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
.shadow-op-\$opacity-variable{--un-shadow-opacity:var(--opacity-variable);}
.shadow-op-50{--un-shadow-opacity:0.5;}
.shadow-inset{--un-shadow-inset:inset;}
.ring,
Expand All @@ -521,11 +530,13 @@ unocss .scope-\[unocss\]\:block{display:block;}
.ring-offset-width-\$variable{--un-ring-offset-width:var(--variable);}
.ring-red2{--un-ring-opacity:1;--un-ring-color:rgba(254,202,202,var(--un-ring-opacity));}
.ring-red2\/5{--un-ring-color:rgba(254,202,202,0.05);}
.ring-op-\$opacity-variable{--un-ring-opacity:var(--opacity-variable);}
.ring-op-5{--un-ring-opacity:0.05;}
.ring-offset-\$variable{--un-ring-offset-color:var(--variable);}
.ring-offset-green5{--un-ring-offset-opacity:1;--un-ring-offset-color:rgba(34,197,94,var(--un-ring-offset-opacity));}
.ring-offset-red2{--un-ring-offset-opacity:1;--un-ring-offset-color:rgba(254,202,202,var(--un-ring-offset-opacity));}
.ring-offset-red2\/5{--un-ring-offset-color:rgba(254,202,202,0.05);}
.ring-offset-op-\$opacity-variable{--un-ring-offset-opacity:var(--opacity-variable);}
.ring-offset-op-5{--un-ring-offset-opacity:0.05;}
.ring-inset{--un-ring-inset:inset;}
.flex{display:flex;}
Expand Down
11 changes: 11 additions & 0 deletions test/assets/preset-mini-targets.ts
View file
Expand Up @@ -145,6 +145,7 @@ export const presetMiniTargets: string[] = [
'border-[var(--color)]',
'border-green-100/20',
'border-opacity-20',
'border-opacity-$opacity-variable',
'border-y-red',
'border-y-op-30',
'border-x-[rgb(1,2,3)]/[0.5]',
Expand Down Expand Up @@ -218,6 +219,7 @@ export const presetMiniTargets: string[] = [
'text-red100',
'text-red2',
'text-opacity-[13.3333333%]',
'text-opacity-$opacity-variable',
'text-[var(--color)]',
'text-[#124]',
'text-[2em]',
Expand Down Expand Up @@ -248,6 +250,7 @@ export const presetMiniTargets: string[] = [
'bg-teal-500/[55%]',
'bg-hex-452233/40',
'bg-opacity-45',
'bg-opacity-$opacity-variable',

// color - ring
'ring-red2',
Expand All @@ -256,9 +259,11 @@ export const presetMiniTargets: string[] = [
'ring-width-px',
'ring-size-px',
'ring-op-5',
'ring-op-$opacity-variable',
'ring-offset-red2',
'ring-offset-red2/5',
'ring-offset-op-5',
'ring-offset-op-$opacity-variable',

// decoration
'decoration-none',
Expand All @@ -274,6 +279,7 @@ export const presetMiniTargets: string[] = [
'underline-dashed',
'underline-red-500',
'underline-op80',
'underline-op-$opacity-variable',
'underline-auto',
'underline-inherit',
'underline-5',
Expand Down Expand Up @@ -448,6 +454,7 @@ export const presetMiniTargets: string[] = [
'shadow-green-900/50',
'shadow-[#fff]',
'shadow-op-50',
'shadow-op-$opacity-variable',
'shadow-inset',
'shadow-[0px_4px_4px_0px_rgba(237,_0,_0,_1)]',
'shadow-$variable',
Expand Down Expand Up @@ -682,12 +689,14 @@ export const presetMiniTargets: string[] = [
'fill-current',
'fill-green-400',
'fill-opacity-80',
'fill-opacity-$opacity-variable',
'fill-[#123]',
'fill-[1rem]',
'stroke-none',
'stroke-current',
'stroke-green-400',
'stroke-opacity-80',
'stroke-opacity-$opacity-variable',
'stroke-[#123]',
'stroke-[1rem]',
'stroke-size-none',
Expand Down Expand Up @@ -826,12 +835,14 @@ export const presetMiniTargets: string[] = [
'text-stroke-sm',
'text-stroke-blue-500',
'text-stroke-op-60',
'text-stroke-op-$opacity-variable',
'text-shadow',
'text-shadow-lg',
'text-shadow-none',
'text-shadow-$var',
'text-shadow-color-red-300',
'text-shadow-color-op-30',
'text-shadow-color-op-$opacity-variable',

// variables
'bg-$test-variable',
Expand Down

0 comments on commit 6b39445

Please sign in to comment.