diff --git a/__tests__/applyAtRule.test.js b/__tests__/applyAtRule.test.js index b84c4588ba28..a099f1d86ef5 100644 --- a/__tests__/applyAtRule.test.js +++ b/__tests__/applyAtRule.test.js @@ -1,10 +1,14 @@ import postcss from 'postcss' import substituteClassApplyAtRules from '../src/lib/substituteClassApplyAtRules' import processPlugins from '../src/util/processPlugins' +import resolveConfig from '../src/util/resolveConfig' import corePlugins from '../src/corePlugins' import defaultConfig from '../defaultConfig.stub.js' -const { utilities: defaultUtilities } = processPlugins(corePlugins(defaultConfig), defaultConfig) +const { utilities: defaultUtilities } = processPlugins( + corePlugins(resolveConfig([defaultConfig])), + defaultConfig +) function run(input, config = defaultConfig, utilities = defaultUtilities) { return postcss([substituteClassApplyAtRules(config, utilities)]).process(input, { @@ -200,10 +204,12 @@ test('you can apply utility classes without using the given prefix', () => { .foo { margin-top: 1rem; margin-bottom: 1rem; } ` - const config = { - ...defaultConfig, - prefix: 'tw-', - } + const config = resolveConfig([ + { + ...defaultConfig, + prefix: 'tw-', + }, + ]) return run(input, config, processPlugins(corePlugins(config), config).utilities).then(result => { expect(result.css).toEqual(expected) @@ -220,12 +226,14 @@ test('you can apply utility classes without using the given prefix when using a .foo { margin-top: 1rem; margin-bottom: 1rem; } ` - const config = { - ...defaultConfig, - prefix: () => { - return 'tw-' + const config = resolveConfig([ + { + ...defaultConfig, + prefix: () => { + return 'tw-' + }, }, - } + ]) return run(input, config, processPlugins(corePlugins(config), config).utilities).then(result => { expect(result.css).toEqual(expected) diff --git a/defaultTheme.js b/defaultTheme.js index d940c29ae881..492ed180aca4 100644 --- a/defaultTheme.js +++ b/defaultTheme.js @@ -85,6 +85,23 @@ module.exports = function() { 'pink-lighter': '#ffbbca', 'pink-lightest': '#ffebef', }, + spacing: { + px: '1px', + '0': '0', + '1': '0.25rem', + '2': '0.5rem', + '3': '0.75rem', + '4': '1rem', + '5': '1.25rem', + '6': '1.5rem', + '8': '2rem', + '10': '2.5rem', + '12': '3rem', + '16': '4rem', + '20': '5rem', + '24': '6rem', + '32': '8rem', + }, screens: { sm: '576px', md: '768px', @@ -264,58 +281,9 @@ module.exports = function() { full: '100%', screen: '100vh', }, - padding: { - px: '1px', - '0': '0', - '1': '0.25rem', - '2': '0.5rem', - '3': '0.75rem', - '4': '1rem', - '5': '1.25rem', - '6': '1.5rem', - '8': '2rem', - '10': '2.5rem', - '12': '3rem', - '16': '4rem', - '20': '5rem', - '24': '6rem', - '32': '8rem', - }, - margin: { - auto: 'auto', - px: '1px', - '0': '0', - '1': '0.25rem', - '2': '0.5rem', - '3': '0.75rem', - '4': '1rem', - '5': '1.25rem', - '6': '1.5rem', - '8': '2rem', - '10': '2.5rem', - '12': '3rem', - '16': '4rem', - '20': '5rem', - '24': '6rem', - '32': '8rem', - }, - negativeMargin: { - px: '1px', - '0': '0', - '1': '0.25rem', - '2': '0.5rem', - '3': '0.75rem', - '4': '1rem', - '5': '1.25rem', - '6': '1.5rem', - '8': '2rem', - '10': '2.5rem', - '12': '3rem', - '16': '4rem', - '20': '5rem', - '24': '6rem', - '32': '8rem', - }, + padding: theme => theme.spacing, + margin: theme => ({ auto: 'auto', ...theme.spacing }), + negativeMargin: theme => theme.spacing, shadows: { default: '0 2px 4px 0 rgba(0,0,0,0.10)', md: '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)',