fix: compatibility with ES modules syntax and hash in url function

src/runtime/getUrl.js

@@ -1,4 +1,9 @@
-module.exports = (url, needQuotes) => {
+module.exports = (url, options) => {
+  if (!options) {
+    // eslint-disable-next-line no-param-reassign
+    options = {};
+  }
+
   // eslint-disable-next-line no-underscore-dangle, no-param-reassign
   url = url.__esModule ? url.default : url;
 
@@ -12,9 +17,14 @@ module.exports = (url, needQuotes) => {
     url = url.slice(1, -1);
   }
 
+  if (options.hash) {
+    // eslint-disable-next-line no-param-reassign
+    url += options.hash;
+  }
+
   // Should url be wrapped?
   // See https://drafts.csswg.org/css-values-3/#urls
-  if (/["'() \t\n]/.test(url) || needQuotes) {
+  if (/["'() \t\n]/.test(url) || options.needQuotes) {
     return `"${url.replace(/"/g, '\\"').replace(/\n/g, '\\n')}"`;
   }
 

src/utils.js

@@ -242,10 +242,23 @@ function getUrlItemCode(item, loaderContext) {
       ? `"${singleQuery ? '?' : ''}${hashValue ? `#${hashValue}` : ''}"`
       : '';
 
+  const options = [];
+
+  if (hash) {
+    options.push(`hash: ${hash}`);
+  }
+
+  if (needQuotes) {
+    options.push(`needQuotes: true`);
+  }
+
+  const preparedOptions =
+    options.length > 0 ? `, { ${options.join(', ')} }` : '';
+
   return `var ${placeholder} = getUrl(require(${stringifyRequest(
     loaderContext,
     urlToRequest(normalizedUrl)
-  )})${hash ? ` + ${hash}` : ''}${needQuotes ? ', true' : ''});`;
+  )})${preparedOptions});`;
 }
 
 function getApiCode(loaderContext, sourceMap, onlyLocals) {

test/__snapshots__/loader.test.js.snap

@@ -102,7 +102,12 @@ function toComment(sourceMap) {
 exports[`loader should compile with \`css\` entry point (with \`modules\` and scope \`global\`): errors 1`] = `Array []`;
 
 exports[`loader should compile with \`css\` entry point (with \`modules\` and scope \`global\`): escape 1`] = `
-"module.exports = (url, needQuotes) => {
+"module.exports = (url, options) => {
+  if (!options) {
+    // eslint-disable-next-line no-param-reassign
+    options = {};
+  }
+
   // eslint-disable-next-line no-underscore-dangle, no-param-reassign
   url = url.__esModule ? url.default : url;
 
@@ -116,9 +121,14 @@ exports[`loader should compile with \`css\` entry point (with \`modules\` and sc
     url = url.slice(1, -1);
   }
 
+  if (options.hash) {
+    // eslint-disable-next-line no-param-reassign
+    url += options.hash;
+  }
+
   // Should url be wrapped?
   // See https://drafts.csswg.org/css-values-3/#urls
-  if (/[\\"'() \\\\t\\\\n]/.test(url) || needQuotes) {
+  if (/[\\"'() \\\\t\\\\n]/.test(url) || options.needQuotes) {
     return \`\\"\${url.replace(/\\"/g, '\\\\\\\\\\"').replace(/\\\\n/g, '\\\\\\\\n')}\\"\`;
   }
 
@@ -395,7 +405,12 @@ function toComment(sourceMap) {
 exports[`loader should compile with \`css\` entry point (with \`modules\` and scope \`local\`): errors 1`] = `Array []`;
 
 exports[`loader should compile with \`css\` entry point (with \`modules\` and scope \`local\`): escape 1`] = `
-"module.exports = (url, needQuotes) => {
+"module.exports = (url, options) => {
+  if (!options) {
+    // eslint-disable-next-line no-param-reassign
+    options = {};
+  }
+
   // eslint-disable-next-line no-underscore-dangle, no-param-reassign
   url = url.__esModule ? url.default : url;
 
@@ -409,9 +424,14 @@ exports[`loader should compile with \`css\` entry point (with \`modules\` and sc
     url = url.slice(1, -1);
   }
 
+  if (options.hash) {
+    // eslint-disable-next-line no-param-reassign
+    url += options.hash;
+  }
+
   // Should url be wrapped?
   // See https://drafts.csswg.org/css-values-3/#urls
-  if (/[\\"'() \\\\t\\\\n]/.test(url) || needQuotes) {
+  if (/[\\"'() \\\\t\\\\n]/.test(url) || options.needQuotes) {
     return \`\\"\${url.replace(/\\"/g, '\\\\\\\\\\"').replace(/\\\\n/g, '\\\\\\\\n')}\\"\`;
   }
 
@@ -712,7 +732,12 @@ function toComment(sourceMap) {
 exports[`loader should compile with \`css\` entry point: errors 1`] = `Array []`;
 
 exports[`loader should compile with \`css\` entry point: escape 1`] = `
-"module.exports = (url, needQuotes) => {
+"module.exports = (url, options) => {
+  if (!options) {
+    // eslint-disable-next-line no-param-reassign
+    options = {};
+  }
+
   // eslint-disable-next-line no-underscore-dangle, no-param-reassign
   url = url.__esModule ? url.default : url;
 
@@ -726,9 +751,14 @@ exports[`loader should compile with \`css\` entry point: escape 1`] = `
     url = url.slice(1, -1);
   }
 
+  if (options.hash) {
+    // eslint-disable-next-line no-param-reassign
+    url += options.hash;
+  }
+
   // Should url be wrapped?
   // See https://drafts.csswg.org/css-values-3/#urls
-  if (/[\\"'() \\\\t\\\\n]/.test(url) || needQuotes) {
+  if (/[\\"'() \\\\t\\\\n]/.test(url) || options.needQuotes) {
     return \`\\"\${url.replace(/\\"/g, '\\\\\\\\\\"').replace(/\\\\n/g, '\\\\\\\\n')}\\"\`;
   }
 
@@ -1005,7 +1035,12 @@ function toComment(sourceMap) {
 exports[`loader should compile with \`js\` entry point: errors 1`] = `Array []`;
 
 exports[`loader should compile with \`js\` entry point: escape 1`] = `
-"module.exports = (url, needQuotes) => {
+"module.exports = (url, options) => {
+  if (!options) {
+    // eslint-disable-next-line no-param-reassign
+    options = {};
+  }
+
   // eslint-disable-next-line no-underscore-dangle, no-param-reassign
   url = url.__esModule ? url.default : url;
 
@@ -1019,9 +1054,14 @@ exports[`loader should compile with \`js\` entry point: escape 1`] = `
     url = url.slice(1, -1);
   }
 
+  if (options.hash) {
+    // eslint-disable-next-line no-param-reassign
+    url += options.hash;
+  }
+
   // Should url be wrapped?
   // See https://drafts.csswg.org/css-values-3/#urls
-  if (/[\\"'() \\\\t\\\\n]/.test(url) || needQuotes) {
+  if (/[\\"'() \\\\t\\\\n]/.test(url) || options.needQuotes) {
     return \`\\"\${url.replace(/\\"/g, '\\\\\\\\\\"').replace(/\\\\n/g, '\\\\\\\\n')}\\"\`;
   }
 
@@ -1490,7 +1530,12 @@ exports.push([module.i, \\".foo {\\\\n  color: red;\\\\n}\\\\n\\", \\"\\"]);
 /* 4 */
 /***/ (function(module, exports) {
 
-module.exports = (url, needQuotes) => {
+module.exports = (url, options) => {
+  if (!options) {
+    // eslint-disable-next-line no-param-reassign
+    options = {};
+  }
+
   // eslint-disable-next-line no-underscore-dangle, no-param-reassign
   url = url.__esModule ? url.default : url;
 
@@ -1504,9 +1549,14 @@ module.exports = (url, needQuotes) => {
     url = url.slice(1, -1);
   }
 
+  if (options.hash) {
+    // eslint-disable-next-line no-param-reassign
+    url += options.hash;
+  }
+
   // Should url be wrapped?
   // See https://drafts.csswg.org/css-values-3/#urls
-  if (/[\\"'() \\\\t\\\\n]/.test(url) || needQuotes) {
+  if (/[\\"'() \\\\t\\\\n]/.test(url) || options.needQuotes) {
     return \`\\"\${url.replace(/\\"/g, '\\\\\\\\\\"').replace(/\\\\n/g, '\\\\\\\\n')}\\"\`;
   }
 
@@ -1755,7 +1805,12 @@ exports.push([module.i, \\".foo {\\\\n  color: red;\\\\n}\\\\n\\", \\"\\"]);
 /* 4 */
 /***/ (function(module, exports) {
 
-module.exports = (url, needQuotes) => {
+module.exports = (url, options) => {
+  if (!options) {
+    // eslint-disable-next-line no-param-reassign
+    options = {};
+  }
+
   // eslint-disable-next-line no-underscore-dangle, no-param-reassign
   url = url.__esModule ? url.default : url;
 
@@ -1769,9 +1824,14 @@ module.exports = (url, needQuotes) => {
     url = url.slice(1, -1);
   }
 
+  if (options.hash) {
+    // eslint-disable-next-line no-param-reassign
+    url += options.hash;
+  }
+
   // Should url be wrapped?
   // See https://drafts.csswg.org/css-values-3/#urls
-  if (/[\\"'() \\\\t\\\\n]/.test(url) || needQuotes) {
+  if (/[\\"'() \\\\t\\\\n]/.test(url) || options.needQuotes) {
     return \`\\"\${url.replace(/\\"/g, '\\\\\\\\\\"').replace(/\\\\n/g, '\\\\\\\\n')}\\"\`;
   }