Merge pull request #600 from system-ui/css-media-order

Adjust media query sort logic

Author: jxnblk

packages/css/src/index.js

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

packages/css/test/index.js

@@ -432,3 +432,27 @@ test('returns correct media query order', () => {
     color: 'red',
   })
 })
+
+test('returns correct media query order 2', () => {
+  const result = css({
+    flexDirection: 'column',
+    justifyContent: [null, 'flex-start', 'flex-end'],
+    color: 'background',
+    height: '100%',
+    px: [2, 3, 4],
+    py: 4,
+  })(theme)
+  const keys = Object.keys(result)
+  expect(keys).toEqual([
+    'flexDirection',
+    'justifyContent',
+    '@media screen and (min-width: 40em)',
+    '@media screen and (min-width: 52em)',
+    'color',
+    'height',
+    'paddingLeft',
+    'paddingRight',
+    'paddingTop',
+    'paddingBottom',
+  ])
+})