feat: support custom shorthands for rules

kripod · Mar 22, 2020 · 7fb9903 · 7fb9903
1 parent a118792
commit 7fb9903
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 9 deletions.
diff --git a/packages/example/src/components/StyledComponent.tsx b/packages/example/src/components/StyledComponent.tsx
@@ -4,5 +4,9 @@ import React from 'react';
 export default function StyledComponent(): JSX.Element {
   const sx = useStyling();
 
-  return <div {...sx({ p: 4, bg: 'papayawhip' })}>Hello, world!</div>;
+  return (
+    <div {...sx({ px: 4, py: 2, bg: 'papayawhip', color: 'rebeccapurple' })}>
+      Hello, world!
+    </div>
+  );
 }
diff --git a/packages/glaze/src/useStyling.ts b/packages/glaze/src/useStyling.ts
@@ -32,16 +32,20 @@ export default function useStyling(): (
     // eslint-disable-next-line guard-for-in, no-restricted-syntax
     for (const alias in themedStyle) {
       const value = themedStyle[alias];
-      const key = theme.aliases[alias] || alias;
+      const shorthand = theme.aliases[alias] || alias;
 
-      if (typeof value !== 'object') {
-        const staticClassName = staticClassNames[`${key}.${value}`];
-        if (staticClassName) {
-          className += `${staticClassName} `;
-        } else {
-          style[key] = value;
+      // eslint-disable-next-line no-loop-func
+      (theme.shorthands[shorthand] || [shorthand]).forEach((key) => {
+        // TODO: Support selectors and media queries
+        if (typeof value !== 'object') {
+          const staticClassName = staticClassNames[`${key}.${value}`];
+          if (staticClassName) {
+            className += `${staticClassName} `;
+          } else {
+            style[key] = value;
+          }
         }
-      }
+      });
     }
 
     return { className, style };