From 4cbe95900055633b19862a727fa83a4c69494661 Mon Sep 17 00:00:00 2001
From: Stidges <info@stidges.com>
Date: Sun, 12 May 2019 18:50:03 -0400
Subject: [PATCH] Fix container plugin screen order and duplication

---
 __tests__/containerPlugin.test.js | 50 +++++++++++++++++++++++++++++++
 src/plugins/container.js          | 20 ++++++++-----
 2 files changed, 62 insertions(+), 8 deletions(-)

diff --git a/__tests__/containerPlugin.test.js b/__tests__/containerPlugin.test.js
index c9ff79a0864e..c779b813fa42 100644
--- a/__tests__/containerPlugin.test.js
+++ b/__tests__/containerPlugin.test.js
@@ -64,6 +64,56 @@ test.only('screens can be passed explicitly', () => {
   `)
 })
 
+test.only('screens are ordered ascending by min-width', () => {
+  const { components } = processPlugins(
+    [container()],
+    config({
+      theme: {
+        container: {
+          screens: ['500px', '400px'],
+        },
+      },
+    })
+  )
+
+  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 are deduplicated by min-width', () => {
+  const { components } = processPlugins(
+    [container()],
+    config({
+      theme: {
+        container: {
+          screens: {
+            sm: '576px',
+            md: '768px',
+            'sm-only': { min: '576px', max: '767px' },
+          },
+        },
+      },
+    })
+  )
+
+  expect(css(components)).toMatchCss(`
+    .container { width: 100% }
+    @media (min-width: 576px) {
+      .container { max-width: 576px }
+    }
+    @media (min-width: 768px) {
+      .container { max-width: 768px }
+    }
+  `)
+})
+
 test.only('the container can be centered by default', () => {
   const { components } = processPlugins(
     [container()],
diff --git a/src/plugins/container.js b/src/plugins/container.js
index 33f6e21440cf..12e0c42efeea 100644
--- a/src/plugins/container.js
+++ b/src/plugins/container.js
@@ -26,15 +26,19 @@ module.exports = function() {
   return function({ addComponents, theme }) {
     const minWidths = extractMinWidths(theme('container.screens', theme('screens')))
 
-    const atRules = _.map(minWidths, minWidth => {
-      return {
-        [`@media (min-width: ${minWidth})`]: {
-          '.container': {
-            'max-width': minWidth,
+    const atRules = _(minWidths)
+      .sortBy(minWidth => parseInt(minWidth))
+      .sortedUniq()
+      .map(minWidth => {
+        return {
+          [`@media (min-width: ${minWidth})`]: {
+            '.container': {
+              'max-width': minWidth,
+            },
           },
-        },
-      }
-    })
+        }
+      })
+      .value()
 
     addComponents([
       {