feat(internals): add rules for shadow component classes (#94)

warp-ds · May 3, 2023 · e7e65d1 · e7e65d1
1 parent ee50801
commit e7e65d1
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 0 deletions.
diff --git a/src/_rules/internal.js b/src/_rules/internal.js
@@ -4,6 +4,7 @@ export const internalRules = [
   [/^i-bg-(.+)$/, ([, cssvar]) => ({ 'background-color': h.warpToken(cssvar) })],
   [/^i-text-(.+)$/, ([, cssvar]) => ({ color: h.warpToken(cssvar) })],
   [/^i-border-(.+)$/, ([, cssvar]) => ({ 'border-color': h.warpToken(cssvar) })],
+  [/^i-shadow-(.+)$/, ([, cssvar]) => ({ 'box-shadow': h.warpToken(cssvar) })],
   [/^i-border-([rltb])-(.+)$/, ([, direction, cssvar]) => {
     if (direction in directionMap && cssvar != null) {
       return directionMap[direction].map(

diff --git a/test/__snapshots__/internal.js.snap b/test/__snapshots__/internal.js.snap
@@ -5,6 +5,9 @@ exports[`it generates css based on warp tokens 1`] = `
 .i-bg-\\\\$foo-bar{background-color:var(--w-foo-bar);}
 .i-text-\\\\$biz-baz{color:var(--w-biz-baz);}
 .i-border-\\\\$wombat-llama{border-color:var(--w-wombat-llama);}
+.i-shadow-\\\\$shadow-buttongroup{box-shadow:var(--w-shadow-buttongroup);}
+.i-shadow-\\\\$shadow-card{box-shadow:var(--w-shadow-card);}
+.i-shadow-\\\\$shadow-tooltip{box-shadow:var(--w-shadow-tooltip);}
 .i-border-b-\\\\$color-alert-info-border{border-bottom-color:var(--w-color-alert-info-border);}
 .i-border-l-\\\\$color-alert-info-border{border-left-color:var(--w-color-alert-info-border);}
 .i-border-r-\\\\$color-alert-info-border{border-right-color:var(--w-color-alert-info-border);}

diff --git a/test/internal.js b/test/internal.js
@@ -12,6 +12,9 @@ test('it generates css based on warp tokens', async ({ uno }) => {
     'i-border-r-$color-alert-info-border',
     'i-border-t-$color-alert-info-border',
     'i-border-b-$color-alert-info-border',
+    'i-shadow-$shadow-card',
+    'i-shadow-$shadow-buttongroup',
+    'i-shadow-$shadow-tooltip',
   ];
   const anticlasses = [
     'i-bg-foos-bars',
@@ -23,6 +26,8 @@ test('it generates css based on warp tokens', async ({ uno }) => {
     'i-border-tl-$color-alert-info-border',
     'i-border-bl-$color-alert-info-border',
     'i-border-tbl-$color-alert-info-border',
+    'i-$shadow-card',
+    'i-elevation-$shadow-card',
   ];
   const { css } = await uno.generate([...classes, ...anticlasses]);
   expect(css).toMatchSnapshot();