Move container component to a built-in plugin

Author: adamwathan

defaultConfig.stub.js

@@ -872,7 +872,9 @@ module.exports = {
   |
   */
 
-  plugins: [],
+  plugins: [
+    require('./plugins/container')(),
+  ],
 
 
   /*

plugins/container.js

@@ -0,0 +1 @@
+module.exports = require('../lib/plugins/container')

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()
   })

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))

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,
+    ])
+  }
+}