webpack 5.78.0 → 5.80.0

package/README.md

@@ -35,6 +35,9 @@
 	<a href="https://gitter.im/webpack/webpack">
 		<img src="https://badges.gitter.im/webpack/webpack.svg">
 	</a>
+  <a href="https://twitter.com/Webpack">
+		<img src="https://img.shields.io/twitter/follow/Webpack?style=social">
+	</a>
   <h1>webpack</h1>
   <p>
     Webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

package/lib/CompatibilityPlugin.js

@@ -15,7 +15,7 @@ const ConstDependency = require("./dependencies/ConstDependency");
 /** @typedef {import("./Compiler")} Compiler */
 /** @typedef {import("./javascript/JavascriptParser")} JavascriptParser */
 
-const nestedWebpackRequireTag = Symbol("nested __webpack_require__");
+const nestedWebpackIdentifierTag = Symbol("nested webpack identifier");
 const PLUGIN_NAME = "CompatibilityPlugin";
 
 class CompatibilityPlugin {
@@ -82,14 +82,18 @@ class CompatibilityPlugin {
 							statement.id.name === "__webpack_require__"
 						) {
 							const newName = `__nested_webpack_require_${statement.range[0]}__`;
-							parser.tagVariable(statement.id.name, nestedWebpackRequireTag, {
-								name: newName,
-								declaration: {
-									updated: false,
-									loc: statement.id.loc,
-									range: statement.id.range
+							parser.tagVariable(
+								statement.id.name,
+								nestedWebpackIdentifierTag,
+								{
+									name: newName,
+									declaration: {
+										updated: false,
+										loc: statement.id.loc,
+										range: statement.id.range
+									}
 								}
-							});
+							);
 							return true;
 						}
 					});
