Merge pull request styled-system#812 from styled-system/fix-sort

Sort media queries naturally
damnjan · Sep 11, 2019 · dddd25c · dddd25c
2 parents ec73ace + 1077949
commit dddd25c
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/packages/core/src/index.js b/packages/core/src/index.js
@@ -14,9 +14,14 @@ export const merge = (a, b) => {
 // sort object-value responsive styles
 const sort = obj => {
   const next = {}
-  Object.keys(obj).sort().forEach(key => {
-    next[key] = obj[key]
-  })
+  Object.keys(obj)
+    .sort((a, b) => a.localeCompare(b, undefined, {
+      numeric: true,
+      sensitivity: 'base',
+    }))
+    .forEach(key => {
+      next[key] = obj[key]
+    })
   return next
 }
 

diff --git a/packages/core/test/system.js b/packages/core/test/system.js
@@ -257,16 +257,18 @@ test('sorts media queries when responsive object values are used', () => {
         sm: '32em',
         md: '40em',
         lg: '64em',
+        xl: '128em',
       }
     },
-    padding: { _: 16, lg: 64 },
+    padding: { _: 16, lg: 64, xl: 128 },
     margin: { sm: 4, md: 8 },
     color: { lg: 'tomato' },
   })
   expect(Object.keys(styles)).toEqual([
     '@media screen and (min-width: 32em)',
     '@media screen and (min-width: 40em)',
     '@media screen and (min-width: 64em)',
+    '@media screen and (min-width: 128em)',
     'padding',
   ])
 })