fix: pass query with hash to other loaders (#1261)

Author: alexander-akait

src/utils.js

@@ -85,10 +85,10 @@ function normalizeUrl(url, isStringValue) {
   }
 
   if (matchNativeWin32Path.test(url)) {
-    return decodeURIComponent(normalizedUrl);
+    return decodeURI(normalizedUrl);
   }
 
-  return decodeURIComponent(unescape(normalizedUrl));
+  return decodeURI(unescape(normalizedUrl));
 }
 
 function requestify(url, rootContext) {

test/__snapshots__/loader.test.js.snap

@@ -64,6 +64,37 @@ Array [
 
 exports[`loader should not generate console.warn when plugins disabled and hideNothingWarning is "true": warnings 1`] = `Array []`;
 
+exports[`loader should pass queries to other loader: errors 1`] = `Array []`;
+
+exports[`loader should pass queries to other loader: module 1`] = `
+"// Imports
+import ___CSS_LOADER_API_IMPORT___ from \\"../../src/runtime/api.js\\";
+import ___CSS_LOADER_GET_URL_IMPORT___ from \\"../../src/runtime/getUrl.js\\";
+import ___CSS_LOADER_URL_IMPORT_0___ from \\"./url/image.svg?color=%23BAAFDB%3F\\";
+var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
+var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___, { hash: \\"#foo\\" });
+// Module
+___CSS_LOADER_EXPORT___.push([module.id, \\".example {\\\\n    background-image: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\", \\"\\"]);
+// Exports
+export default ___CSS_LOADER_EXPORT___;
+"
+`;
+
+exports[`loader should pass queries to other loader: result 1`] = `
+Array [
+  Array [
+    "./other-loader-query.css",
+    ".example {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=#foo);
+}
+",
+    "",
+  ],
+]
+`;
+
+exports[`loader should pass queries to other loader: warnings 1`] = `Array []`;
+
 exports[`loader should reuse \`ast\` from "postcss-loader": errors 1`] = `Array []`;
 
 exports[`loader should reuse \`ast\` from "postcss-loader": module 1`] = `

test/fixtures/other-loader-query.css

@@ -0,0 +1,3 @@
+.example {
+    background-image: url('./url/image.svg?color=%23BAAFDB%3F#foo');
+}

test/fixtures/other-loader-query.js

@@ -0,0 +1,5 @@
+import css from './other-loader-query.css';
+
+__export__ = css;
+
+export default css;

test/fixtures/url/image.svg

@@ -0,0 +1,11 @@
+const querystring = require("querystring");
+
+module.exports = function loader() {
+  const query = querystring.parse(this.resourceQuery.slice(1));
+
+  if (typeof query.color === "undefined" || query.color !== "#BAAFDB?") {
+    throw new Error(`Error, 'color' is '${query.color}'`);
+  }
+
+  return `export default "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=";`;
+};

test/helpers/svg-color-loader.js

@@ -472,4 +472,42 @@ describe("loader", () => {
     expect(getWarnings(stats)).toMatchSnapshot("warnings");
     expect(getErrors(stats)).toMatchSnapshot("errors");
   });
+
+  it("should pass queries to other loader", async () => {
+    const compiler = getCompiler(
+      "./other-loader-query.js",
+      {},
+      {
+        module: {
+          rules: [
+            {
+              test: /\.svg$/i,
+              resourceQuery: /color/,
+              enforce: "pre",
+              use: {
+                loader: path.resolve(
+                  __dirname,
+                  "./helpers/svg-color-loader.js"
+                ),
+              },
+            },
+            {
+              test: /\.css$/i,
+              rules: [{ loader: path.resolve(__dirname, "../src") }],
+            },
+          ],
+        },
+      }
+    );
+    const stats = await compile(compiler);
+
+    expect(getModuleSource("./other-loader-query.css", stats)).toMatchSnapshot(
+      "module"
+    );
+    expect(getExecutedCode("main.bundle.js", compiler, stats)).toMatchSnapshot(
+      "result"
+    );
+    expect(getWarnings(stats)).toMatchSnapshot("warnings");
+    expect(getErrors(stats)).toMatchSnapshot("errors");
+  });
 });