From 2db3239ec1bcf94bab9eb988e1a5c745bdcfc7cd Mon Sep 17 00:00:00 2001
From: Romain Menke <11521496+romainmenke@users.noreply.github.com>
Date: Thu, 1 Dec 2022 22:11:06 +0100
Subject: [PATCH] Correctly sort media queries before joining them (#513)

---
 lib/join-media.js                        | 13 ++++++++++++-
 test/fixtures/filter-ignore.expected.css |  2 +-
 test/fixtures/ignore.expected.css        |  2 +-
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/lib/join-media.js b/lib/join-media.js
index 5780de9a..fcaaecd3 100644
--- a/lib/join-media.js
+++ b/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}`)
+        }
+      }
     })
   })
 
diff --git a/test/fixtures/filter-ignore.expected.css b/test/fixtures/filter-ignore.expected.css
index 527c13e0..a9791220 100644
--- a/test/fixtures/filter-ignore.expected.css
+++ b/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';
diff --git a/test/fixtures/ignore.expected.css b/test/fixtures/ignore.expected.css
index 0f1fcc77..dd97ad66 100644
--- a/test/fixtures/ignore.expected.css
+++ b/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';