From b06e9790807d40e26063d37dc419389a00e54ac0 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Mon, 12 Mar 2018 12:56:47 -0400 Subject: [PATCH 1/5] Generate container classes as components, not utilities --- __tests__/fixtures/tailwind-input.css | 2 ++ src/lib/substituteTailwindAtRules.js | 4 ++-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/__tests__/fixtures/tailwind-input.css b/__tests__/fixtures/tailwind-input.css index ac3999689618..53204f9fd112 100644 --- a/__tests__/fixtures/tailwind-input.css +++ b/__tests__/fixtures/tailwind-input.css @@ -1,5 +1,7 @@ @tailwind preflight; +@tailwind components; + @tailwind utilities; @responsive { diff --git a/src/lib/substituteTailwindAtRules.js b/src/lib/substituteTailwindAtRules.js index 8fba3d8dfebc..004e99960384 100644 --- a/src/lib/substituteTailwindAtRules.js +++ b/src/lib/substituteTailwindAtRules.js @@ -22,7 +22,7 @@ export default function(config) { if (atRule.params === 'components') { const pluginComponentTree = postcss.root({ - nodes: pluginComponents, + nodes: [...container(unwrappedConfig), ...pluginComponents], }) pluginComponentTree.walk(node => (node.source = atRule.source)) @@ -39,7 +39,7 @@ export default function(config) { } const tailwindUtilityTree = postcss.root({ - nodes: [...container(unwrappedConfig), ...utilities.nodes], + nodes: utilities.nodes, }) const pluginUtilityTree = postcss.root({ From ffa94adacb758671990d866b26ed967ccafa92fb Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Mon, 12 Mar 2018 13:17:06 -0400 Subject: [PATCH 2/5] Move container component to a built-in plugin --- defaultConfig.stub.js | 4 ++- plugins/container.js | 1 + src/cli.js | 4 +++ src/lib/substituteTailwindAtRules.js | 3 +- src/plugins/container.js | 53 ++++++++++++++++++++++++++++ 5 files changed, 62 insertions(+), 3 deletions(-) create mode 100644 plugins/container.js create mode 100644 src/plugins/container.js diff --git a/defaultConfig.stub.js b/defaultConfig.stub.js index a848eae6a61e..b3112cc19547 100644 --- a/defaultConfig.stub.js +++ b/defaultConfig.stub.js @@ -872,7 +872,9 @@ module.exports = { | */ - plugins: [], + plugins: [ + require('./plugins/container')(), + ], /* diff --git a/plugins/container.js b/plugins/container.js new file mode 100644 index 000000000000..32710da91fe5 --- /dev/null +++ b/plugins/container.js @@ -0,0 +1 @@ +module.exports = require('../lib/plugins/container') diff --git a/src/cli.js b/src/cli.js index 7ed4724778df..18b25584e01f 100755 --- a/src/cli.js +++ b/src/cli.js @@ -54,6 +54,10 @@ program const output = fs.readFileSync(path.resolve(__dirname, '../defaultConfig.stub.js'), 'utf8') fs.outputFileSync(destination, output.replace('// let defaultConfig', 'let defaultConfig')) + fs.outputFileSync( + destination, + output.replace("require('./plugins/container')", "require('tailwindcss/plugins/container')") + ) console.log(`Generated Tailwind config: ${destination}`) process.exit() }) diff --git a/src/lib/substituteTailwindAtRules.js b/src/lib/substituteTailwindAtRules.js index 004e99960384..70cdaa10ce79 100644 --- a/src/lib/substituteTailwindAtRules.js +++ b/src/lib/substituteTailwindAtRules.js @@ -1,6 +1,5 @@ import fs from 'fs' import postcss from 'postcss' -import container from '../generators/container' import utilityModules from '../utilityModules' import prefixTree from '../util/prefixTree' import generateModules from '../util/generateModules' @@ -22,7 +21,7 @@ export default function(config) { if (atRule.params === 'components') { const pluginComponentTree = postcss.root({ - nodes: [...container(unwrappedConfig), ...pluginComponents], + nodes: pluginComponents, }) pluginComponentTree.walk(node => (node.source = atRule.source)) diff --git a/src/plugins/container.js b/src/plugins/container.js new file mode 100644 index 000000000000..5ea7e32fcf3b --- /dev/null +++ b/src/plugins/container.js @@ -0,0 +1,53 @@ +/* eslint-disable no-shadow */ +import _ from 'lodash' +import postcss from 'postcss' +import defineClass from '../util/defineClass' + +function extractMinWidths(breakpoints) { + return _.flatMap(breakpoints, breakpoints => { + if (_.isString(breakpoints)) { + breakpoints = { min: breakpoints } + } + + if (!_.isArray(breakpoints)) { + breakpoints = [breakpoints] + } + + return _(breakpoints) + .filter(breakpoint => { + return _.has(breakpoint, 'min') || _.has(breakpoint, 'min-width') + }) + .map(breakpoint => { + return _.get(breakpoint, 'min-width', breakpoint.min) + }) + .value() + }) +} + +module.exports = function(options) { + return function({ addComponents, config }) { + const screens = _.get(options, 'screens', config('screens')) + + const minWidths = extractMinWidths(screens) + + const atRules = _.map(minWidths, minWidth => { + const atRule = postcss.atRule({ + name: 'media', + params: `(min-width: ${minWidth})`, + }) + atRule.append( + defineClass('container', { + 'max-width': minWidth, + }) + ) + return atRule + }) + + addComponents([ + defineClass('container', { + width: '100%', + }), + ...atRules, + ]) + } +} From 8a808d8c3d1b6751ffee9fd2347b6458a4bf7024 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Mon, 12 Mar 2018 13:20:56 -0400 Subject: [PATCH 3/5] Refactor container plugin to CSS-in-JS --- src/plugins/container.js | 27 ++++++++++++--------------- 1 file changed, 12 insertions(+), 15 deletions(-) diff --git a/src/plugins/container.js b/src/plugins/container.js index 5ea7e32fcf3b..8caad7b56c95 100644 --- a/src/plugins/container.js +++ b/src/plugins/container.js @@ -1,7 +1,5 @@ /* eslint-disable no-shadow */ import _ from 'lodash' -import postcss from 'postcss' -import defineClass from '../util/defineClass' function extractMinWidths(breakpoints) { return _.flatMap(breakpoints, breakpoints => { @@ -31,22 +29,21 @@ module.exports = function(options) { const minWidths = extractMinWidths(screens) const atRules = _.map(minWidths, minWidth => { - const atRule = postcss.atRule({ - name: 'media', - params: `(min-width: ${minWidth})`, - }) - atRule.append( - defineClass('container', { - 'max-width': minWidth, - }) - ) - return atRule + return { + [`@media (min-width: ${minWidth})`]: { + '.container': { + 'max-width': minWidth, + }, + }, + } }) addComponents([ - defineClass('container', { - width: '100%', - }), + { + '.container': { + width: '100%', + }, + }, ...atRules, ]) } From d4c5ff0407bd8def5bcd9fb8e5e8bbf8d85e8c63 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Mon, 12 Mar 2018 13:23:02 -0400 Subject: [PATCH 4/5] Remove old container generator --- src/generators/container.js | 49 ------------------------------------- 1 file changed, 49 deletions(-) delete mode 100644 src/generators/container.js diff --git a/src/generators/container.js b/src/generators/container.js deleted file mode 100644 index 3742e2e617bc..000000000000 --- a/src/generators/container.js +++ /dev/null @@ -1,49 +0,0 @@ -/* eslint-disable no-shadow */ -import _ from 'lodash' -import postcss from 'postcss' -import defineClass from '../util/defineClass' - -function extractMinWidths(breakpoints) { - return _.flatMap(breakpoints, breakpoints => { - if (_.isString(breakpoints)) { - breakpoints = { min: breakpoints } - } - - if (!_.isArray(breakpoints)) { - breakpoints = [breakpoints] - } - - return _(breakpoints) - .filter(breakpoint => { - return _.has(breakpoint, 'min') || _.has(breakpoint, 'min-width') - }) - .map(breakpoint => { - return _.get(breakpoint, 'min-width', breakpoint.min) - }) - .value() - }) -} - -export default function({ screens }) { - const minWidths = extractMinWidths(screens) - - const atRules = _.map(minWidths, minWidth => { - const atRule = postcss.atRule({ - name: 'media', - params: `(min-width: ${minWidth})`, - }) - atRule.append( - defineClass('container', { - 'max-width': minWidth, - }) - ) - return atRule - }) - - return [ - defineClass('container', { - width: '100%', - }), - ...atRules, - ] -} From a8c34d9b143f467f2cfd2ea18bb6312dc156a426 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Mon, 12 Mar 2018 13:26:08 -0400 Subject: [PATCH 5/5] Add comment about enabling container by default --- defaultConfig.stub.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/defaultConfig.stub.js b/defaultConfig.stub.js index b3112cc19547..f63937827f26 100644 --- a/defaultConfig.stub.js +++ b/defaultConfig.stub.js @@ -864,8 +864,9 @@ module.exports = { | Plugins https://tailwindcss.com/docs/plugins |----------------------------------------------------------------------------- | - | Here is where you can register any additional plugins you'd like to use in - | your project. + | Here is where you can register any plugins you'd like to use in your + | project. Tailwind's built-in `container` plugin is enabled by default to + | give you a Bootstrap-style responsive container component out of the box. | | Be sure to view the complete plugin documentation to learn more about how | the plugin system works.