feat(preset-mini): support <alpha-value> color placeholder (#1088)

unocss · Jun 10, 2022 · 5518191 · 5518191
1 parent b6e2ee6
commit 5518191
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git a/packages/preset-mini/src/utils/colors.ts b/packages/preset-mini/src/utils/colors.ts
@@ -1,8 +1,11 @@
 import type { CSSColorValue, RGBAColorValue } from '@unocss/core'
+import { escapeRegExp } from '@unocss/core'
 
 /* eslint-disable no-case-declarations */
 
 const cssColorFunctions = ['hsl', 'hsla', 'hwb', 'lab', 'lch', 'oklab', 'oklch', 'rgb', 'rgba']
+const alphaPlaceholders = ['%alpha', '<alpha-value>']
+const alphaPlaceholdersRE = new RegExp(alphaPlaceholders.map(v => escapeRegExp(v)).join('|'))
 
 export function hex2rgba(hex = ''): RGBAColorValue | undefined {
   const color = parseHexColor(hex)
@@ -36,12 +39,12 @@ export function parseCssColor(str = ''): CSSColorValue | undefined {
 
 export function colorOpacityToString(color: CSSColorValue) {
   const alpha = color.alpha ?? 1
-  return alpha === '%alpha' ? 1 : alpha
+  return typeof alpha === 'string' && alphaPlaceholders.includes(alpha) ? 1 : alpha
 }
 
 export function colorToString(color: CSSColorValue | string, alphaOverride?: string | number) {
   if (typeof color === 'string')
-    return color.replace('%alpha', `${alphaOverride ?? 1}`)
+    return color.replace(alphaPlaceholdersRE, `${alphaOverride ?? 1}`)
 
   const { components } = color
   let { alpha, type } = color

diff --git a/test/preset-uno.test.ts b/test/preset-uno.test.ts
@@ -130,8 +130,8 @@ const uno = createGenerator({
         b: 'rgba(var(--custom), %alpha)',
         c: 'rgba(var(--custom-c) / %alpha)',
         d: 'hsl(var(--custom-d), %alpha)',
-        e: 'hsl(var(--custom-e) / %alpha)',
-        f: 'lch(var(--custom-f) / %alpha)',
+        e: 'hsl(var(--custom-e) / <alpha-value>)',
+        f: 'lch(var(--custom-f) / <alpha-value>)',
       },
       info: 'hsl(200.1, 100%, 54.3%)',
     },