From 6b394456e86fce3d8be03c2ce69431eb5198c2fc Mon Sep 17 00:00:00 2001
From: praburangki <praburangki@gmail.com>
Date: Wed, 12 Apr 2023 17:25:59 +0800
Subject: [PATCH] feat(preset-mini): enable to use css variable for opacities
 rule (#2494)

---
 packages/preset-mini/src/_rules/border.ts     |  2 +-
 packages/preset-mini/src/_rules/color.ts      |  4 ++--
 packages/preset-mini/src/_rules/decoration.ts |  2 +-
 packages/preset-mini/src/_rules/ring.ts       |  4 ++--
 packages/preset-mini/src/_rules/shadow.ts     |  2 +-
 packages/preset-mini/src/_rules/svg.ts        |  4 ++--
 packages/preset-mini/src/_rules/typography.ts |  4 ++--
 test/assets/output/preset-mini-targets.css    | 11 +++++++++++
 test/assets/preset-mini-targets.ts            | 11 +++++++++++
 9 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/packages/preset-mini/src/_rules/border.ts b/packages/preset-mini/src/_rules/border.ts
index 7a32877248..18df7c8b42 100644
--- a/packages/preset-mini/src/_rules/border.ts
+++ b/packages/preset-mini/src/_rules/border.ts
@@ -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])
 }
diff --git a/packages/preset-mini/src/_rules/color.ts b/packages/preset-mini/src/_rules/color.ts
index ce7bac2881..02e9e80205 100644
--- a/packages/preset-mini/src/_rules/color.ts
+++ b/packages/preset-mini/src/_rules/color.ts
@@ -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>' }],
 ]
diff --git a/packages/preset-mini/src/_rules/decoration.ts b/packages/preset-mini/src/_rules/decoration.ts
index e603865e30..1344368ddf 100644
--- a/packages/preset-mini/src/_rules/decoration.ts
+++ b/packages/preset-mini/src/_rules/decoration.ts
@@ -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>' }],
diff --git a/packages/preset-mini/src/_rules/ring.ts b/packages/preset-mini/src/_rules/ring.ts
index b6a8d134f9..26ee525020 100644
--- a/packages/preset-mini/src/_rules/ring.ts
+++ b/packages/preset-mini/src/_rules/ring.ts
@@ -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' }],
diff --git a/packages/preset-mini/src/_rules/shadow.ts b/packages/preset-mini/src/_rules/shadow.ts
index 1aafe7f98b..852c43e043 100644
--- a/packages/preset-mini/src/_rules/shadow.ts
+++ b/packages/preset-mini/src/_rules/shadow.ts
@@ -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' }],
diff --git a/packages/preset-mini/src/_rules/svg.ts b/packages/preset-mini/src/_rules/svg.ts
index 749e4d4bbc..d2637e399f 100644
--- a/packages/preset-mini/src/_rules/svg.ts
+++ b/packages/preset-mini/src/_rules/svg.ts
@@ -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
@@ -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' }],
diff --git a/packages/preset-mini/src/_rules/typography.ts b/packages/preset-mini/src/_rules/typography.ts
index cc5de54085..43ba7232b8 100644
--- a/packages/preset-mini/src/_rules/typography.ts
+++ b/packages/preset-mini/src/_rules/typography.ts
@@ -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>[] = [
@@ -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>' }],
 ]
diff --git a/test/assets/output/preset-mini-targets.css b/test/assets/output/preset-mini-targets.css
index 567991293b..9cea72e126 100644
--- a/test/assets/output/preset-mini-targets.css
+++ b/test/assets/output/preset-mini-targets.css
@@ -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\],
@@ -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;}
@@ -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;}
@@ -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;}
@@ -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;}
@@ -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,
@@ -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,
@@ -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;}
diff --git a/test/assets/preset-mini-targets.ts b/test/assets/preset-mini-targets.ts
index c4671567e7..b3155ecd22 100644
--- a/test/assets/preset-mini-targets.ts
+++ b/test/assets/preset-mini-targets.ts
@@ -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]',
@@ -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]',
@@ -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',
@@ -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',
@@ -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',
@@ -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',
@@ -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',
@@ -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',