Move negative margin logic into a helper

Adds a new `utils` bucket that's passed as a second arg when using a closure for theme values. The idea is you can destructure useful helper functions out of this argument, in this case a `negative` function that converts a positive scale to negative values. That's the only helper function right now, but making it a destructurable arg so we can add more if necessary without adding a bunch of positional arguments.

Author: adamwathan

src/util/resolveConfig.js

@@ -4,6 +4,17 @@ import defaults from 'lodash/defaults'
 import map from 'lodash/map'
 import get from 'lodash/get'
 
+const utils = {
+  negative: function (scale) {
+    return Object.keys(scale)
+      .filter(key => scale[key] !== '0')
+      .reduce((negativeScale, key) => ({
+        ...negativeScale,
+        [`-${key}`]: `-${scale[key]}`
+      }), {})
+  }
+}
+
 function value(valueToResolve, ...args) {
   return isFunction(valueToResolve) ? valueToResolve(...args) : valueToResolve
 }
@@ -33,7 +44,7 @@ function resolveFunctionKeys(object) {
   return Object.keys(object).reduce((resolved, key) => {
     return {
       ...resolved,
-      [key]: isFunction(object[key]) ? object[key](resolveObjectPath) : object[key],
+      [key]: isFunction(object[key]) ? object[key](resolveObjectPath, utils) : object[key],
     }
   }, {})
 }

stubs/defaultConfig.stub.js

@@ -305,20 +305,11 @@ module.exports = {
       screen: '100vh',
     },
     padding: theme => theme('spacing'),
-    margin: theme => {
-      const negativeSpacing = Object.keys(theme('spacing'))
-        .filter(key => theme('spacing')[key] !== '0')
-        .reduce((negativeSpacing, key) => ({
-          ...negativeSpacing,
-          [`-${key}`]: `-${theme('spacing')[key]}`
-        }), {})
-
-      return {
-        auto: 'auto',
-        ...theme('spacing'),
-        ...negativeSpacing,
-      }
-    },
+    margin: (theme, { negative }) => ({
+      auto: 'auto',
+      ...theme('spacing'),
+      ...negative(theme('spacing')),
+    }),
     objectPosition: {
       bottom: 'bottom',
       center: 'center',