feat: colorableShadows with cssvar

MellowCo · Jun 29, 2024 · 5cfd86e · 5cfd86e
1 parent dfca433
commit 5cfd86e
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -73,6 +73,7 @@
     "build": "unbuild",
     "stub": "unbuild --stub",
     "test": "vitest",
+    "test:debug": "vitest debug",
     "taze": "taze minor -wI",
     "uniapp3": "npm -C examples/uniapp_vue3 run dev:mp-weixin",
     "uniapp3:h5": "npm run build && npm -C examples/uniapp_vue3 run dev:h5",

diff --git a/src/utils/utilities.ts b/src/utils/utilities.ts
@@ -6,7 +6,7 @@ import type { Theme } from '../theme'
 import { colorOpacityToString, colorToString, parseCssColor } from './colors'
 
 import { handler as h } from './handlers'
-import { cssMathFnRE, directionMap, globalKeywords, xyzArray, xyzMap } from './mappings'
+import { cssMathFnRE, cssVarFnRE, directionMap, globalKeywords, xyzArray, xyzMap } from './mappings'
 import { bracketTypeRe, numberWithUnitRE, splitComma } from './handlers/regex'
 
 export const CONTROL_MINI_NO_NEGATIVE = '$$mini-no-negative'
@@ -254,16 +254,21 @@ export function colorableShadows(shadows: string | string[], colorVar: string) {
     }
 
     let colorVarValue = ''
+    const lastComp = components.at(-1)
     if (parseCssColor(components.at(0))) {
       const color = parseCssColor(components.shift())
       if (color)
         colorVarValue = `, ${colorToString(color)}`
     }
-    else if (parseCssColor(components.at(-1))) {
+    else if (parseCssColor(lastComp)) {
       const color = parseCssColor(components.pop())
       if (color)
         colorVarValue = `, ${colorToString(color)}`
     }
+    else if (lastComp && cssVarFnRE.test(lastComp)) {
+      const color = components.pop()!
+      colorVarValue = `, ${color}`
+    }
 
     colored.push(`${isInset ? 'inset ' : ''}${components.join(' ')} var(${colorVar}${colorVarValue})`)
   }

diff --git a/test/__snapshots__/debug.test.ts.snap b/test/__snapshots__/debug.test.ts.snap
@@ -0,0 +1,9 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`debug 1`] = `
+"/* layer: default */
+.hover__bg-green-500:hover{--un-bg-opacity:1;background-color:rgb(34 197 94 / var(--un-bg-opacity));}
+.hover_a_bg-green-500:hover{--un-bg-opacity:1;background-color:rgb(34 197 94 / var(--un-bg-opacity));}
+.active__bg-red-500:active{--un-bg-opacity:1;background-color:rgb(239 68 68 / var(--un-bg-opacity));}
+.active_a_bg-red-500:active{--un-bg-opacity:1;background-color:rgb(239 68 68 / var(--un-bg-opacity));}"
+`;
diff --git a/test/debug.test.ts b/test/debug.test.ts
@@ -0,0 +1,28 @@
+import { createGenerator } from '@unocss/core'
+import { expect, it } from 'vitest'
+import presetWeapp from '../src/index'
+
+it('debug', async () => {
+  const uno = createGenerator({
+    presets: [
+      presetWeapp(),
+    ],
+    theme: {
+      colors: {
+        blackA7: 'hsla(0, 0%, 0%, 0.169)',
+      },
+    },
+  })
+
+  expect((await uno.generate('shadow-[0_0_7.5rem_0_var(--shadow)]', { preflights: false })).css)
+    .toMatchInlineSnapshot(`
+      "/* layer: default */
+      .shadow-_lfl_0_0_7_dl_5rem_0_var_lbl_--shadow_lbr__lfr_{--un-shadow:0 0 7.5rem 0 var(--un-shadow-color, var(--shadow));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}"
+    `)
+
+  expect((await uno.generate('shadow-[0_0_7.5rem_0_#000]', { preflights: false })).css)
+    .toMatchInlineSnapshot(`
+      "/* layer: default */
+      .shadow-_lfl_0_0_7_dl_5rem_0__wn_000_lfr_{--un-shadow:0 0 7.5rem 0 var(--un-shadow-color, rgb(0 0 0));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}"
+    `)
+})
diff --git a/test/preset-mini.test.ts b/test/preset-mini.test.ts
@@ -386,6 +386,18 @@ describe('preset-mini', () => {
         .shadow-_lfl_0_2px_10px_lfr_{--un-shadow:0 2px 10px var(--un-shadow-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
         .shadow-blackA7{--un-shadow-opacity:0.169;--un-shadow-color:hsla(0, 0%, 0%, var(--un-shadow-opacity));}"
       `)
+
+    expect((await uno.generate('shadow-[0_0_7.5rem_0_var(--shadow)]', { preflights: false })).css)
+      .toMatchInlineSnapshot(`
+        "/* layer: default */
+        .shadow-_lfl_0_0_7_dl_5rem_0_var_lbl_--shadow_lbr__lfr_{--un-shadow:0 0 7.5rem 0 var(--un-shadow-color, var(--shadow));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}"
+      `)
+
+    expect((await uno.generate('shadow-[0_0_7.5rem_0_#000]', { preflights: false })).css)
+      .toMatchInlineSnapshot(`  
+        "/* layer: default */
+        .shadow-_lfl_0_0_7_dl_5rem_0__wn_000_lfr_{--un-shadow:0 0 7.5rem 0 var(--un-shadow-color, rgb(0 0 0));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}"
+      `)
   })
 
   it('support new color notation using css variables for compatibility', async () => {