From 944dd0016056c7415347a75b6f50aa71f47a2e7e Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 24 Nov 2017 12:08:43 -0500 Subject: [PATCH 1/7] Move modules key out of options and up to top level --- defaultConfig.stub.js | 98 +++++++++++-------- src/lib/substituteTailwindUtilitiesAtRules.js | 6 +- 2 files changed, 56 insertions(+), 48 deletions(-) diff --git a/defaultConfig.stub.js b/defaultConfig.stub.js index 691745127..5abf34d7d 100644 --- a/defaultConfig.stub.js +++ b/defaultConfig.stub.js @@ -757,6 +757,61 @@ module.exports = { }, + /* + |----------------------------------------------------------------------------- + | Modules + |----------------------------------------------------------------------------- + | + | Here is where you control which modules are generated and what variants are + | generated for each of those modules. + | + */ + + 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 +825,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/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)) From f84507457f6cba56fa0857e232828c615c75f965 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 24 Nov 2017 12:34:09 -0500 Subject: [PATCH 2/7] Extract mergeConfigWithDefaults for easier testability --- __tests__/mergeConfigWithDefaults.test.js | 79 +++++++++++++++++++++++ src/index.js | 10 +-- src/util/mergeConfigWithDefaults.js | 8 +++ 3 files changed, 89 insertions(+), 8 deletions(-) create mode 100644 __tests__/mergeConfigWithDefaults.test.js create mode 100644 src/util/mergeConfigWithDefaults.js diff --git a/__tests__/mergeConfigWithDefaults.test.js b/__tests__/mergeConfigWithDefaults.test.js new file mode 100644 index 000000000..e3c1cfa01 --- /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/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/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 +} From fc19bc2e89ca995ee1ea5de63d9114de397a7f6f Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 24 Nov 2017 12:34:21 -0500 Subject: [PATCH 3/7] Add test to make sure custom config is actually used --- __tests__/customConfig.test.js | 28 ++++++++++++++++++++++++++++ __tests__/fixtures/customConfig.js | 5 +++++ 2 files changed, 33 insertions(+) create mode 100644 __tests__/customConfig.test.js create mode 100644 __tests__/fixtures/customConfig.js diff --git a/__tests__/customConfig.test.js b/__tests__/customConfig.test.js new file mode 100644 index 000000000..b39536d37 --- /dev/null +++ b/__tests__/customConfig.test.js @@ -0,0 +1,28 @@ +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..495c7307d --- /dev/null +++ b/__tests__/fixtures/customConfig.js @@ -0,0 +1,5 @@ +module.exports = { + screens: { + mobile: '400px', + } +} From d28aa3c73afee482412380c2166bf8350bba9755 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 24 Nov 2017 12:38:53 -0500 Subject: [PATCH 4/7] Don't try to run JS files in fixtures folder as tests --- package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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" From 6b307cd8af5023c9d21b41522f30db8d100b45c0 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 24 Nov 2017 12:39:27 -0500 Subject: [PATCH 5/7] Fix style --- __tests__/customConfig.test.js | 6 ++- __tests__/fixtures/customConfig.js | 6 +-- __tests__/mergeConfigWithDefaults.test.js | 46 +++++++++++------------ 3 files changed, 30 insertions(+), 28 deletions(-) diff --git a/__tests__/customConfig.test.js b/__tests__/customConfig.test.js index b39536d37..384b1d709 100644 --- a/__tests__/customConfig.test.js +++ b/__tests__/customConfig.test.js @@ -4,13 +4,15 @@ 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(` + .process( + ` @responsive { .foo { color: blue; } } - `) + ` + ) .then(result => { const expected = ` .foo { diff --git a/__tests__/fixtures/customConfig.js b/__tests__/fixtures/customConfig.js index 495c7307d..37a9d11ad 100644 --- a/__tests__/fixtures/customConfig.js +++ b/__tests__/fixtures/customConfig.js @@ -1,5 +1,5 @@ module.exports = { - screens: { - mobile: '400px', - } + screens: { + mobile: '400px', + }, } diff --git a/__tests__/mergeConfigWithDefaults.test.js b/__tests__/mergeConfigWithDefaults.test.js index e3c1cfa01..b8d4a6940 100644 --- a/__tests__/mergeConfigWithDefaults.test.js +++ b/__tests__/mergeConfigWithDefaults.test.js @@ -2,66 +2,66 @@ import mergeConfigWithDefaults from '../src/util/mergeConfigWithDefaults' test('missing top level keys are pulled from the default config', () => { const userConfig = { - colors: { red: '#ff0000' }, - modules: {}, - options: {}, + colors: { red: '#ff0000' }, + modules: {}, + options: {}, } const defaultConfig = { - colors: { green: '#00ff00' }, + colors: { green: '#00ff00' }, screens: { - sm: '576px' + sm: '576px', }, - modules: {}, - options: {}, + modules: {}, + options: {}, } const result = mergeConfigWithDefaults(userConfig, defaultConfig) expect(result).toEqual({ - colors: { red: '#ff0000' }, + colors: { red: '#ff0000' }, screens: { - sm: '576px' + sm: '576px', }, - modules: {}, - options: {}, + modules: {}, + options: {}, }) }) test('user modules are merged with default modules', () => { const userConfig = { - modules: { flexbox: false }, - options: {}, + modules: { flexbox: false }, + options: {}, } const defaultConfig = { - modules: { + modules: { flexbox: ['responsive'], textAlign: ['responsive'], }, - options: {}, + options: {}, } const result = mergeConfigWithDefaults(userConfig, defaultConfig) expect(result).toEqual({ - modules: { + modules: { flexbox: false, textAlign: ['responsive'], }, - options: {}, + options: {}, }) }) test('user options are merged with default options', () => { const userConfig = { - modules: {}, - options: { prefix: 'tw-' }, + modules: {}, + options: { prefix: 'tw-' }, } const defaultConfig = { - modules: {}, - options: { + modules: {}, + options: { prefix: '-', important: false, }, @@ -70,8 +70,8 @@ test('user options are merged with default options', () => { const result = mergeConfigWithDefaults(userConfig, defaultConfig) expect(result).toEqual({ - modules: {}, - options: { + modules: {}, + options: { prefix: 'tw-', important: false, }, From 5a37981b390971f1d10d74d75e2d290e903f842e Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 24 Nov 2017 12:40:26 -0500 Subject: [PATCH 6/7] Add link to imaginary docs section --- defaultConfig.stub.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/defaultConfig.stub.js b/defaultConfig.stub.js index 5abf34d7d..8208de2d1 100644 --- a/defaultConfig.stub.js +++ b/defaultConfig.stub.js @@ -759,7 +759,7 @@ module.exports = { /* |----------------------------------------------------------------------------- - | Modules + | Modules https://tailwindcss.com/docs/configuration#modules |----------------------------------------------------------------------------- | | Here is where you control which modules are generated and what variants are From 8e40be44873a68fccb6b8ff2d0813d70bba83dae Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 24 Nov 2017 12:42:11 -0500 Subject: [PATCH 7/7] Add more useful inline documentation to modules section of config --- defaultConfig.stub.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/defaultConfig.stub.js b/defaultConfig.stub.js index 8208de2d1..d6197596d 100644 --- a/defaultConfig.stub.js +++ b/defaultConfig.stub.js @@ -765,6 +765,10 @@ module.exports = { | 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: {