ignore/skip urls with a fragment or query (#539)

* ignore urls with a fragment or query

* Apply suggestions from code review

Co-authored-by: Ryan Zimmerman <opensrc@ryanzim.com>

---------

Co-authored-by: Ryan Zimmerman <opensrc@ryanzim.com>

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/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{}

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{}
 }