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..c9ff79a08 100644 --- a/__tests__/containerPlugin.test.js +++ b/__tests__/containerPlugin.test.js @@ -41,38 +41,16 @@ test.only('options are not required', () => { `) }) -test.only('screens can be specified explicitly', () => { +test.only('screens can be passed explicitly', () => { const { components } = processPlugins( - [ - container({ - screens: { - sm: '400px', - lg: '500px', + [container()], + config({ + theme: { + 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('screens can be an array', () => { - const { components } = processPlugins( - [ - container({ - screens: ['400px', '500px'], - }), - ], - config() + }, + }) ) expect(css(components)).toMatchCss(` @@ -88,12 +66,14 @@ test.only('screens can be an array', () => { 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 +99,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 +132,16 @@ 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: { + screens: ['400px', '500px'], + center: true, + padding: '2rem', }, - center: true, - padding: '2rem', - }), - ], - config() + }, + }) ) expect(css(components)).toMatchCss(` diff --git a/defaultConfig.stub.js b/defaultConfig.stub.js index 54b40fc12..9f1c37fdf 100644 --- a/defaultConfig.stub.js +++ b/defaultConfig.stub.js @@ -70,12 +70,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 5362486ea..6463ec0da 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' @@ -68,6 +69,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..6beb6e50a 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.container.screens', 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'), + } : {} ), },