@@ -97,7 +101,7 @@ class CompatibilityPlugin {
 						.for("__webpack_require__")
 						.tap(PLUGIN_NAME, pattern => {
 							const newName = `__nested_webpack_require_${pattern.range[0]}__`;
-							parser.tagVariable(pattern.name, nestedWebpackRequireTag, {
+							parser.tagVariable(pattern.name, nestedWebpackIdentifierTag, {
 								name: newName,
 								declaration: {
 									updated: false,
@@ -107,8 +111,21 @@ class CompatibilityPlugin {
 							});
 							return true;
 						});
+					parser.hooks.pattern
+						.for("__webpack_exports__")
+						.tap(PLUGIN_NAME, pattern => {
+							parser.tagVariable(pattern.name, nestedWebpackIdentifierTag, {
+								name: "__nested_webpack_exports__",
+								declaration: {
+									updated: false,
+									loc: pattern.loc,
+									range: pattern.range
+								}
+							});
+							return true;
+						});
 					parser.hooks.expression
-						.for(nestedWebpackRequireTag)
+						.for(nestedWebpackIdentifierTag)
 						.tap(PLUGIN_NAME, expr => {
 							const { name, declaration } = parser.currentTagData;
 							if (!declaration.updated) {

package/lib/Compiler.js

@@ -970,10 +970,13 @@ ${other}`);
 	readRecords(callback) {
 		if (this.hooks.readRecords.isUsed()) {
 			if (this.recordsInputPath) {
-				asyncLib.parallel([
-					cb => this.hooks.readRecords.callAsync(cb),
-					this._readRecords.bind(this)
-				]);
+				asyncLib.parallel(
+					[
+						cb => this.hooks.readRecords.callAsync(cb),
+						this._readRecords.bind(this)
+					],
+					err => callback(err)
+				);
 			} else {
 				this.records = {};
 				this.hooks.readRecords.callAsync(callback);

package/lib/DefinePlugin.js

@@ -118,6 +118,7 @@ class RuntimeValue {
  * @param {string} key the defined key
  * @param {RuntimeTemplate} runtimeTemplate the runtime template
  * @param {boolean|undefined|null=} asiSafe asi safe (undefined: unknown, null: unneeded)
+ * @param {Set<string>|undefined=} objKeys used keys
  * @returns {string} code converted to string that evaluates
  */
 const stringifyObj = (
@@ -126,7 +127,8 @@ const stringifyObj = (
 	valueCacheVersions,
 	key,
 	runtimeTemplate,
-	asiSafe
+	asiSafe,
+	objKeys
 ) => {
 	let code;
 	let arr = Array.isArray(obj);
@@ -137,7 +139,12 @@ const stringifyObj = (
 			)
 			.join(",")}]`;
 	} else {
-		code = `{${Object.keys(obj)
+		let keys = Object.keys(obj);
+		if (objKeys) {
+			if (objKeys.size === 0) keys = [];
+			else keys = keys.filter(k => objKeys.has(k));
+		}
+		code = `{${keys
 			.map(key => {
 				const code = obj[key];
 				return (
@@ -169,6 +176,7 @@ const stringifyObj = (
  * @param {string} key the defined key
  * @param {RuntimeTemplate} runtimeTemplate the runtime template
  * @param {boolean|undefined|null=} asiSafe asi safe (undefined: unknown, null: unneeded)
+ * @param {Set<string>|undefined=} objKeys used keys
  * @returns {string} code converted to string that evaluates
  */
 const toCode = (
@@ -177,7 +185,8 @@ const toCode = (
 	valueCacheVersions,
 	key,
 	runtimeTemplate,
-	asiSafe
+	asiSafe,
+	objKeys
 ) => {
 	if (code === null) {
 		return "null";
@@ -211,7 +220,8 @@ const toCode = (
 			valueCacheVersions,
 			key,
 			runtimeTemplate,
-			asiSafe
+			asiSafe,
+			objKeys
 		);
 	}
 	if (typeof code === "bigint") {
@@ -426,7 +436,8 @@ class DefinePlugin {
 									compilation.valueCacheVersions,
 									originalKey,
 									runtimeTemplate,
-									!parser.isAsiPosition(expr.range[0])
+									!parser.isAsiPosition(expr.range[0]),
+									parser.destructuringAssignmentPropertiesFor(expr)
 								);
 								if (WEBPACK_REQUIRE_FUNCTION_REGEXP.test(strCode)) {
 									return toConstantDependency(parser, strCode, [
@@ -523,7 +534,8 @@ class DefinePlugin {
 								compilation.valueCacheVersions,
 								key,
 								runtimeTemplate,
-								!parser.isAsiPosition(expr.range[0])
+								!parser.isAsiPosition(expr.range[0]),
+								parser.destructuringAssignmentPropertiesFor(expr)
 							);
 
 							if (WEBPACK_REQUIRE_FUNCTION_REGEXP.test(strCode)) {

package/lib/LibManifestPlugin.js

@@ -49,7 +49,8 @@ class LibManifestPlugin {
 						const name =
 							this.options.name &&
 							compilation.getPath(this.options.name, {
-								chunk
+								chunk,
+								contentHashType: "javascript"
 							});
 						const content = Object.create(null);
 						for (const module of chunkGraph.getOrderedChunkModulesIterable(

package/lib/NormalModuleFactory.js

@@ -1020,7 +1020,7 @@ If changing the source code is not an option there is also a resolve options cal
 					context,
 					item.loader,
 					resolveContext,
-					(err, result) => {
+					(err, result, resolveRequest) => {
 						if (
 							err &&
 							/^[^/]*$/.test(item.loader) &&
@@ -1047,8 +1047,18 @@ If changing the source code is not an option there is also a resolve options cal
 						if (err) return callback(err);
 
 						const parsedResult = this._parseResourceWithoutFragment(result);
+
+						const type = /\.mjs$/i.test(parsedResult.path)
+							? "module"
+							: /\.cjs$/i.test(parsedResult.path)
+							? "commonjs"
+							: resolveRequest.descriptionFileData === undefined
+							? undefined
+							: resolveRequest.descriptionFileData.type;
+
 						const resolved = {
 							loader: parsedResult.path,
+							type,
 							options:
 								item.options === undefined
 									? parsedResult.query

package/lib/NormalModuleReplacementPlugin.js

@@ -8,7 +8,7 @@
 const { join, dirname } = require("./util/fs");
 
 /** @typedef {import("./Compiler")} Compiler */
-/** @typedef {function(TODO): void} ModuleReplacer */
+/** @typedef {function(import("./NormalModuleFactory").ResolveData): void} ModuleReplacer */
 
 class NormalModuleReplacementPlugin {
 	/**

package/lib/WarnCaseSensitiveModulesPlugin.js

@@ -9,6 +9,7 @@ const CaseSensitiveModulesWarning = require("./CaseSensitiveModulesWarning");
 
 /** @typedef {import("./Compiler")} Compiler */
 /** @typedef {import("./Module")} Module */
+/** @typedef {import("./NormalModule")} NormalModule */
 
 class WarnCaseSensitiveModulesPlugin {
 	/**
@@ -25,6 +26,17 @@ class WarnCaseSensitiveModulesPlugin {
 					const moduleWithoutCase = new Map();
 					for (const module of compilation.modules) {
 						const identifier = module.identifier();
+
+						// Ignore `data:` URLs, because it's not a real path
+						if (
+							/** @type {NormalModule} */
+							(module).resourceResolveData !== undefined &&
+							/** @type {NormalModule} */
+							(module).resourceResolveData.encodedContent !== undefined
+						) {
+							continue;
+						}
+
 						const lowerIdentifier = identifier.toLowerCase();
 						let map = moduleWithoutCase.get(lowerIdentifier);
 						if (map === undefined) {

package/lib/asset/AssetGenerator.js

@@ -108,9 +108,17 @@ const encodeDataUri = (encoding, source) => {
 
 const decodeDataUriContent = (encoding, content) => {
 	const isBase64 = encoding === "base64";
-	return isBase64
-		? Buffer.from(content, "base64")
-		: Buffer.from(decodeURIComponent(content), "ascii");
+
+	if (isBase64) {
+		return Buffer.from(content, "base64");
+	}
+
+	// If we can't decode return the original body
+	try {
+		return Buffer.from(decodeURIComponent(content), "ascii");
+	} catch (_) {
+		return Buffer.from(content, "ascii");
+	}
 };
 
 const JS_TYPES = new Set(["javascript"]);

package/lib/css/CssLoadingRuntimeModule.js

@@ -111,7 +111,7 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 				? crossOriginLoading === "use-credentials"
 					? 'link.crossOrigin = "use-credentials";'
 					: Template.asString([
-							"if (link.src.indexOf(window.location.origin + '/') !== 0) {",
+							"if (link.href.indexOf(window.location.origin + '/') !== 0) {",
 							Template.indent(
 								`link.crossOrigin = ${JSON.stringify(crossOriginLoading)};`
 							),

package/lib/css/CssParser.js

@@ -17,21 +17,54 @@ const walkCssTokens = require("./walkCssTokens");
 
 /** @typedef {import("../Parser").ParserState} ParserState */
 /** @typedef {import("../Parser").PreparsedAst} PreparsedAst */
-
 const CC_LEFT_CURLY = "{".charCodeAt(0);
 const CC_RIGHT_CURLY = "}".charCodeAt(0);
 const CC_COLON = ":".charCodeAt(0);
 const CC_SLASH = "/".charCodeAt(0);
 const CC_SEMICOLON = ";".charCodeAt(0);
 
-const cssUnescape = str => {
-	return str.replace(/\\([0-9a-fA-F]{1,6}[ \t\n\r\f]?|[\s\S])/g, match => {
-		if (match.length > 2) {
-			return String.fromCharCode(parseInt(match.slice(1).trim(), 16));
-		} else {
-			return match[1];
+// https://www.w3.org/TR/css-syntax-3/#newline
+// We don't have `preprocessing` stage, so we need specify all of them
+const STRING_MULTILINE = /\\[\n\r\f]/g;
+// https://www.w3.org/TR/css-syntax-3/#whitespace
+const TRIM_WHITE_SPACES = /(^[ \t\n\r\f]*|[ \t\n\r\f]*$)/g;
+const UNESCAPE = /\\([0-9a-fA-F]{1,6}[ \t\n\r\f]?|[\s\S])/g;
+const IMAGE_SET_FUNCTION = /^(-\w+-)?image-set$/i;
+
+const normalizeUrl = (str, isString) => {
+	// Remove extra spaces and newlines:
+	// `url("im\
+	// g.png")`
+	if (isString) {
+		str = str.replace(STRING_MULTILINE, "");
+	}
+
+	str = str
+		// Remove unnecessary spaces from `url("   img.png	 ")`
+		.replace(TRIM_WHITE_SPACES, "")
+		// Unescape
+		.replace(UNESCAPE, match => {
+			if (match.length > 2) {
+				return String.fromCharCode(parseInt(match.slice(1).trim(), 16));
+			} else {
+				return match[1];
+			}
+		});
+
+	if (/^data:/i.test(str)) {
+		return str;
+	}
+
+	if (str.includes("%")) {
+		// Convert `url('%2E/img.png')` -> `url('./img.png')`
+		try {
+			str = decodeURIComponent(str);
+		} catch (error) {
+			// Ignore
 		}
-	});
+	}
+
+	return str;
 };
 
 class LocConverter {
@@ -137,8 +170,11 @@ class CssParser extends Parser {
 		let modeData = undefined;
 		let singleClassSelector = undefined;
 		let lastIdentifier = undefined;
-		const modeStack = [];
 		let awaitRightParenthesis = false;
+		/** @type [string, number, number][] */
+		const functionStack = [];
+		const modeStack = [];
+
 		const isTopLevelLocal = () =>
 			modeData === "local" ||
 			(this.defaultMode === "local" && modeData === undefined);
@@ -279,8 +315,8 @@ class CssParser extends Parser {
 				module.addDependency(dep);
 				declaredCssVariables.add(name);
 			} else if (
-				propertyName === "animation-name" ||
-				propertyName === "animation"
+				propertyName.toLowerCase() === "animation-name" ||
+				propertyName.toLowerCase() === "animation"
 			) {
 				modeData = "animation";
 				lastIdentifier = undefined;
@@ -304,8 +340,11 @@ class CssParser extends Parser {
 			isSelector: () => {
 				return mode !== CSS_MODE_IN_RULE && mode !== CSS_MODE_IN_LOCAL_RULE;
 			},
-			url: (input, start, end, contentStart, contentEnd) => {
-				const value = cssUnescape(input.slice(contentStart, contentEnd));
+			url: (input, start, end, contentStart, contentEnd, isString) => {
+				let value = normalizeUrl(
+					input.slice(contentStart, contentEnd),
+					isString
+				);
 				switch (mode) {
 					case CSS_MODE_AT_IMPORT_EXPECT_URL: {
 						modeData.url = value;
@@ -321,6 +360,15 @@ class CssParser extends Parser {
 							)} at ${start} during ${explainMode(mode)}`
 						);
 					default: {
+						if (
+							// Ignore `url(#highlight)` URLs
+							/^#/.test(value) ||
+							// Ignore `url()`, `url('')` and `url("")`, they are valid by spec
+							value.length === 0
+						) {
+							break;
+						}
+
 						const dep = new CssUrlDependency(value, [start, end], "url");
 						const { line: sl, column: sc } = locConverter.get(start);
 						const { line: el, column: ec } = locConverter.get(end);
@@ -335,15 +383,49 @@ class CssParser extends Parser {
 			string: (input, start, end) => {
 				switch (mode) {
 					case CSS_MODE_AT_IMPORT_EXPECT_URL: {
-						modeData.url = cssUnescape(input.slice(start + 1, end - 1));
+						modeData.url = normalizeUrl(input.slice(start + 1, end - 1), true);
 						mode = CSS_MODE_AT_IMPORT_EXPECT_SUPPORTS;
 						break;
 					}
+					default: {
+						// TODO move escaped parsing to tokenizer
+						const lastFunction = functionStack[functionStack.length - 1];
+
+						if (
+							lastFunction &&
+							(lastFunction[0].replace(/\\/g, "").toLowerCase() === "url" ||
+								IMAGE_SET_FUNCTION.test(lastFunction[0].replace(/\\/g, "")))
+						) {
+							let value = normalizeUrl(input.slice(start + 1, end - 1), true);
+
+							if (
+								// Ignore `url(#highlight)` URLs
+								/^#/.test(value) ||
+								// Ignore `url()`, `url('')` and `url("")`, they are valid by spec
+								value.length === 0
+							) {
+								break;
+							}
+
+							const isUrl =
+								lastFunction[0].replace(/\\/g, "").toLowerCase() === "url";
+							const dep = new CssUrlDependency(
+								value,
+								[start, end],
+								isUrl ? "string" : "url"
+							);
+							const { line: sl, column: sc } = locConverter.get(start);
+							const { line: el, column: ec } = locConverter.get(end);
+							dep.setLoc(sl, sc, el, ec);
+							module.addDependency(dep);
+							module.addCodeGenerationDependency(dep);
+						}
+					}
 				}
 				return end;
 			},
 			atKeyword: (input, start, end) => {
-				const name = input.slice(start, end);
+				const name = input.slice(start, end).toLowerCase();
 				if (name === "@namespace") {
 					throw new Error("@namespace is not supported in bundled CSS");
 				}
@@ -523,6 +605,8 @@ class CssParser extends Parser {
 				return end;
 			},
 			rightParenthesis: (input, start, end) => {
+				functionStack.pop();
+
 				switch (mode) {
 					case CSS_MODE_TOP_LEVEL: {
 						if (awaitRightParenthesis) {
@@ -537,13 +621,14 @@ class CssParser extends Parser {
 						break;
 					}
 				}
+
 				return end;
 			},
 			pseudoClass: (input, start, end) => {
 				singleClassSelector = false;
 				switch (mode) {
 					case CSS_MODE_TOP_LEVEL: {
-						const name = input.slice(start, end);
+						const name = input.slice(start, end).toLowerCase();
 						if (this.allowModeSwitch && name === ":global") {
 							modeData = "global";
 							const dep = new ConstDependency("", [start, end]);
@@ -564,9 +649,14 @@ class CssParser extends Parser {
 				return end;
 			},
 			pseudoFunction: (input, start, end) => {
+				let name = input.slice(start, end - 1);
+
+				functionStack.push([name, start, end]);
+
 				switch (mode) {
 					case CSS_MODE_TOP_LEVEL: {
-						const name = input.slice(start, end - 1);
+						name = name.toLowerCase();
+
 						if (this.allowModeSwitch && name === ":global") {
 							modeStack.push(modeData);
 							modeData = "global";
@@ -587,9 +677,14 @@ class CssParser extends Parser {
 				return end;
 			},
 			function: (input, start, end) => {
+				let name = input.slice(start, end - 1);
+
+				functionStack.push([name, start, end]);
+
 				switch (mode) {
 					case CSS_MODE_IN_LOCAL_RULE: {
-						const name = input.slice(start, end - 1);
+						name = name.toLowerCase();
+
 						if (name === "var") {
 							let pos = walkCssTokens.eatWhitespaceAndComments(input, end);
 							if (pos === input.length) return pos;