Repository: postcss/postcss-import
Pull request #539 (2023-07-23 09:15:09)

ignore/skip urls with a fragment or query
fixes : https://github.com/postcss/postcss-import/issues/537


Patch:
diff --git a/lib/join-media.js b/lib/join-media.js
index 0eff3c9..04ee827 100644
--- a/lib/join-media.js
+++ b/lib/join-media.js
@@ -20,6 +20,8 @@ module.exports = function joinMedia(parentMedia, childMedia) {
         } else {
           media.push(`${parentItem} and ${childItem}`)
         }
+      } else {
+        media.push(parentItem)
       }
     })
   })
diff --git a/lib/parse-styles.js b/lib/parse-styles.js
index d021dd4..834b4f8 100644
--- a/lib/parse-styles.js
+++ b/lib/parse-styles.js
@@ -27,8 +27,7 @@ async function parseStyles(
     stmt.parentMedia = media
     stmt.layer = joinLayer(layer, stmt.layer || [])
 
-    // skip protocol base uri (protocol://url) or protocol-relative
-    if (stmt.type !== "import" || /^(?:[a-z]+:)?\/\//i.test(stmt.uri)) {
+    if (stmt.type !== "import" || !isProcessableURL(stmt.uri)) {
       continue
     }
 
@@ -219,4 +218,27 @@ async function loadImportContent(
   )
 }
 
+function isProcessableURL(uri) {
+  // skip protocol base uri (protocol://url) or protocol-relative
+  if (/^(?:[a-z]+:)?\/\//i.test(uri)) {
+    return false
+  }
+
+  // check for fragment or query 
+  try {
+    // needs a base to parse properly
+    const url = new URL(uri, "https://example.com")
+
+    if (url.hash) {
+      return false
+    }
+
+    if (url.search) {
+      return false
+    }
+  } catch {} // Ignore
+
+  return true
+}
+
 module.exports = parseStyles


Test patch:
diff --git a/test/fixtures/filter-ignore.css b/test/fixtures/filter-ignore.css
index d134503..923d64d 100644
--- a/test/fixtures/filter-ignore.css
+++ b/test/fixtures/filter-ignore.css
@@ -12,4 +12,6 @@
 @import url("//css");
 @import url('//css');
 @import url(//css);
+@import url('foo.css?query=string');
+@import url('foo.css#hash');
 content{}
diff --git a/test/fixtures/filter-ignore.expected.css b/test/fixtures/filter-ignore.expected.css
index a979122..03093e4 100644
--- a/test/fixtures/filter-ignore.expected.css
+++ b/test/fixtures/filter-ignore.expected.css
@@ -13,6 +13,8 @@
 @import url("//css");
 @import url('//css');
 @import url(//css);
+@import url('foo.css?query=string');
+@import url('foo.css#hash');
 @media (min-width: 25em){
 ignore{}
 }
diff --git a/test/fixtures/imports/media-query-screen.css b/test/fixtures/imports/media-query-screen.css
new file mode 100644
index 0000000..e96a63d
--- /dev/null
+++ b/test/fixtures/imports/media-query-screen.css
@@ -0,0 +1,1 @@
+@import "foo.css" screen;
diff --git a/test/fixtures/media-join.css b/test/fixtures/media-join.css
index b9d595a..28ca38a 100644
--- a/test/fixtures/media-join.css
+++ b/test/fixtures/media-join.css
@@ -1,3 +1,4 @@
 @import "media-join-nested.css" one-1;
 @import "media-join-nested.css" or-left-1, or-right-1;
 @import "media-join-nested.css" and-left-1 and and-right-1;
+@import "media-query-screen.css" screen;
diff --git a/test/fixtures/media-join.expected.css b/test/fixtures/media-join.expected.css
index 0dd4562..b733b0b 100644
--- a/test/fixtures/media-join.expected.css
+++ b/test/fixtures/media-join.expected.css
@@ -15,3 +15,7 @@
 @media and-left-1 and and-right-1 and or-left-2, and-left-1 and and-right-1 and or-right-2 {}
 
 @media and-left-1 and and-right-1 and and-left-2 and and-right-2 {}
+
+@media screen {
+foo{}
+}