Sort media queries. Fixes #577

Author: jxnblk

packages/css/src/index.js

@@ -166,7 +166,10 @@ const responsive = styles => theme => {
     }
     for (let i = 0; i < value.slice(0, mediaQueries.length).length; i++) {
       const media = mediaQueries[i]
-      if (value[i] == null) continue
+      if (value[i] == null) {
+        next[media] = {}
+        continue
+      }
       if (!media) {
         next[key] = value[i]
         continue

packages/css/test/index.js

@@ -263,6 +263,7 @@ test('skip breakpoints', () => {
   })(theme)
   expect(result).toEqual({
     width: '100%',
+    '@media screen and (min-width: 40em)': {},
     '@media screen and (min-width: 52em)': {
       width: '50%',
     },
@@ -415,19 +416,19 @@ test('returns correct media query order', () => {
   const keys = Object.keys(result)
   expect(keys).toEqual([
     'width',
-    'color',
     '@media screen and (min-width: 40em)',
     '@media screen and (min-width: 52em)',
+    'color',
   ])
   expect(result).toEqual({
     width: '100%',
-    color: 'red',
     '@media screen and (min-width: 40em)': {
       color: 'green',
     },
     '@media screen and (min-width: 52em)': {
       width: '50%',
       color: 'blue',
     },
+    color: 'red',
   })
 })