fix: file protocol

src/utils.js

@@ -460,18 +460,17 @@ function normalizeUrl(url, isStringValue) {
 }
 
 function requestify(url, rootContext, needToResolveURL = true) {
-  // TODO supports `file` protocol in webpack
-  if (/^file:/i.test(url)) {
-    return fileURLToPath(url);
-  }
-
   if (needToResolveURL) {
+    if (/^file:/i.test(url)) {
+      return fileURLToPath(url);
+    }
+
     return url.charAt(0) === "/"
       ? urlToRequest(url, rootContext)
       : urlToRequest(url);
   }
 
-  if (url.charAt(0) === "/") {
+  if (url.charAt(0) === "/" || /^file:/i.test(url)) {
     return url;
   }
 

test/__snapshots__/url-option.test.js.snap

@@ -1,12 +1,52 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`"url" option should resolve "file" protocol path when the "esModules" is "false": errors 1`] = `Array []`;
+
+exports[`"url" option should resolve "file" protocol path when the "esModules" is "false": module 1`] = `
+"// Imports
+var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../src/runtime/api.js\\");
+var ___CSS_LOADER_GET_URL_IMPORT___ = require(\\"../../../src/runtime/getUrl.js\\");
+var ___CSS_LOADER_URL_IMPORT_0___ = require(\\"./img.png\\");
+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___);
+// Module
+___CSS_LOADER_EXPORT___.push([module.id, \\"\\\\n.background {\\\\n  background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\\\n.background-other {\\\\n  background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\\\n.background-other {\\\\n  background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\", \\"\\"]);
+// Exports
+module.exports = ___CSS_LOADER_EXPORT___;
+"
+`;
+
+exports[`"url" option should resolve "file" protocol path when the "esModules" is "false": result 1`] = `
+Array [
+  Array [
+    "./url/url-file-protocol.css",
+    "
+.background {
+  background: url(/webpack/public/path/img.png);
+}
+
+.background-other {
+  background: url(/webpack/public/path/img.png);
+}
+
+.background-other {
+  background: url(/webpack/public/path/img.png);
+}
+",
+    "",
+  ],
+]
+`;
+
+exports[`"url" option should resolve "file" protocol path when the "esModules" is "false": warnings 1`] = `Array []`;
+
 exports[`"url" option should resolve "file" protocol path: errors 1`] = `Array []`;
 
 exports[`"url" option should resolve "file" protocol path: module 1`] = `
 "// Imports
 import ___CSS_LOADER_API_IMPORT___ from \\"../../../src/runtime/api.js\\";
 import ___CSS_LOADER_GET_URL_IMPORT___ from \\"../../../src/runtime/getUrl.js\\";
-var ___CSS_LOADER_URL_IMPORT_0___ = new URL(\\"<file-protocol-url>\\", import.meta.url);
+var ___CSS_LOADER_URL_IMPORT_0___ = new URL(\\"file://<file-protocol-url>\\", import.meta.url);
 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___);
 // Module
@@ -40,6 +80,46 @@ Array [
 
 exports[`"url" option should resolve "file" protocol path: warnings 1`] = `Array []`;
 
+exports[`"url" option should resolve absolute path when the 'esModules' is 'false': errors 1`] = `Array []`;
+
+exports[`"url" option should resolve absolute path when the 'esModules' is 'false': module 1`] = `
+"// Imports
+var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../src/runtime/api.js\\");
+var ___CSS_LOADER_GET_URL_IMPORT___ = require(\\"../../../src/runtime/getUrl.js\\");
+var ___CSS_LOADER_URL_IMPORT_0___ = require(\\"./img.png\\");
+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___);
+// Module
+___CSS_LOADER_EXPORT___.push([module.id, \\"\\\\n.background {\\\\n  background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\\\n.background-other {\\\\n  background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\\\n.background-other {\\\\n  background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\", \\"\\"]);
+// Exports
+module.exports = ___CSS_LOADER_EXPORT___;
+"
+`;
+
+exports[`"url" option should resolve absolute path when the 'esModules' is 'false': result 1`] = `
+Array [
+  Array [
+    "./url/url-absolute.css",
+    "
+.background {
+  background: url(/webpack/public/path/img.png);
+}
+
+.background-other {
+  background: url(/webpack/public/path/img.png);
+}
+
+.background-other {
+  background: url(/webpack/public/path/img.png);
+}
+",
+    "",
+  ],
+]
+`;
+
+exports[`"url" option should resolve absolute path when the 'esModules' is 'false': warnings 1`] = `Array []`;
+
 exports[`"url" option should resolve absolute path: errors 1`] = `Array []`;
 
 exports[`"url" option should resolve absolute path: module 1`] = `

test/url-option.test.js

@@ -148,6 +148,45 @@ describe('"url" option', () => {
     expect(getErrors(stats)).toMatchSnapshot("errors");
   });
 
+  it("should resolve absolute path when the 'esModules' is 'false'", async () => {
+    // Create the file with absolute path
+    const fileDirectory = path.resolve(__dirname, "fixtures", "url");
+    const file = path.resolve(fileDirectory, "url-absolute.css");
+    const absolutePath = path.resolve(fileDirectory, "img.png");
+    const code = `
+.background {
+  background: url(${absolutePath});
+}
+
+.background-other {
+  background: url(${absolutePath.replace(/e/g, "%65")});
+}
+
+.background-other {
+  background: url('${absolutePath.replace(/e/g, "\\\ne")}');
+}
+`;
+
+    fs.writeFileSync(file, code);
+
+    const compiler = getCompiler("./url/url-absolute.js", {
+      esModule: false,
+    });
+    const stats = await compile(compiler);
+
+    expect(
+      getModuleSource("./url/url-absolute.css", stats).replace(
+        absolutePath,
+        "<absolute-path>"
+      )
+    ).toMatchSnapshot("module");
+    expect(getExecutedCode("main.bundle.js", compiler, stats)).toMatchSnapshot(
+      "result"
+    );
+    expect(getWarnings(stats)).toMatchSnapshot("warnings");
+    expect(getErrors(stats)).toMatchSnapshot("errors");
+  });
+
   it('should resolve "file" protocol path', async () => {
     // Create the file with absolute path
     const fileDirectory = path.resolve(__dirname, "fixtures", "url");
@@ -187,6 +226,47 @@ describe('"url" option', () => {
     expect(getErrors(stats)).toMatchSnapshot("errors");
   });
 
+  it('should resolve "file" protocol path when the "esModules" is "false"', async () => {
+    // Create the file with absolute path
+    const fileDirectory = path.resolve(__dirname, "fixtures", "url");
+    const file = path.resolve(fileDirectory, "url-file-protocol.css");
+    const absolutePath = path
+      .resolve(fileDirectory, "img.png")
+      .replace(/\\/g, "/");
+    const code = `
+.background {
+  background: url(file://${absolutePath});
+}
+
+.background-other {
+  background: url(file://${absolutePath.replace(/e/g, "%65")});
+}
+
+.background-other {
+  background: url('file://${absolutePath.replace(/e/g, "\\\ne")}');
+}
+`;
+
+    fs.writeFileSync(file, code);
+
+    const compiler = getCompiler("./url/url-file-protocol.js", {
+      esModule: false,
+    });
+    const stats = await compile(compiler);
+
+    expect(
+      getModuleSource("./url/url-file-protocol.css", stats).replace(
+        absolutePath,
+        "<file-protocol-url>"
+      )
+    ).toMatchSnapshot("module");
+    expect(getExecutedCode("main.bundle.js", compiler, stats)).toMatchSnapshot(
+      "result"
+    );
+    expect(getWarnings(stats)).toMatchSnapshot("warnings");
+    expect(getErrors(stats)).toMatchSnapshot("errors");
+  });
+
   it("should work with the 'asset' type of asset modules", async () => {
     const compiler = getCompiler(
       "./url/url.js",