refactor: migrate on message api for url (#835)

Author: evilebottnawi

lib/loader.js

@@ -125,7 +125,7 @@ module.exports = function loader(content, map) {
 
       const messages = result.messages || [];
       const { camelCase, exportOnlyLocals, importLoaders } = options;
-      const { importItems, urlItems } = parserOptions;
+      const { importItems } = parserOptions;
 
       // Run other loader (`postcss-loader`, `sass-loader` and etc) for importing CSS
       const importUrlPrefix = getImportPrefix(this, importLoaders);
@@ -206,40 +206,40 @@ module.exports = function loader(content, map) {
       // helper for ensuring valid CSS strings from requires
       let urlEscapeHelperCode = '';
 
-      if (resolveUrl && urlItems && urlItems.length > 0) {
-        urlEscapeHelperCode = `var escape = require(${stringifyRequest(
-          this,
-          require.resolve('./runtime/escape.js')
-        )});\n`;
-
-        cssAsString = cssAsString.replace(
-          placholderRegExps.urlItemG,
-          (item) => {
-            const match = placholderRegExps.urlItem.exec(item);
-            const idx = Number(match[1]);
-
-            if (!urlItems[idx]) {
-              return item;
-            }
-
-            const urlItem = urlItems[idx];
-            const { url } = urlItem;
-            // Remove `#hash` and `?#hash` from `require`
-            const [normalizedUrl, singleQuery, hashValue] = url.split(/(\?)?#/);
-            const hash =
-              singleQuery || hashValue
-                ? `"${singleQuery ? '?' : ''}${
-                    hashValue ? `#${hashValue}` : ''
-                  }"`
-                : '';
-
-            return `" + escape(require(${stringifyRequest(
+      messages
+        .filter((message) => message.type === 'url' && resolveUrl)
+        .forEach((message) => {
+          if (!urlEscapeHelperCode) {
+            urlEscapeHelperCode = `var escape = require(${stringifyRequest(
               this,
-              normalizedUrl
-            )})${hash ? ` + ${hash}` : ''}) + "`;
+              require.resolve('./runtime/escape.js')
+            )});\n`;
           }
-        );
-      }
+
+          const { item } = message;
+          const { url, placeholder } = item;
+
+          cssAsString = cssAsString.replace(
+            new RegExp(placeholder, 'g'),
+            () => {
+              // Remove `#hash` and `?#hash` from `require`
+              const [normalizedUrl, singleQuery, hashValue] = url.split(
+                /(\?)?#/
+              );
+              const hash =
+                singleQuery || hashValue
+                  ? `"${singleQuery ? '?' : ''}${
+                      hashValue ? `#${hashValue}` : ''
+                    }"`
+                  : '';
+
+              return `" + escape(require(${stringifyRequest(
+                this,
+                normalizedUrl
+              )})${hash ? ` + ${hash}` : ''}) + "`;
+            }
+          );
+        });
 
       if (exportCode) {
         exportCode = `exports.locals = ${exportCode};`;

lib/plugins/postcss-url-parser.js

@@ -112,8 +112,15 @@ module.exports = postcss.plugin(
       const urls = {};
 
       paths.forEach((path, index) => {
-        urls[path] = `___CSS_LOADER_URL___${index}___`;
-        urlItems.push({ url: path });
+        const placeholder = `___CSS_LOADER_URL___${index}___`;
+
+        urls[path] = placeholder;
+
+        result.messages.push({
+          pluginName,
+          type: 'url',
+          item: { url: path, placeholder },
+        });
       });
 
       traversed.forEach((item) => {

lib/utils.js

@@ -10,8 +10,6 @@ const loaderUtils = require('loader-utils');
 const placholderRegExps = {
   importItemG: /___CSS_LOADER_IMPORT___([0-9]+)___/g,
   importItem: /___CSS_LOADER_IMPORT___([0-9]+)___/,
-  urlItemG: /___CSS_LOADER_URL___([0-9]+)___/g,
-  urlItem: /___CSS_LOADER_URL___([0-9]+)___/,
 };
 
 function getImportPrefix(loaderContext, importLoaders) {