From 088cdc9a41acef4ca096e9af6af7f6b5b601f97e Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Mon, 12 Mar 2018 13:20:56 -0400
Subject: [PATCH] Refactor container plugin to CSS-in-JS

---
 src/plugins/container.js | 27 ++++++++++++---------------
 1 file changed, 12 insertions(+), 15 deletions(-)

diff --git a/src/plugins/container.js b/src/plugins/container.js
index 5ea7e32fc..8caad7b56 100644
--- a/src/plugins/container.js
+++ b/src/plugins/container.js
@@ -1,7 +1,5 @@
 /* eslint-disable no-shadow */
 import _ from 'lodash'
-import postcss from 'postcss'
-import defineClass from '../util/defineClass'
 
 function extractMinWidths(breakpoints) {
   return _.flatMap(breakpoints, breakpoints => {
@@ -31,22 +29,21 @@ module.exports = function(options) {
     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
+      return {
+        [`@media (min-width: ${minWidth})`]: {
+          '.container': {
+            'max-width': minWidth,
+          },
+        },
+      }
     })
 
     addComponents([
-      defineClass('container', {
-        width: '100%',
-      }),
+      {
+        '.container': {
+          width: '100%',
+        },
+      },
       ...atRules,
     ])
   }