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

Issue:
Using other props in a system() definition
Is there a way to use other component props in a `system()` definition?

I currently have:
```javascript
const sidebarSystemSpacing = system({
  spacing: {
    property: 'margin',
    scale: 'sidebar.spacing',
    transform: (value, scale) => `calc(${scale[value]}px / 2)`,
  },
})
```

If I wanted another prop to influence this calculation (for example, `minSpacing`), how would I achieve that? Is it possible? Here's ultimately what I want to achieve:
```javascript
const sidebarSystemSpacing = system({
  spacing: {
    property: 'margin',
    scale: 'sidebar.spacing',
    transform: (value, scale) => `calc(${props.contentMin} - ${scale[value]}px / 2)`,
  },
})
```

Thanks!

Pull request description:
Pass props through to system configs
Fixes #700

Patch:
diff --git a/packages/core/src/index.js b/packages/core/src/index.js
index 90a9d63..3717da0 100644
--- a/packages/core/src/index.js
+++ b/packages/core/src/index.js
@@ -138,9 +138,9 @@ export const createStyleFunction = ({
   defaultScale,
 }) => {
   properties = properties || [property]
-  const sx = (value, scale) => {
+  const sx = (value, scale, _props) => {
     const result = {}
-    const n = transform(value, scale)
+    const n = transform(value, scale, _props)
     if (n === null) return
     properties.forEach(prop => {
       result[prop] = n


Test patch:
diff --git a/packages/core/test/system.js b/packages/core/test/system.js
index d047462..969e73c 100644
--- a/packages/core/test/system.js
+++ b/packages/core/test/system.js
@@ -270,3 +270,19 @@ test('sorts media queries when responsive object values are used', () => {
     'padding',
   ])
 })
+
+test('transforms values', () => {
+  const parser = system({
+    margin: {
+      property: 'margin',
+      transform: (n, scale, props) => {
+        const m = props.multiply || 1
+        return m * n
+      }
+    }
+  })
+  const a = parser({ margin: 8 })
+  const b = parser({ margin: 12, multiply: 2 })
+  expect(a).toEqual({ margin: 8 })
+  expect(b).toEqual({ margin: 24 })
+})