feat(transformer-directives): theme() support color transparency (#…

…3131)
unocss · Sep 19, 2023 · cbfc2b3 · cbfc2b3
1 parent 52a6ee0
commit cbfc2b3
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 26 deletions.
diff --git a/packages/transformer-directives/package.json b/packages/transformer-directives/package.json
@@ -37,6 +37,7 @@
   },
   "dependencies": {
     "@unocss/core": "workspace:*",
+    "@unocss/rule-utils": "workspace:*",
     "css-tree": "^2.3.1"
   },
   "devDependencies": {

diff --git a/packages/transformer-directives/src/theme.ts b/packages/transformer-directives/src/theme.ts
@@ -1,4 +1,5 @@
 import type { Declaration } from 'css-tree'
+import { colorToString, parseCssColor } from '@unocss/rule-utils'
 import type { TransformerDirectivesContext } from '.'
 
 export const themeFnRE = /theme\((.*?)\)/g
@@ -18,8 +19,9 @@ export function handleThemeFn({ code, uno, options }: TransformerDirectivesConte
     if (!rawArg)
       throw new Error('theme() expect exact one argument, but got 0')
 
+    const [rawKey, alpha] = rawArg.slice(1, -1).split('/') as [string, string?]
     let value: any = uno.config.theme
-    const keys = rawArg.slice(1, -1).split('.')
+    const keys = rawKey.trim().split('.')
 
     keys.every((key) => {
       if (value[key] != null)
@@ -32,6 +34,12 @@ export function handleThemeFn({ code, uno, options }: TransformerDirectivesConte
     })
 
     if (typeof value === 'string') {
+      if (alpha) {
+        const color = parseCssColor(value)
+        if (color)
+          value = colorToString(color, alpha)
+      }
+
       code.overwrite(
         offset + match.index!,
         offset + match.index! + match[0].length,

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/test/transformer-directives.test.ts b/test/transformer-directives.test.ts
@@ -19,6 +19,12 @@ describe('transformer-directives', () => {
       btn: 'px-2 py-3 md:px-4 bg-blue-500 text-white rounded',
     },
     theme: {
+      colors: {
+        hsl: 'hsl(210, 50%, 50%)',
+        hsla: 'hsl(210, 50%, 50%, )',
+        rgb: 'rgb(255, 0, 0)',
+        rgba: 'rgba(255, 0, 0, 0.5)',
+      },
       breakpoints: {
         xs: '320px',
         sm: '640px',
@@ -450,6 +456,28 @@ div {
         "
       `)
     })
+
+    test('opacity', async () => {
+      const result = await transform(`
+        div {
+          color: theme('colors.red.500 / 50%');
+          color: theme('colors.rgb / 0.5');
+          color: theme('colors.rgba / 50%');
+          color: theme('colors.hsl / 0.6');
+          color: theme('colors.hsla / 60%');
+        }`,
+      )
+      expect(result).toMatchInlineSnapshot(`
+        "div {
+          color: rgba(239, 68, 68, 50%);
+          color: rgba(255, 0, 0, 0.5);
+          color: rgba(255, 0, 0, 50%);
+          color: hsla(210, 50%, 50%, 0.6);
+          color: hsla(210, 50%, 50%, 60%);
+        }
+        "
+      `)
+    })
   })
 
   test('escape backslash', async () => {