feat: support custom shadow color

MellowCo · Apr 8, 2023 · 48fda83 · 48fda83
1 parent 1227c9b
commit 48fda83
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 29 deletions.
diff --git a/package.json b/package.json
@@ -92,7 +92,7 @@
     "unplugin-transform-class": "^0.3.0"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "0.38.4",
+    "@antfu/eslint-config": "0.36.0",
     "bumpp": "^9.1.0",
     "eslint": "8.38.0",
     "msw": "^1.1.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/rules/shadow.ts b/src/rules/shadow.ts
@@ -1,7 +1,7 @@
 import type { Rule } from '@unocss/core'
 import { restoreSelector } from 'unplugin-transform-class/utils'
 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 = {
@@ -16,11 +16,13 @@ export const boxShadows: Rule<Theme>[] = [
     let [, d] = match
     const { theme } = context
     d = restoreSelector(d, theme.transformRules)
-    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
@@ -670,6 +670,7 @@ unocss .scope-\\\\[unocss\\\\]\\\\:block{display:block;}
 .backdrop-element\\\\:shadow-green-100::backdrop{--licl-shadow-opacity:1;--licl-shadow-color:rgba(220,252,231,var(--licl-shadow-opacity));}
 .backdrop\\\\:shadow-green::backdrop{--licl-shadow-opacity:1;--licl-shadow-color:rgba(74,222,128,var(--licl-shadow-opacity));}
 .shadow{--licl-shadow:var(--licl-shadow-inset) 0 2rpx 6rpx 0 var(--licl-shadow-color, rgba(0,0,0,0.1)),var(--licl-shadow-inset) 0 2rpx 4rpx -2rpx var(--licl-shadow-color, rgba(0,0,0,0.1));box-shadow:var(--licl-ring-offset-shadow), var(--licl-ring-shadow), var(--licl-shadow);}
+.shadow-\\\\[\\\\#fff\\\\]{--licl-shadow-opacity:1;--licl-shadow-color:rgba(255,255,255,var(--licl-shadow-opacity));}
 .shadow-\\\\[0px_4px_4px_0px_rgba\\\\(237\\\\,_0\\\\,_0\\\\,_1\\\\)\\\\]{--licl-shadow:0px 4px 4px 0px var(--licl-shadow-color, rgba(237,0,0,1));box-shadow:var(--licl-ring-offset-shadow), var(--licl-ring-shadow), var(--licl-shadow);}
 .shadow-\\\\$variable{--licl-shadow:var(--variable);box-shadow:var(--licl-ring-offset-shadow), var(--licl-ring-shadow), var(--licl-shadow);}
 .shadow-current{--licl-shadow-color:currentColor;}

diff --git a/test/__snapshots__/preset-weapp-rules.test.ts.snap b/test/__snapshots__/preset-weapp-rules.test.ts.snap
@@ -638,6 +638,7 @@ unocss .scope-_lfl11_unocss_lfr11__cl11_block{display:block;}
 .backdrop-element_cl11_shadow-green-100::backdrop{--un-shadow-opacity:1;--un-shadow-color:rgba(220,252,231,var(--un-shadow-opacity));}
 .shadow{--un-shadow:var(--un-shadow-inset) 0 2rpx 6rpx 0 var(--un-shadow-color, rgba(0,0,0,0.1)),var(--un-shadow-inset) 0 2rpx 4rpx -2rpx 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-_do11_variable{--un-shadow:var(--variable);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
+.shadow-_lfl11__wn11_fff_lfr11_{--un-shadow-opacity:1;--un-shadow-color:rgba(255,255,255,var(--un-shadow-opacity));}
 .shadow-_lfl11_0px_4px_4px_0px_rgba_lbl11_237_lco11__0_lco11__0_lco11__1_lbr11__lfr11_{--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-current{--un-shadow-color:currentColor;}
 .shadow-green-500{--un-shadow-opacity:1;--un-shadow-color:rgba(34,197,94,var(--un-shadow-opacity));}

diff --git a/test/__snapshots__/preset-weapp.test.ts.snap b/test/__snapshots__/preset-weapp.test.ts.snap
@@ -640,6 +640,7 @@ unocss .scope-_lfl_unocss_lfr__cl_block{display:block;}
 .backdrop-element_cl_shadow-green-100::backdrop{--un-shadow-opacity:1;--un-shadow-color:rgba(220,252,231,var(--un-shadow-opacity));}
 .shadow{--un-shadow:var(--un-shadow-inset) 0 2rpx 6rpx 0 var(--un-shadow-color, rgba(0,0,0,0.1)),var(--un-shadow-inset) 0 2rpx 4rpx -2rpx 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-_do_variable{--un-shadow:var(--variable);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
+.shadow-_lfl__wn_fff_lfr_{--un-shadow-opacity:1;--un-shadow-color:rgba(255,255,255,var(--un-shadow-opacity));}
 .shadow-_lfl_0px_4px_4px_0px_rgba_lbl_237_lco__0_lco__0_lco__1_lbr__lfr_{--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-current{--un-shadow-color:currentColor;}
 .shadow-green-500{--un-shadow-opacity:1;--un-shadow-color:rgba(34,197,94,var(--un-shadow-opacity));}

diff --git a/test/assets/preset-mini-targets.ts b/test/assets/preset-mini-targets.ts
@@ -594,6 +594,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)]',