From fefc53b88bb21b92ebecf37932493e69f1eae294 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Thu, 14 Mar 2019 14:54:20 -0400
Subject: [PATCH] Reintroduce ability for screens to be passed explicitly

---
 __tests__/containerPlugin.test.js | 38 +++++++++++++++++++++++--------
 src/plugins/container.js          |  2 +-
 2 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/__tests__/containerPlugin.test.js b/__tests__/containerPlugin.test.js
index f69254825..c9ff79a08 100644
--- a/__tests__/containerPlugin.test.js
+++ b/__tests__/containerPlugin.test.js
@@ -41,6 +41,29 @@ test.only('options are not required', () => {
   `)
 })
 
+test.only('screens can be passed explicitly', () => {
+  const { components } = processPlugins(
+    [container()],
+    config({
+      theme: {
+        container: {
+          screens: ['400px', '500px'],
+        },
+      },
+    })
+  )
+
+  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('the container can be centered by default', () => {
   const { components } = processPlugins(
     [container()],
@@ -113,6 +136,7 @@ test.only('setting all options at once', () => {
     config({
       theme: {
         container: {
+          screens: ['400px', '500px'],
           center: true,
           padding: '2rem',
         },
@@ -128,17 +152,11 @@ test.only('setting all options at once', () => {
       padding-right: 2rem;
       padding-left: 2rem
     }
-    @media (min-width: 576px) {
-      .container { max-width: 576px }
+    @media (min-width: 400px) {
+      .container { max-width: 400px }
     }
-    @media (min-width: 768px) {
-      .container { max-width: 768px }
-    }
-    @media (min-width: 992px) {
-      .container { max-width: 992px }
-    }
-    @media (min-width: 1200px) {
-      .container { max-width: 1200px }
+    @media (min-width: 500px) {
+      .container { max-width: 500px }
     }
   `)
 })
diff --git a/src/plugins/container.js b/src/plugins/container.js
index 66208f3f9..6beb6e50a 100644
--- a/src/plugins/container.js
+++ b/src/plugins/container.js
@@ -24,7 +24,7 @@ function extractMinWidths(breakpoints) {
 
 module.exports = function() {
   return function({ addComponents, config }) {
-    const minWidths = extractMinWidths(config('theme.screens'))
+    const minWidths = extractMinWidths(config('theme.container.screens', config('theme.screens')))
 
     const atRules = _.map(minWidths, minWidth => {
       return {