Merge pull request tailwindlabs#908 from stidges/fix-container-screens

Fix container plugin screen order and duplication
brettgullan · May 13, 2019 · 6c2f3b9 · 6c2f3b9
2 parents 9c91b9a + 4cbe959
commit 6c2f3b9
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 8 deletions.
diff --git 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
@@ -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([
       {