Fix bug where config utils was not passed through to nested closures

Author: adamwathan

__tests__/resolveConfig.test.js

@@ -899,6 +899,75 @@ test('theme values in the extend section are lazily evaluated', () => {
   })
 })
 
+test('lazily evaluated values have access to the config utils', () => {
+  const userConfig = {
+    theme: {
+      shift: (theme, { negative }) => ({
+        ...theme('spacing'),
+        ...negative(theme('spacing')),
+      }),
+      extend: {
+        nudge: (theme, { negative }) => ({
+          ...theme('spacing'),
+          ...negative(theme('spacing')),
+        }),
+      },
+    },
+  }
+
+  const defaultConfig = {
+    prefix: '-',
+    important: false,
+    separator: ':',
+    theme: {
+      spacing: {
+        '1': '1px',
+        '2': '2px',
+        '3': '3px',
+        '4': '4px',
+      },
+    },
+    variants: {},
+  }
+
+  const result = resolveConfig([userConfig, defaultConfig])
+
+  expect(result).toEqual({
+    prefix: '-',
+    important: false,
+    separator: ':',
+    theme: {
+      spacing: {
+        '1': '1px',
+        '2': '2px',
+        '3': '3px',
+        '4': '4px',
+      },
+      shift: {
+        '-1': '-1px',
+        '-2': '-2px',
+        '-3': '-3px',
+        '-4': '-4px',
+        '1': '1px',
+        '2': '2px',
+        '3': '3px',
+        '4': '4px',
+      },
+      nudge: {
+        '-1': '-1px',
+        '-2': '-2px',
+        '-3': '-3px',
+        '-4': '-4px',
+        '1': '1px',
+        '2': '2px',
+        '3': '3px',
+        '4': '4px',
+      },
+    },
+    variants: {},
+  })
+})
+
 test('the original theme is not mutated', () => {
   const userConfig = {
     theme: {

src/util/resolveConfig.js

@@ -4,7 +4,7 @@ import defaults from 'lodash/defaults'
 import map from 'lodash/map'
 import get from 'lodash/get'
 
-const utils = {
+const configUtils = {
   negative(scale) {
     return Object.keys(scale)
       .filter(key => scale[key] !== '0')
@@ -31,23 +31,23 @@ function mergeExtensions({ extend, ...theme }) {
       }
     }
 
-    return resolveThemePath => ({
-      ...value(themeValue, resolveThemePath),
-      ...value(extensions, resolveThemePath),
+    return (resolveThemePath, utils) => ({
+      ...value(themeValue, resolveThemePath, utils),
+      ...value(extensions, resolveThemePath, utils),
     })
   })
 }
 
 function resolveFunctionKeys(object) {
-  const resolveObjectPath = (key, defaultValue) => {
+  const resolveThemePath = (key, defaultValue) => {
     const val = get(object, key, defaultValue)
-    return isFunction(val) ? val(resolveObjectPath) : val
+    return isFunction(val) ? val(resolveThemePath) : val
   }
 
   return Object.keys(object).reduce((resolved, key) => {
     return {
       ...resolved,
-      [key]: isFunction(object[key]) ? object[key](resolveObjectPath, utils) : object[key],
+      [key]: isFunction(object[key]) ? object[key](resolveThemePath, configUtils) : object[key],
     }
   }, {})
 }