diff --git a/__tests__/resolveConfig.test.js b/__tests__/resolveConfig.test.js index ea44f9f65bc4..b301518278e3 100644 --- a/__tests__/resolveConfig.test.js +++ b/__tests__/resolveConfig.test.js @@ -261,6 +261,70 @@ test('variants key is merged instead of replaced', () => { }) }) +test('a global variants list replaces the default', () => { + const userConfig = { + variants: ['responsive', 'hover', 'focus', 'active'], + } + + const defaultConfig = { + prefix: '-', + important: false, + separator: ':', + theme: { + colors: { + 'grey-darker': '#606f7b', + 'grey-dark': '#8795a1', + grey: '#b8c2cc', + 'grey-light': '#dae1e7', + 'grey-lighter': '#f1f5f8', + }, + fonts: { + sans: ['system-ui', 'BlinkMacSystemFont', '-apple-system', 'Roboto', 'sans-serif'], + serif: ['Constantia', 'Lucida Bright', 'Georgia', 'serif'], + }, + screens: { + sm: '500px', + md: '750px', + lg: '1000px', + }, + }, + variants: { + appearance: ['responsive'], + backgroundAttachment: ['responsive'], + borderCollapse: [], + borderColors: ['responsive', 'hover', 'focus'], + borderRadius: ['responsive'], + }, + } + + const result = resolveConfig([userConfig, defaultConfig]) + + expect(result).toEqual({ + prefix: '-', + important: false, + separator: ':', + theme: { + colors: { + 'grey-darker': '#606f7b', + 'grey-dark': '#8795a1', + grey: '#b8c2cc', + 'grey-light': '#dae1e7', + 'grey-lighter': '#f1f5f8', + }, + fonts: { + sans: ['system-ui', 'BlinkMacSystemFont', '-apple-system', 'Roboto', 'sans-serif'], + serif: ['Constantia', 'Lucida Bright', 'Georgia', 'serif'], + }, + screens: { + sm: '500px', + md: '750px', + lg: '1000px', + }, + }, + variants: ['responsive', 'hover', 'focus', 'active'], + }) +}) + test('missing top level keys are pulled from the default config', () => { const userConfig = {} diff --git a/src/util/resolveConfig.js b/src/util/resolveConfig.js index 826d3646659e..3667f35bdca4 100644 --- a/src/util/resolveConfig.js +++ b/src/util/resolveConfig.js @@ -65,7 +65,11 @@ export default function resolveConfig(configs) { return defaults( { theme: resolveFunctionKeys(mergeExtensions(defaults({}, ...map(configs, 'theme')))), - variants: defaults({}, ...map(configs, 'variants')), + variants: (firstVariants => { + return Array.isArray(firstVariants) + ? firstVariants + : defaults({}, ...map(configs, 'variants')) + })(defaults({}, ...map(configs)).variants), }, ...configs )