From c6449f8fa8943d7104f84bfd24006192a1068918 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 13 Mar 2019 21:04:45 -0400 Subject: [PATCH 1/2] Make container plugin a core plugin, configured in theme --- __tests__/cli.test.js | 1 - __tests__/containerPlugin.test.js | 105 ++++++++++-------------------- defaultConfig.stub.js | 10 +-- plugins/container.js | 1 - src/corePlugins.js | 2 + src/plugins/container.js | 17 +++-- 6 files changed, 48 insertions(+), 88 deletions(-) delete mode 100644 plugins/container.js diff --git a/__tests__/cli.test.js b/__tests__/cli.test.js index 91f7665f9..ac707f6fb 100644 --- a/__tests__/cli.test.js +++ b/__tests__/cli.test.js @@ -30,7 +30,6 @@ describe('cli', () => { it('creates a Tailwind config file without comments', () => { return cli(['init', '--no-comments']).then(() => { expect(utils.writeFile.mock.calls[0][1]).not.toContain('/**') - expect(utils.writeFile.mock.calls[0][1]).toContain('//') }) }) }) diff --git a/__tests__/containerPlugin.test.js b/__tests__/containerPlugin.test.js index 764c19bc7..f69254825 100644 --- a/__tests__/containerPlugin.test.js +++ b/__tests__/containerPlugin.test.js @@ -41,59 +41,16 @@ test.only('options are not required', () => { `) }) -test.only('screens can be specified explicitly', () => { - const { components } = processPlugins( - [ - container({ - screens: { - sm: '400px', - lg: '500px', - }, - }), - ], - config() - ) - - expect(css(components)).toMatchCss(` - .container { width: 100% } - @media (min-width: 400px) { - .container { max-width: 400px } - } - @media (min-width: 500px) { - .container { max-width: 500px } - } - `) -}) - -test.only('screens can be an array', () => { - const { components } = processPlugins( - [ - container({ - screens: ['400px', '500px'], - }), - ], - config() - ) - - expect(css(components)).toMatchCss(` - .container { width: 100% } - @media (min-width: 400px) { - .container { max-width: 400px } - } - @media (min-width: 500px) { - .container { max-width: 500px } - } - `) -}) - test.only('the container can be centered by default', () => { const { components } = processPlugins( - [ - container({ - center: true, - }), - ], - config() + [container()], + config({ + theme: { + container: { + center: true, + }, + }, + }) ) expect(css(components)).toMatchCss(` @@ -119,12 +76,14 @@ test.only('the container can be centered by default', () => { test.only('horizontal padding can be included by default', () => { const { components } = processPlugins( - [ - container({ - padding: '2rem', - }), - ], - config() + [container()], + config({ + theme: { + container: { + padding: '2rem', + }, + }, + }) ) expect(css(components)).toMatchCss(` @@ -150,17 +109,15 @@ test.only('horizontal padding can be included by default', () => { test.only('setting all options at once', () => { const { components } = processPlugins( - [ - container({ - screens: { - sm: '400px', - lg: '500px', + [container()], + config({ + theme: { + container: { + center: true, + padding: '2rem', }, - center: true, - padding: '2rem', - }), - ], - config() + }, + }) ) expect(css(components)).toMatchCss(` @@ -171,11 +128,17 @@ test.only('setting all options at once', () => { padding-right: 2rem; padding-left: 2rem } - @media (min-width: 400px) { - .container { max-width: 400px } + @media (min-width: 576px) { + .container { max-width: 576px } } - @media (min-width: 500px) { - .container { max-width: 500px } + @media (min-width: 768px) { + .container { max-width: 768px } + } + @media (min-width: 992px) { + .container { max-width: 992px } + } + @media (min-width: 1200px) { + .container { max-width: 1200px } } `) }) diff --git a/defaultConfig.stub.js b/defaultConfig.stub.js index 044b2555a..3e1f3a671 100644 --- a/defaultConfig.stub.js +++ b/defaultConfig.stub.js @@ -69,12 +69,6 @@ module.exports = { width: ['responsive'], zIndex: ['responsive'], }, - corePlugins: { - }, - plugins: [ - require('./plugins/container')({ - // center: true, - // padding: '1rem', - }), - ], + corePlugins: {}, + plugins: [], } diff --git a/plugins/container.js b/plugins/container.js deleted file mode 100644 index 32710da91..000000000 --- a/plugins/container.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('../lib/plugins/container') diff --git a/src/corePlugins.js b/src/corePlugins.js index b26d6dfe0..1d3e392f6 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -1,4 +1,5 @@ import preflight from './plugins/preflight' +import container from './plugins/container' import appearance from './plugins/appearance' import backgroundAttachment from './plugins/backgroundAttachment' import backgroundColor from './plugins/backgroundColor' @@ -67,6 +68,7 @@ import configurePlugins from './util/configurePlugins' export default function({ corePlugins: corePluginConfig }) { return configurePlugins(corePluginConfig, { preflight, + container, appearance, backgroundAttachment, backgroundColor, diff --git a/src/plugins/container.js b/src/plugins/container.js index 47728085d..66208f3f9 100644 --- a/src/plugins/container.js +++ b/src/plugins/container.js @@ -22,11 +22,9 @@ function extractMinWidths(breakpoints) { }) } -module.exports = function(options) { +module.exports = function() { return function({ addComponents, config }) { - const screens = _.get(options, 'screens', config('theme.screens')) - - const minWidths = extractMinWidths(screens) + const minWidths = extractMinWidths(config('theme.screens')) const atRules = _.map(minWidths, minWidth => { return { @@ -42,9 +40,14 @@ module.exports = function(options) { { '.container': Object.assign( { width: '100%' }, - _.get(options, 'center', false) ? { marginRight: 'auto', marginLeft: 'auto' } : {}, - _.has(options, 'padding') - ? { paddingRight: options.padding, paddingLeft: options.padding } + config('theme.container.center', false) + ? { marginRight: 'auto', marginLeft: 'auto' } + : {}, + _.has(config('theme.container', {}), 'padding') + ? { + paddingRight: config('theme.container.padding'), + paddingLeft: config('theme.container.padding'), + } : {} ), }, From fefc53b88bb21b92ebecf37932493e69f1eae294 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Thu, 14 Mar 2019 14:54:20 -0400 Subject: [PATCH 2/2] Reintroduce ability for screens to be passed explicitly --- __tests__/containerPlugin.test.js | 38 +++++++++++++++++++++++-------- src/plugins/container.js | 2 +- 2 files changed, 29 insertions(+), 11 deletions(-) diff --git a/__tests__/containerPlugin.test.js b/__tests__/containerPlugin.test.js index f69254825..c9ff79a08 100644 --- a/__tests__/containerPlugin.test.js +++ b/__tests__/containerPlugin.test.js @@ -41,6 +41,29 @@ test.only('options are not required', () => { `) }) +test.only('screens can be passed explicitly', () => { + const { components } = processPlugins( + [container()], + config({ + theme: { + container: { + screens: ['400px', '500px'], + }, + }, + }) + ) + + expect(css(components)).toMatchCss(` + .container { width: 100% } + @media (min-width: 400px) { + .container { max-width: 400px } + } + @media (min-width: 500px) { + .container { max-width: 500px } + } + `) +}) + test.only('the container can be centered by default', () => { const { components } = processPlugins( [container()], @@ -113,6 +136,7 @@ test.only('setting all options at once', () => { config({ theme: { container: { + screens: ['400px', '500px'], center: true, padding: '2rem', }, @@ -128,17 +152,11 @@ test.only('setting all options at once', () => { padding-right: 2rem; padding-left: 2rem } - @media (min-width: 576px) { - .container { max-width: 576px } + @media (min-width: 400px) { + .container { max-width: 400px } } - @media (min-width: 768px) { - .container { max-width: 768px } - } - @media (min-width: 992px) { - .container { max-width: 992px } - } - @media (min-width: 1200px) { - .container { max-width: 1200px } + @media (min-width: 500px) { + .container { max-width: 500px } } `) }) diff --git a/src/plugins/container.js b/src/plugins/container.js index 66208f3f9..6beb6e50a 100644 --- a/src/plugins/container.js +++ b/src/plugins/container.js @@ -24,7 +24,7 @@ function extractMinWidths(breakpoints) { module.exports = function() { return function({ addComponents, config }) { - const minWidths = extractMinWidths(config('theme.screens')) + const minWidths = extractMinWidths(config('theme.container.screens', config('theme.screens'))) const atRules = _.map(minWidths, minWidth => { return {