diff --git a/__tests__/resolveConfig.test.js b/__tests__/resolveConfig.test.js index a72a4a0e7e90..d89471e3dad8 100644 --- a/__tests__/resolveConfig.test.js +++ b/__tests__/resolveConfig.test.js @@ -757,3 +757,64 @@ test('the theme function can use a default value if the key is missing', () => { }, }) }) + +test('theme values in the extend section are lazily evaluated', () => { + const userConfig = { + theme: { + colors: { + red: 'red', + green: 'green', + blue: 'blue', + }, + extend: { + borderColor: theme => ({ + default: theme('colors.red'), + }), + }, + }, + } + + const defaultConfig = { + prefix: '-', + important: false, + separator: ':', + theme: { + colors: { + cyan: 'cyan', + magenta: 'magenta', + yellow: 'yellow', + }, + borderColor: theme => ({ + default: theme('colors.yellow', 'currentColor'), + ...theme('colors'), + }), + }, + variants: { + borderColor: ['responsive', 'hover', 'focus'], + }, + } + + const result = resolveConfig([userConfig, defaultConfig]) + + expect(result).toEqual({ + prefix: '-', + important: false, + separator: ':', + theme: { + colors: { + red: 'red', + green: 'green', + blue: 'blue', + }, + borderColor: { + default: 'red', + red: 'red', + green: 'green', + blue: 'blue', + }, + }, + variants: { + borderColor: ['responsive', 'hover', 'focus'], + }, + }) +}) diff --git a/src/util/resolveConfig.js b/src/util/resolveConfig.js index 1c7a4237f352..1a875a945179 100644 --- a/src/util/resolveConfig.js +++ b/src/util/resolveConfig.js @@ -17,15 +17,17 @@ function resolveFunctionKeys(object) { function mergeExtensions({ extend, ...theme }) { return mergeWith({}, theme, extend, (_, extensions, key) => { - return isFunction(theme[key]) - ? mergedTheme => ({ - ...theme[key](mergedTheme), - ...extensions, - }) - : { - ...theme[key], - ...extensions, - } + if (isFunction(theme[key]) || (extend && isFunction(extend[key]))) { + return mergedTheme => ({ + ...(isFunction(theme[key]) ? theme[key](mergedTheme) : theme[key]), + ...(extend && isFunction(extend[key]) ? extend[key](mergedTheme) : extensions), + }) + } else { + return { + ...theme[key], + ...extensions, + } + } }) }