fix: shadow does not take into account custom color (#3391)

Scrum · web-flow · commit 859cae6e3735 · 2023-11-29T13:04:22.000+01:00
diff --git a/packages/preset-mini/src/_utils/utilities.ts b/packages/preset-mini/src/_utils/utilities.ts
@@ -214,11 +214,20 @@ export function colorableShadows(shadows: string | string[], colorVar: string) {
     const components = getStringComponents(shadows[i], ' ', 6)
     if (!components || components.length < 3)
       return shadows
-    const color = parseCssColor(components.pop())
-    if (color == null)
+
+    if (parseCssColor(components.at(0)))
       return shadows
-    colored.push(`${components.join(' ')} var(${colorVar}, ${colorToString(color)})`)
+
+    let colorVarValue = ''
+    if (parseCssColor(components.at(-1))) {
+      const color = parseCssColor(components.pop())
+      if (color)
+        colorVarValue = `, ${colorToString(color)}`
+    }
+
+    colored.push(`${components.join(' ')} var(${colorVar}${colorVarValue})`)
   }
+
   return colored
 }
 
diff --git a/test/layer.test.ts b/test/layer.test.ts
@@ -22,6 +22,26 @@ describe('layers', () => {
     expect(css).toMatchSnapshot()
   })
 
+  it('colors', async () => {
+    const uno = createGenerator({
+      theme: {
+        colors: {
+          blackA7: 'hsla(0, 0%, 0%, 0.169)',
+        },
+      },
+      presets: [
+        presetMini(),
+
+      ],
+    })
+    const { css } = await uno.generate('shadow-[0_2px_10px] shadow-blackA7', { preflights: false })
+    expect(css).toMatchInlineSnapshot(`
+    "/* layer: default */
+    .shadow-\\[0_2px_10px\\]{--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));}"
+    `)
+  })
+
   it('@import layer', async () => {
     const uno = createGenerator({
       presets: [
