Support generating multiple properties from one prop + fix for respon…

…sive styles
ds-pack · Jan 21, 2021 · 6430f90 · 6430f90
1 parent 22de11a
commit 6430f90
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 30 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "simple-props",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "main": "dist/index.js",
   "source": "src/index.tsx",
   "types": "dist/index.d.ts",

diff --git a/src/__tests__/index.test.tsx b/src/__tests__/index.test.tsx
@@ -144,3 +144,24 @@ test('supports non-variable style props', () => {
     }
   `)
 })
+
+test('supports multiple properties for a single prop', () => {
+  let simpleProps = createSimpleProps({
+    props: {
+      paddingX: {
+        scale: 'space',
+        properties: ['paddingLeft', 'paddingRight'],
+      },
+    },
+  })
+
+  let styles = simpleProps({
+    paddingX: 4,
+  })
+  expect(styles).toMatchInlineSnapshot(`
+    Object {
+      "paddingLeft": 4,
+      "paddingRight": 4,
+    }
+  `)
+})
diff --git a/src/index.tsx b/src/index.tsx
@@ -15,7 +15,10 @@ function defaultToVariable({ scale, value }) {
 }
 
 interface Props {
-  [name: string]: { scale: string; property: string } | boolean
+  [name: string]:
+    | { scale: string; property: string }
+    | { scale: string; properties: Array<string> }
+    | boolean
 }
 export interface PseudoProps {
   [name: string]: string
@@ -83,13 +86,16 @@ export default function createSimpleProps({
       }
 
       if (isSimpleProp) {
-        let scale, property
+        let scale,
+          properties = []
         let resolvedConfig = propConfig[prop]
         if (typeof resolvedConfig === 'boolean') {
-          scale = property = prop
+          scale = prop
+          properties.push(prop)
         } else {
           scale = resolvedConfig.scale
-          property = resolvedConfig.property
+          // @ts-ignore
+          properties = resolvedConfig.properties || [resolvedConfig.property]
         }
         if (typeof propValue === 'object' && propValue != null) {
           // _, 360
@@ -98,36 +104,48 @@ export default function createSimpleProps({
             let tokenMatch =
               // This value could be a number which doesn't support `.match`
               typeof propValue[query] === 'string'
-                ? typeof propValue[query].match(/\$([^\s]+)/)
+                ? propValue[query].match(/\$([^\s]+)/)
                 : null
             let tokenValue =
               tokenMatch && tokenMatch.length > 0 ? tokenMatch[1] : null
             if (query === '_') {
               return {
                 ...newStyles,
-                [property]: tokenValue
-                  ? toVariable({
-                      scale,
-                      value: tokenValue,
-                      props,
-                      breakpoint: query,
-                    })
-                  : propValue[query],
+                ...properties.reduce(
+                  (sty, property) => ({
+                    ...sty,
+                    [property]: tokenValue
+                      ? toVariable({
+                          scale,
+                          value: tokenValue,
+                          props,
+                          breakpoint: query,
+                        })
+                      : propValue[query],
+                  }),
+                  {},
+                ),
               }
             }
             let queryKey = createMediaQuery({ query })
             return {
               ...newStyles,
               [queryKey]: {
                 ...(newStyles[queryKey] || {}),
-                [property]: tokenValue
-                  ? toVariable({
-                      scale,
-                      value: tokenValue,
-                      props,
-                      breakpoint: query,
-                    })
-                  : propValue[query],
+                ...properties.reduce(
+                  (sty, property) => ({
+                    ...sty,
+                    [property]: tokenValue
+                      ? toVariable({
+                          scale,
+                          value: tokenValue,
+                          props,
+                          breakpoint: query,
+                        })
+                      : propValue[query],
+                  }),
+                  {},
+                ),
               },
             }
           }, styles)
@@ -140,14 +158,20 @@ export default function createSimpleProps({
           // non-responsive prop values
           styles = {
             ...styles,
-            [property]: tokenValue
-              ? toVariable({
-                  scale,
-                  value: tokenValue,
-                  props,
-                  breakpoint: '_',
-                })
-              : propValue,
+            ...properties.reduce(
+              (sty, property) => ({
+                ...sty,
+                [property]: tokenValue
+                  ? toVariable({
+                      scale,
+                      value: tokenValue,
+                      props,
+                      breakpoint: '_',
+                    })
+                  : propValue,
+              }),
+              {},
+            ),
           }
         }
       }