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

src/utils.js

@@ -371,7 +371,7 @@ export function parseSrc(input) {
 }
 
 export function normalizeUrl(url) {
-  return decodeURIComponent(url).replace(/[\t\n\r]/g, '');
+  return decodeURI(url).replace(/[\t\n\r]/g, '');
 }
 
 const moduleRequestRegex = /^[^?]*~/;

test/__snapshots__/loader.test.js.snap

@@ -62,6 +62,23 @@ exports[`loader should not make bad things with templates: result 1`] = `
 
 exports[`loader should not make bad things with templates: 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 ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___ from \\"../../src/runtime/getUrl.js\\";
+import ___HTML_LOADER_IMPORT_0___ from \\"./icons.svg?color=%23BAAFDB%3F\\";
+// Module
+var ___HTML_LOADER_REPLACEMENT_0___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___, { hash: \\"#foo\\" });
+var code = \\"<img src=\\\\\\"\\" + ___HTML_LOADER_REPLACEMENT_0___ + \\"\\\\\\">\\";
+// Exports
+export default code;"
+`;
+
+exports[`loader should pass queries to other loader: result 1`] = `"<img src=\\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=#foo\\">"`;
+
+exports[`loader should pass queries to other loader: warnings 1`] = `Array []`;
+
 exports[`loader should work with "resolve.roots": errors 1`] = `Array []`;
 
 exports[`loader should work with "resolve.roots": module 1`] = `

test/fixtures/other-loader-query.html

@@ -0,0 +1 @@
+<img src="icons.svg?color=%23BAAFDB%3F#foo">

test/fixtures/other-loader-query.js

@@ -0,0 +1,3 @@
+import html from './other-loader-query.html';
+
+export default html;

test/helpers/svg-color-loader.js

@@ -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/loader.test.js

@@ -152,4 +152,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: /\.html$/i,
+              rules: [{ loader: path.resolve(__dirname, '../src') }],
+            },
+          ],
+        },
+      }
+    );
+    const stats = await compile(compiler);
+
+    expect(getModuleSource('./other-loader-query.html', stats)).toMatchSnapshot(
+      'module'
+    );
+    expect(
+      execute(readAsset('main.bundle.js', compiler, stats))
+    ).toMatchSnapshot('result');
+    expect(getWarnings(stats)).toMatchSnapshot('warnings');
+    expect(getErrors(stats)).toMatchSnapshot('errors');
+  });
 });