diff --git a/__tests__/customConfig.test.js b/__tests__/customConfig.test.js new file mode 100644 index 000000000..384b1d709 --- /dev/null +++ b/__tests__/customConfig.test.js @@ -0,0 +1,30 @@ +import path from 'path' +import postcss from 'postcss' +import tailwind from '../src/index' + +test('it uses the values from the custom config file', () => { + return postcss([tailwind(path.resolve(`${__dirname}/fixtures/customConfig.js`))]) + .process( + ` + @responsive { + .foo { + color: blue; + } + } + ` + ) + .then(result => { + const expected = ` + .foo { + color: blue; + } + @media (min-width: 400px) { + .mobile\\:foo { + color: blue; + } + } + ` + + expect(result.css).toMatchCss(expected) + }) +}) diff --git a/__tests__/fixtures/customConfig.js b/__tests__/fixtures/customConfig.js new file mode 100644 index 000000000..37a9d11ad --- /dev/null +++ b/__tests__/fixtures/customConfig.js @@ -0,0 +1,5 @@ +module.exports = { + screens: { + mobile: '400px', + }, +} diff --git a/__tests__/mergeConfigWithDefaults.test.js b/__tests__/mergeConfigWithDefaults.test.js new file mode 100644 index 000000000..b8d4a6940 --- /dev/null +++ b/__tests__/mergeConfigWithDefaults.test.js @@ -0,0 +1,79 @@ +import mergeConfigWithDefaults from '../src/util/mergeConfigWithDefaults' + +test('missing top level keys are pulled from the default config', () => { + const userConfig = { + colors: { red: '#ff0000' }, + modules: {}, + options: {}, + } + + const defaultConfig = { + colors: { green: '#00ff00' }, + screens: { + sm: '576px', + }, + modules: {}, + options: {}, + } + + const result = mergeConfigWithDefaults(userConfig, defaultConfig) + + expect(result).toEqual({ + colors: { red: '#ff0000' }, + screens: { + sm: '576px', + }, + modules: {}, + options: {}, + }) +}) + +test('user modules are merged with default modules', () => { + const userConfig = { + modules: { flexbox: false }, + options: {}, + } + + const defaultConfig = { + modules: { + flexbox: ['responsive'], + textAlign: ['responsive'], + }, + options: {}, + } + + const result = mergeConfigWithDefaults(userConfig, defaultConfig) + + expect(result).toEqual({ + modules: { + flexbox: false, + textAlign: ['responsive'], + }, + options: {}, + }) +}) + +test('user options are merged with default options', () => { + const userConfig = { + modules: {}, + options: { prefix: 'tw-' }, + } + + const defaultConfig = { + modules: {}, + options: { + prefix: '-', + important: false, + }, + } + + const result = mergeConfigWithDefaults(userConfig, defaultConfig) + + expect(result).toEqual({ + modules: {}, + options: { + prefix: 'tw-', + important: false, + }, + }) +}) diff --git a/defaultConfig.stub.js b/defaultConfig.stub.js index 691745127..d6197596d 100644 --- a/defaultConfig.stub.js +++ b/defaultConfig.stub.js @@ -757,6 +757,65 @@ module.exports = { }, + /* + |----------------------------------------------------------------------------- + | Modules https://tailwindcss.com/docs/configuration#modules + |----------------------------------------------------------------------------- + | + | Here is where you control which modules are generated and what variants are + | generated for each of those modules. + | + | Currently supported variants: 'responsive', 'hover', 'focus' + | + | To disable a module completely, use `false` instead of an array. + | + */ + + modules: { + appearance: ['responsive'], + backgroundColors: ['responsive', 'hover'], + backgroundPosition: ['responsive'], + backgroundSize: ['responsive'], + borderColors: ['responsive', 'hover'], + borderRadius: ['responsive'], + borderStyle: ['responsive'], + borderWidths: ['responsive'], + cursor: ['responsive'], + display: ['responsive'], + flexbox: ['responsive'], + float: ['responsive'], + fonts: ['responsive'], + fontWeights: ['responsive', 'hover'], + height: ['responsive'], + leading: ['responsive'], + lists: ['responsive'], + margin: ['responsive'], + maxHeight: ['responsive'], + maxWidth: ['responsive'], + minHeight: ['responsive'], + minWidth: ['responsive'], + negativeMargin: ['responsive'], + opacity: ['responsive'], + overflow: ['responsive'], + padding: ['responsive'], + pointerEvents: ['responsive'], + position: ['responsive'], + resize: ['responsive'], + shadows: ['responsive'], + textAlign: ['responsive'], + textColors: ['responsive', 'hover'], + textSizes: ['responsive'], + textStyle: ['responsive', 'hover'], + tracking: ['responsive'], + userSelect: ['responsive'], + verticalAlign: ['responsive'], + visibility: ['responsive'], + whitespace: ['responsive'], + width: ['responsive'], + zIndex: ['responsive'], + }, + + /* |----------------------------------------------------------------------------- | Options https://tailwindcss.com/docs/configuration#options @@ -770,49 +829,6 @@ module.exports = { options: { prefix: '', important: false, - modules: { - appearance: ['responsive'], - backgroundColors: ['responsive', 'hover'], - backgroundPosition: ['responsive'], - backgroundSize: ['responsive'], - borderColors: ['responsive', 'hover'], - borderRadius: ['responsive'], - borderStyle: ['responsive'], - borderWidths: ['responsive'], - cursor: ['responsive'], - display: ['responsive'], - flexbox: ['responsive'], - float: ['responsive'], - fonts: ['responsive'], - fontWeights: ['responsive', 'hover'], - height: ['responsive'], - leading: ['responsive'], - lists: ['responsive'], - margin: ['responsive'], - maxHeight: ['responsive'], - maxWidth: ['responsive'], - minHeight: ['responsive'], - minWidth: ['responsive'], - negativeMargin: ['responsive'], - opacity: ['responsive'], - overflow: ['responsive'], - padding: ['responsive'], - pointerEvents: ['responsive'], - position: ['responsive'], - resize: ['responsive'], - shadows: ['responsive'], - textAlign: ['responsive'], - textColors: ['responsive', 'hover'], - textSizes: ['responsive'], - textStyle: ['responsive', 'hover'], - tracking: ['responsive'], - userSelect: ['responsive'], - verticalAlign: ['responsive'], - visibility: ['responsive'], - whitespace: ['responsive'], - width: ['responsive'], - zIndex: ['responsive'], - } }, } diff --git a/package.json b/package.json index 02ea20d3a..112f7c81a 100644 --- a/package.json +++ b/package.json @@ -69,7 +69,8 @@ ] }, "jest": { - "setupTestFrameworkScriptFile": "/jest/customMatchers.js" + "setupTestFrameworkScriptFile": "/jest/customMatchers.js", + "testPathIgnorePatterns": ["/__tests__/fixtures/"] }, "engines": { "node": ">=6.9.0" diff --git a/src/index.js b/src/index.js index 7dee9f57e..431f64a6e 100644 --- a/src/index.js +++ b/src/index.js @@ -15,13 +15,7 @@ import substituteResponsiveAtRules from './lib/substituteResponsiveAtRules' import substituteScreenAtRules from './lib/substituteScreenAtRules' import substituteClassApplyAtRules from './lib/substituteClassApplyAtRules' -function mergeConfigWithDefaults(config) { - const defaultConfig = require('../defaultConfig')() - _.defaults(config, defaultConfig) - config.options = _.defaults(config.options, defaultConfig.options) - config.options.modules = _.defaults(config.options.modules, defaultConfig.options.modules) - return config -} +import mergeConfigWithDefaults from './util/mergeConfigWithDefaults' const plugin = postcss.plugin('tailwind', config => { const plugins = [] @@ -36,7 +30,7 @@ const plugin = postcss.plugin('tailwind', config => { } delete require.cache[require.resolve(path.resolve(config))] - return mergeConfigWithDefaults(require(path.resolve(config))) + return mergeConfigWithDefaults(require(path.resolve(config)), require('../defaultConfig')()) } return postcss( diff --git a/src/lib/substituteTailwindUtilitiesAtRules.js b/src/lib/substituteTailwindUtilitiesAtRules.js index 67207a188..eb423cb7c 100644 --- a/src/lib/substituteTailwindUtilitiesAtRules.js +++ b/src/lib/substituteTailwindUtilitiesAtRules.js @@ -14,11 +14,7 @@ export default function(config) { return } - const utilities = generateModules( - utilityModules, - unwrappedConfig.options.modules, - unwrappedConfig - ) + const utilities = generateModules(utilityModules, unwrappedConfig.modules, unwrappedConfig) if (_.get(unwrappedConfig, 'options.important', false)) { utilities.walkDecls(decl => (decl.important = true)) diff --git a/src/util/mergeConfigWithDefaults.js b/src/util/mergeConfigWithDefaults.js new file mode 100644 index 000000000..4b466e5e8 --- /dev/null +++ b/src/util/mergeConfigWithDefaults.js @@ -0,0 +1,8 @@ +import _ from 'lodash' + +export default function(userConfig, defaultConfig) { + _.defaults(userConfig, defaultConfig) + userConfig.modules = _.defaults(userConfig.modules, defaultConfig.modules) + userConfig.options = _.defaults(userConfig.options, defaultConfig.options) + return userConfig +}