Repository: styled-system/styled-system (js)

Issue:
Inheriting configs
Hey 👋 

Im creating my own Style Function API on top of SS v5.

Without going too deep into why I'm doing this, I've created this minimal example to reproduce the issue: https://codesandbox.io/s/styled-system-issue-inheriting-configs-p3ibv

> Note: The example above is dumb, please don't fixate too much on it. 

Basically, I'm importing the `border` function from SS and then creating my own `border` function based off its `config`.

Surprisingly the `borderRadius` prop stops working. 

I've been knocking my head against the wall trying to figure out _why_ - but no luck (and now I have a headache)

Does this make sense to anyone?

Pull request description:
Fix parser config
Fixes #565

Patch:
diff --git a/packages/core/src/index.js b/packages/core/src/index.js
index 1121fe1..c146eb1 100644
--- a/packages/core/src/index.js
+++ b/packages/core/src/index.js
@@ -140,6 +140,10 @@ export const system = (args = {}) => {
       })
       return
     }
+    if (typeof conf === 'function') {
+      config[key] = conf
+      return
+    }
     config[key] = createStyleFunction(conf)
   })
 


Test patch:
diff --git a/packages/core/test/system.js b/packages/core/test/system.js
index d498985..0fdbb12 100644
--- a/packages/core/test/system.js
+++ b/packages/core/test/system.js
@@ -178,3 +178,19 @@ test('skips null values in arrays', () => {
     }
   })
 })
+
+test('parser configs can be composed manually', () => {
+  const color = system({ color: true, backgroundColor: true })
+  const layout = system({ width: true, height: true })
+  const composed = system({ ...color.config, ...layout.config })
+  const style = composed({
+    color: 'tomato',
+    backgroundColor: 'black',
+    width: '100%',
+  })
+  expect(style).toEqual({
+    color: 'tomato',
+    backgroundColor: 'black',
+    width: '100%',
+  })
+})