fix(preset-mini): support custom shadow color (#2372)

unocss · Apr 7, 2023 · 6059def · 6059def
1 parent ddeccab
commit 6059def
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/packages/preset-mini/src/_rules/shadow.ts b/packages/preset-mini/src/_rules/shadow.ts
@@ -1,6 +1,6 @@
 import type { Rule } from '@unocss/core'
 import type { Theme } from '../theme'
-import { colorResolver, colorableShadows, handler as h } from '../utils'
+import { colorResolver, colorableShadows, handler as h, hasParseableColor } from '../utils'
 import { varEmpty } from './static'
 
 export const boxShadowsBase = {
@@ -15,10 +15,12 @@ export const boxShadows: Rule<Theme>[] = [
   [/^shadow(?:-(.+))?$/, (match, context) => {
     const [, d] = match
     const { theme } = context
-    const v = theme.boxShadow?.[d || 'DEFAULT'] || h.bracket.cssvar(d)
-    if (v) {
+    const v = theme.boxShadow?.[d || 'DEFAULT']
+    const c = d ? h.bracket.cssvar(d) : undefined
+
+    if ((v != null || c != null) && !hasParseableColor(c, theme)) {
       return {
-        '--un-shadow': colorableShadows(v, '--un-shadow-color').join(','),
+        '--un-shadow': colorableShadows((v || c)!, '--un-shadow-color').join(','),
         'box-shadow': 'var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow)',
       }
     }

diff --git a/test/__snapshots__/preset-mini.test.ts.snap b/test/__snapshots__/preset-mini.test.ts.snap
@@ -545,6 +545,7 @@ unocss .scope-\\\\[unocss\\\\]\\\\:block{display:block;}
 .backdrop-element\\\\:shadow-green-100::backdrop{--un-shadow-opacity:1;--un-shadow-color:rgba(220,252,231,var(--un-shadow-opacity));}
 .backdrop\\\\:shadow-green::backdrop{--un-shadow-opacity:1;--un-shadow-color:rgba(74,222,128,var(--un-shadow-opacity));}
 .shadow{--un-shadow:var(--un-shadow-inset) 0 1px 3px 0 var(--un-shadow-color, rgba(0,0,0,0.1)),var(--un-shadow-inset) 0 1px 2px -1px 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-\\\\[\\\\#fff\\\\]{--un-shadow-opacity:1;--un-shadow-color:rgba(255,255,255,var(--un-shadow-opacity));}
 .shadow-\\\\[0px_4px_4px_0px_rgba\\\\(237\\\\,_0\\\\,_0\\\\,_1\\\\)\\\\]{--un-shadow:0px 4px 4px 0px var(--un-shadow-color, rgba(237,0,0,1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
 .shadow-\\\\$variable{--un-shadow:var(--variable);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
 .shadow-current{--un-shadow-color:currentColor;}

diff --git a/test/assets/preset-mini-targets.ts b/test/assets/preset-mini-targets.ts
@@ -446,6 +446,7 @@ export const presetMiniTargets: string[] = [
   'shadow-xl',
   'shadow-green-500',
   'shadow-green-900/50',
+  'shadow-[#fff]',
   'shadow-op-50',
   'shadow-inset',
   'shadow-[0px_4px_4px_0px_rgba(237,_0,_0,_1)]',