feat: Add support for arbitrary box-shadow (#194)

Co-authored-by: Balbina K <41303231+BalbinaK@users.noreply.github.com>
warp-ds · Jan 24, 2024 · 984e3d3 · 984e3d3
1 parent 94ed482
commit 984e3d3
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 3 deletions.
diff --git a/src/_rules/shadow.js b/src/_rules/shadow.js
@@ -1,4 +1,9 @@
-export const shadows = [[/^shadow-(s|m|l|xl)$/, ([, size]) => ({ 'box-shadow': `var(--w-shadow-${size})` })]];
+import { resolveArbitraryValues } from '#utils';
+
+export const shadows = [
+  [/^shadow-(s|m|l|xl)$/, ([, size]) => ({ 'box-shadow': `var(--w-shadow-${size})` })],
+  [/^shadow-\[(.+)]$/, ([, val]) => ({ 'box-shadow': val.startsWith('--') ? `var(${val})` : resolveArbitraryValues(val) })],
+];
 
 const dropShadowDefaultColor = '64, 64, 64';
 

diff --git a/src/_rules/slider.js b/src/_rules/slider.js
@@ -1,5 +1,5 @@
-// Hardcoded styling for slider border shadow, will be modified and handled with correct color variables at a later stage
-// TODO: Make the colors for the slider shadow themeable
+// Deprecated - DO NOT USE! - Replace with arbitrary box-shadow (shadow-[--token]) to handle theming
+
 const defaultColor = 'rgba(0, 0, 0, .08)';
 const sliderStates = {
   active: '0 0 0 8px',

diff --git a/test/__snapshots__/shadow.js.snap b/test/__snapshots__/shadow.js.snap
@@ -1,5 +1,12 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`arbitrary box-shadows work 1`] = `
+"/* layer: default */
+.shadow-\\[--w-shadow-m\\]{box-shadow:var(--w-shadow-m);}
+.shadow-\\[0_6px_12px_rgba\\(0\\,0\\,0\\,\\.2\\)\\,0_10px_20px_rgba\\(0\\,0\\,0\\,\\.1\\)\\]{box-shadow:0rem 6px 12px rgba(0,0,0,.2),0 10px 20px rgba(0,0,0,.1);}
+.shadow-\\[var\\(--arbitrary-shadow-var\\)\\]{box-shadow:var(--arbitrary-shadow-var);}"
+`;
+
 exports[`drop shadows 1`] = `
 "/* layer: default */
 .drop-shadow-l{filter:drop-shadow(rgba(64, 64, 64, .23) 0 6px 8px) drop-shadow(rgba(64, 64, 64, .19) 0 10px 20px);}

diff --git a/test/shadow.js b/test/shadow.js
@@ -9,6 +9,12 @@ test('shadows work', async ({ uno }) => {
   expect(css).toMatchSnapshot();
 });
 
+test('arbitrary box-shadows work', async ({ uno }) => {
+  const classes = ['shadow-[var(--arbitrary-shadow-var)]', 'shadow-[--w-shadow-m]', 'shadow-[0_6px_12px_rgba(0,0,0,.2),0_10px_20px_rgba(0,0,0,.1)]'];
+  const { css } = await uno.generate(classes);
+  expect(css).toMatchSnapshot();
+});
+
 test('drop shadows', async ({ uno }) => {
   const classes = ['drop-shadow-s', 'drop-shadow-m', 'drop-shadow-l', 'drop-shadow-xl'];
   const { css } = await uno.generate(classes);