Correctly sort media queries before joining them (#513)

Author: romainmenke

lib/join-media.js

@@ -1,5 +1,7 @@
 "use strict"
 
+const startsWithKeywordRegexp = /^(all|not|only|print|screen)/i
+
 module.exports = function (parentMedia, childMedia) {
   if (!parentMedia.length && childMedia.length) return childMedia
   if (parentMedia.length && !childMedia.length) return parentMedia
@@ -8,8 +10,17 @@ module.exports = function (parentMedia, childMedia) {
   const media = []
 
   parentMedia.forEach(parentItem => {
+    const parentItemStartsWithKeyword = startsWithKeywordRegexp.test(parentItem)
+
     childMedia.forEach(childItem => {
-      if (parentItem !== childItem) media.push(`${parentItem} and ${childItem}`)
+      const childItemStartsWithKeyword = startsWithKeywordRegexp.test(childItem)
+      if (parentItem !== childItem) {
+        if (childItemStartsWithKeyword && !parentItemStartsWithKeyword) {
+          media.push(`${childItem} and ${parentItem}`)
+        } else {
+          media.push(`${parentItem} and ${childItem}`)
+        }
+      }
     })
   })
 

test/fixtures/filter-ignore.expected.css

@@ -1,5 +1,5 @@
 @import "http://css" (min-width: 25em);
-@import "http://css-screen" (min-width: 25em) and screen;
+@import "http://css-screen" screen and (min-width: 25em);
 @import "http://css";
 @import "https://css";
 @import 'http://css';

test/fixtures/ignore.expected.css

@@ -1,5 +1,5 @@
 @import "http://css" (min-width: 25em);
-@import "http://css-screen" (min-width: 25em) and screen;
+@import "http://css-screen" screen and (min-width: 25em);
 @import "http://css";
 @import "https://css";
 @import 'http://css';