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';