From 6e7ae5891092dc06bacb22022e74ca91d7a8adab Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Mon, 12 Mar 2018 13:17:06 -0400
Subject: [PATCH] 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 a848eae6a..b3112cc19 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 000000000..32710da91
--- /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 7ed472477..18b25584e 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 004e99960..70cdaa10c 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 000000000..5ea7e32fc
--- /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,
+    ])
+  }
+}