diff --git a/__tests__/resolveConfig.test.js b/__tests__/resolveConfig.test.js index abbd66962..a37f0b59c 100644 --- a/__tests__/resolveConfig.test.js +++ b/__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: { diff --git a/src/util/resolveConfig.js b/src/util/resolveConfig.js index 872dd8c46..7fc4fb65e 100644 --- a/src/util/resolveConfig.js +++ b/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], } }, {}) }