fix: compatibility with commonjs format

src/index.js

@@ -86,12 +86,7 @@ export default async function loader(content, map, meta) {
   const urlPluginImports = [];
 
   if (shouldUseURLPlugin(options)) {
-    // const urlResolver = this.getResolve({
-    //   conditionNames: ["asset"],
-    //   mainFields: ["asset"],
-    //   mainFiles: [],
-    //   extensions: [],
-    // });
+    const needToResolveURL = !options.esModule;
 
     plugins.push(
       urlParser({
@@ -100,7 +95,11 @@ export default async function loader(content, map, meta) {
         context: this.context,
         rootContext: this.rootContext,
         filter: getFilter(options.url.filter, this.resourcePath),
-        // resolver: urlResolver,
+        needToResolveURL,
+        resolver: needToResolveURL
+          ? this.getResolve({ mainFiles: [], extensions: [] })
+          : // eslint-disable-next-line no-undefined
+            undefined,
         urlHandler: (url) => stringifyRequest(this, url),
       })
     );

src/plugins/postcss-url-parser.js

@@ -1,6 +1,7 @@
 import valueParser from "postcss-value-parser";
 
 import {
+  resolveRequests,
   normalizeUrl,
   requestify,
   isUrlRequestable,
@@ -301,20 +302,29 @@ const plugin = (options = {}) => {
               let hash = query ? "?" : "";
               hash += hashOrQuery ? `#${hashOrQuery}` : "";
 
-              const request = requestify(pathname, options.rootContext);
+              const { needToResolveURL, rootContext } = options;
+              const request = requestify(
+                pathname,
+                rootContext,
+                needToResolveURL
+              );
 
-              // const { resolver, context } = options;
-              // const resolvedUrl = await resolveRequests(resolver, context, [
-              //   ...new Set([request, url]),
-              // ]);
-              //
-              // if (!resolvedUrl) {
-              //   return;
-              // }
-              // return { ...parsedDeclaration, url: resolvedUrl, hash };
+              if (!needToResolveURL) {
+                // eslint-disable-next-line consistent-return
+                return { ...parsedDeclaration, url: request, hash };
+              }
+
+              const { resolver, context } = options;
+              const resolvedUrl = await resolveRequests(resolver, context, [
+                ...new Set([request, url]),
+              ]);
+
+              if (!resolvedUrl) {
+                return;
+              }
 
               // eslint-disable-next-line consistent-return
-              return { ...parsedDeclaration, url: request, hash };
+              return { ...parsedDeclaration, url: resolvedUrl, hash };
             })
           );
 
@@ -359,7 +369,9 @@ const plugin = (options = {}) => {
               options.imports.push({
                 type: "url",
                 importName,
-                url: JSON.stringify(newUrl),
+                url: options.needToResolveURL
+                  ? options.urlHandler(newUrl)
+                  : JSON.stringify(newUrl),
                 index,
               });
             }

src/utils.js

@@ -58,9 +58,9 @@ function stringifyRequest(loaderContext, request) {
 
 // We can't use path.win32.isAbsolute because it also matches paths starting with a forward slash
 const IS_NATIVE_WIN32_PATH = /^[a-z]:[/\\]|^\\\\/i;
+const IS_MODULE_REQUEST = /^[^?]*~/;
 
 function urlToRequest(url, root) {
-  const moduleRequestRegex = /^[^?]*~/;
   let request;
 
   if (IS_NATIVE_WIN32_PATH.test(url)) {
@@ -72,14 +72,13 @@ function urlToRequest(url, root) {
     // A relative url stays
     request = url;
   } else {
-    request = url;
     // every other url is threaded like a relative url
-    // request = `./${url}`;
+    request = `./${url}`;
   }
 
   // A `~` makes the url an module
-  if (moduleRequestRegex.test(request)) {
-    request = request.replace(moduleRequestRegex, "");
+  if (IS_MODULE_REQUEST.test(request)) {
+    request = request.replace(IS_MODULE_REQUEST, "");
   }
 
   return request;
@@ -460,12 +459,27 @@ function normalizeUrl(url, isStringValue) {
   return normalizedUrl;
 }
 
-function requestify(url) {
+function requestify(url, rootContext, needToResolveURL) {
   if (/^file:/i.test(url)) {
     return fileURLToPath(url);
   }
 
-  return url.charAt(0) === "/" ? url : urlToRequest(url);
+  if (needToResolveURL) {
+    return url.charAt(0) === "/"
+      ? urlToRequest(url, rootContext)
+      : urlToRequest(url);
+  }
+
+  if (url.charAt(0) === "/") {
+    return url;
+  }
+
+  // A `~` makes the url an module
+  if (IS_MODULE_REQUEST.test(url)) {
+    return url.replace(IS_MODULE_REQUEST, "");
+  }
+
+  return url;
 }
 
 function getFilter(filter, resourcePath) {

test/url-option.test.js

@@ -52,6 +52,36 @@ describe('"url" option', () => {
     expect(getErrors(stats)).toMatchSnapshot("errors");
   });
 
+  it("should work with 'false' value of the 'esModule' option", async () => {
+    const compiler = getCompiler(
+      "./url/url.js",
+      {
+        esModule: false,
+      },
+      {
+        resolve: {
+          alias: {
+            aliasesImg: path.resolve(__dirname, "./fixtures/url"),
+            "/img.png": path.resolve(__dirname, "./fixtures/url/img.png"),
+            "~img.png": path.resolve(__dirname, "./fixtures/url/img.png"),
+            "/guide/img/banWord/addCoinDialogTitleBg.png": path.resolve(
+              __dirname,
+              "./fixtures/url/img.png"
+            ),
+          },
+        },
+      }
+    );
+    const stats = await compile(compiler);
+
+    expect(getModuleSource("./url/url.css", stats)).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 url.filter", async () => {
     const compiler = getCompiler("./url/url.js", {
       url: {