diff --git a/lib/loader.js b/lib/loader.js index 1eec1fac..3937f0ec 100644 --- a/lib/loader.js +++ b/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};`; diff --git a/lib/plugins/postcss-url-parser.js b/lib/plugins/postcss-url-parser.js index 1cf6b5f5..b5c5de02 100644 --- a/lib/plugins/postcss-url-parser.js +++ b/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) => { diff --git a/lib/utils.js b/lib/utils.js index 3a837855..69b53a31 100644 --- a/lib/utils.js +++ b/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) {