Merge pull request #765 from tailwindcss/make-container-core

Make container plugin a core plugin, configured in theme

Author: adamwathan

__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('//')
       })
     })
   })

__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(`

defaultConfig.stub.js

@@ -70,12 +70,6 @@ module.exports = {
     width: ['responsive'],
     zIndex: ['responsive'],
   },
-  corePlugins: {
-  },
-  plugins: [
-    require('./plugins/container')({
-      // center: true,
-      // padding: '1rem',
-    }),
-  ],
+  corePlugins: {},
+  plugins: [],
 }

plugins/container.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,

src/corePlugins.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'),
+              }
             : {}
         ),
       },