webpack 5.86.0 → 5.87.0

package/lib/ModuleStoreError.js

@@ -16,6 +16,7 @@ class ModuleStoreError extends WebpackError {
 	 */
 	constructor(module, err) {
 		let message = "Module storing failed: ";
+		/** @type {string | undefined} */
 		let details = undefined;
 		if (err !== null && typeof err === "object") {
 			if (typeof err.stack === "string" && err.stack) {
@@ -33,7 +34,7 @@ class ModuleStoreError extends WebpackError {
 		super(message);
 
 		this.name = "ModuleStoreError";
-		this.details = details;
+		this.details = /** @type {string | undefined} */ (details);
 		this.module = module;
 		this.error = err;
 	}

package/lib/ModuleTypeConstants.js

@@ -60,6 +60,12 @@ const CSS_MODULE_TYPE_GLOBAL = "css/global";
  */
 const CSS_MODULE_TYPE_MODULE = "css/module";
 
+/**
+ * @type {Readonly<"css/auto">}
+ * This is the module type used for CSS files, the module will be parsed as CSS modules if it's filename contains `.module.` or `.modules.`.
+ */
+const CSS_MODULE_TYPE_AUTO = "css/auto";
+
 /**
  * @type {Readonly<"asset">}
  * This is the module type used for automatically choosing between `asset/inline`, `asset/resource` based on asset size limit (8096).
@@ -152,6 +158,7 @@ exports.WEBASSEMBLY_MODULE_TYPE_SYNC = WEBASSEMBLY_MODULE_TYPE_SYNC;
 exports.CSS_MODULE_TYPE = CSS_MODULE_TYPE;
 exports.CSS_MODULE_TYPE_GLOBAL = CSS_MODULE_TYPE_GLOBAL;
 exports.CSS_MODULE_TYPE_MODULE = CSS_MODULE_TYPE_MODULE;
+exports.CSS_MODULE_TYPE_AUTO = CSS_MODULE_TYPE_AUTO;
 exports.WEBPACK_MODULE_TYPE_RUNTIME = WEBPACK_MODULE_TYPE_RUNTIME;
 exports.WEBPACK_MODULE_TYPE_FALLBACK = WEBPACK_MODULE_TYPE_FALLBACK;
 exports.WEBPACK_MODULE_TYPE_REMOTE = WEBPACK_MODULE_TYPE_REMOTE;

package/lib/MultiWatching.js

@@ -27,6 +27,10 @@ class MultiWatching {
 		this.compiler = compiler;
 	}
 
+	/**
+	 * @param {Callback<void>=} callback signals when the build has completed again
+	 * @returns {void}
+	 */
 	invalidate(callback) {
 		if (callback) {
 			asyncLib.each(

package/lib/RuntimeGlobals.js

@@ -188,6 +188,11 @@ exports.createScriptUrl = "__webpack_require__.tu";
  */
 exports.getTrustedTypesPolicy = "__webpack_require__.tt";
 
+/**
+ * a flag when a chunk has a fetch priority
+ */
+exports.hasFetchPriority = "has fetch priority";
+
 /**
  * the chunk name of the chunk with the runtime
  */

package/lib/RuntimePlugin.js

@@ -377,9 +377,10 @@ class RuntimePlugin {
 					if (withCreateScriptUrl) {
 						set.add(RuntimeGlobals.createScriptUrl);
 					}
+					const withFetchPriority = set.has(RuntimeGlobals.hasFetchPriority);
 					compilation.addRuntimeModule(
 						chunk,
-						new LoadScriptRuntimeModule(withCreateScriptUrl)
+						new LoadScriptRuntimeModule(withCreateScriptUrl, withFetchPriority)
 					);
 					return true;
 				});

package/lib/RuntimeTemplate.js

@@ -939,11 +939,29 @@ class RuntimeTemplate {
 		if (chunks.length === 1) {
 			const chunkId = JSON.stringify(chunks[0].id);
 			runtimeRequirements.add(RuntimeGlobals.ensureChunk);
-			return `${RuntimeGlobals.ensureChunk}(${comment}${chunkId})`;
+
+			const fetchPriority = chunkGroup.options.fetchPriority;
+
+			if (fetchPriority) {
+				runtimeRequirements.add(RuntimeGlobals.hasFetchPriority);
+			}
+
+			return `${RuntimeGlobals.ensureChunk}(${comment}${chunkId}${
+				fetchPriority ? `, ${JSON.stringify(fetchPriority)}` : ""
+			})`;
 		} else if (chunks.length > 0) {
 			runtimeRequirements.add(RuntimeGlobals.ensureChunk);
+
+			const fetchPriority = chunkGroup.options.fetchPriority;
+
+			if (fetchPriority) {
+				runtimeRequirements.add(RuntimeGlobals.hasFetchPriority);
+			}
+
 			const requireChunkId = chunk =>
-				`${RuntimeGlobals.ensureChunk}(${JSON.stringify(chunk.id)})`;
+				`${RuntimeGlobals.ensureChunk}(${JSON.stringify(chunk.id)}${
+					fetchPriority ? `, ${JSON.stringify(fetchPriority)}` : ""
+				})`;
 			return `Promise.all(${comment.trim()}[${chunks
 				.map(requireChunkId)
 				.join(", ")}])`;

package/lib/WebpackError.js

@@ -22,16 +22,17 @@ class WebpackError extends Error {
 	constructor(message) {
 		super(message);
 
+		/** @type {string | undefined} */
 		this.details = undefined;
-		/** @type {Module} */
+		/** @type {Module | undefined | null} */
 		this.module = undefined;
-		/** @type {DependencyLocation} */
+		/** @type {DependencyLocation | undefined} */
 		this.loc = undefined;
-		/** @type {boolean} */
+		/** @type {boolean | undefined} */
 		this.hideStack = undefined;
-		/** @type {Chunk} */
+		/** @type {Chunk | undefined} */
 		this.chunk = undefined;
-		/** @type {string} */
+		/** @type {string | undefined} */
 		this.file = undefined;
 	}
 

package/lib/WebpackOptionsApply.js

@@ -566,7 +566,7 @@ class WebpackOptionsApply extends OptionsApply {
 			for (const minimizer of options.optimization.minimizer) {
 				if (typeof minimizer === "function") {
 					minimizer.call(compiler, compiler);
-				} else if (minimizer !== "...") {
+				} else if (minimizer !== "..." && minimizer) {
 					minimizer.apply(compiler);
 				}
 			}

package/lib/WebpackOptionsDefaulter.js

@@ -8,11 +8,18 @@
 const { applyWebpackOptionsDefaults } = require("./config/defaults");
 const { getNormalizedWebpackOptions } = require("./config/normalization");
 
+/** @typedef {import("./config/normalization").WebpackOptions} WebpackOptions */
+/** @typedef {import("./config/normalization").WebpackOptionsNormalized} WebpackOptionsNormalized */
+
 class WebpackOptionsDefaulter {
+	/**
+	 * @param {WebpackOptions} options webpack options
+	 * @returns {WebpackOptionsNormalized} normalized webpack options
+	 */
 	process(options) {
-		options = getNormalizedWebpackOptions(options);
-		applyWebpackOptionsDefaults(options);
-		return options;
+		const normalizedOptions = getNormalizedWebpackOptions(options);
+		applyWebpackOptionsDefaults(normalizedOptions);
+		return normalizedOptions;
 	}
 }
 

package/lib/config/defaults.js

@@ -298,7 +298,10 @@ const applyWebpackOptionsDefaults = options => {
 			cache,
 			context: /** @type {Context} */ (options.context),
 			targetProperties,
-			mode: /** @type {Mode} */ (options.mode)
+			mode: /** @type {Mode} */ (options.mode),
+			css:
+				/** @type {NonNullable<ExperimentsNormalized["css"]>} */
+				(options.experiments.css)
 		}),
 		options.resolve
 	);
@@ -533,6 +536,7 @@ const applyJavascriptParserOptionsDefaults = (
 	D(parserOptions, "dynamicImportMode", "lazy");
 	D(parserOptions, "dynamicImportPrefetch", false);
 	D(parserOptions, "dynamicImportPreload", false);
+	D(parserOptions, "dynamicImportFetchPriority", false);
 	D(parserOptions, "createRequire", isNode);
 	if (futureDefaults) D(parserOptions, "exportsPresence", "error");
 };
@@ -1398,9 +1402,16 @@ const applyOptimizationDefaults = (
  * @param {string} options.context build context
  * @param {TargetProperties | false} options.targetProperties target properties
  * @param {Mode} options.mode mode
+ * @param {CssExperimentOptions|false} options.css is css enabled
  * @returns {ResolveOptions} resolve options
  */
-const getResolveDefaults = ({ cache, context, targetProperties, mode }) => {
+const getResolveDefaults = ({
+	cache,
+	context,
+	targetProperties,
+	mode,
+	css
+}) => {
 	/** @type {string[]} */
 	const conditions = ["webpack"];
 
@@ -1468,6 +1479,24 @@ const getResolveDefaults = ({ cache, context, targetProperties, mode }) => {
 		}
 	};
 
+	if (css) {
+		const styleConditions = [];
+
+		styleConditions.push("webpack");
+		styleConditions.push(mode === "development" ? "development" : "production");
+		styleConditions.push("style");
+
+		resolveOptions.byDependency["css-import"] = {
+			// We avoid using any main files because we have to be consistent with CSS `@import`
+			// and CSS `@import` does not handle `main` files in directories,
+			// you should always specify the full URL for styles
+			mainFiles: [],
+			mainFields: ["style", "..."],
+			conditionNames: styleConditions,
+			extensions: [".css"]
+		};
+	}
+
 	return resolveOptions;
 };
 

package/lib/css/CssModulesPlugin.js

@@ -11,7 +11,8 @@ const HotUpdateChunk = require("../HotUpdateChunk");
 const {
 	CSS_MODULE_TYPE,
 	CSS_MODULE_TYPE_GLOBAL,
-	CSS_MODULE_TYPE_MODULE
+	CSS_MODULE_TYPE_MODULE,
+	CSS_MODULE_TYPE_AUTO
 } = require("../ModuleTypeConstants");
 const RuntimeGlobals = require("../RuntimeGlobals");
 const SelfModuleFactory = require("../SelfModuleFactory");
@@ -149,7 +150,8 @@ class CssModulesPlugin {
 				for (const type of [
 					CSS_MODULE_TYPE,
 					CSS_MODULE_TYPE_GLOBAL,
-					CSS_MODULE_TYPE_MODULE
+					CSS_MODULE_TYPE_MODULE,
+					CSS_MODULE_TYPE_AUTO
 				]) {
 					normalModuleFactory.hooks.createParser
 						.for(type)
@@ -158,6 +160,7 @@ class CssModulesPlugin {
 
 							switch (type) {
 								case CSS_MODULE_TYPE:
+								case CSS_MODULE_TYPE_AUTO:
 									return new CssParser();
 								case CSS_MODULE_TYPE_GLOBAL:
 									return new CssParser({

package/lib/css/CssParser.js

@@ -6,6 +6,7 @@
 "use strict";
 
 const ModuleDependencyWarning = require("../ModuleDependencyWarning");
+const { CSS_MODULE_TYPE_AUTO } = require("../ModuleTypeConstants");
 const Parser = require("../Parser");
 const WebpackError = require("../WebpackError");
 const ConstDependency = require("../dependencies/ConstDependency");
@@ -15,6 +16,7 @@ const CssLocalIdentifierDependency = require("../dependencies/CssLocalIdentifier
 const CssSelfLocalIdentifierDependency = require("../dependencies/CssSelfLocalIdentifierDependency");
 const CssUrlDependency = require("../dependencies/CssUrlDependency");
 const StaticExportsDependency = require("../dependencies/StaticExportsDependency");
+const { parseResource } = require("../util/identifier");
 const walkCssTokens = require("./walkCssTokens");
 
 /** @typedef {import("../Parser").ParserState} ParserState */
@@ -37,6 +39,7 @@ const IMAGE_SET_FUNCTION = /^(-\w+-)?image-set$/i;
 const OPTIONALLY_VENDOR_PREFIXED_KEYFRAMES_AT_RULE = /^@(-\w+-)?keyframes$/;
 const OPTIONALLY_VENDOR_PREFIXED_ANIMATION_PROPERTY =
 	/^(-\w+-)?animation(-name)?$/i;
+const IS_MODULES = /\.module(s)?\.\w+$/i;
 
 /**
  * @param {string} str url string
@@ -169,6 +172,15 @@ class CssParser extends Parser {
 		}
 
 		const module = state.module;
+		if (
+			module.type === CSS_MODULE_TYPE_AUTO &&
+			IS_MODULES.test(
+				parseResource(module.matchResource || module.resource).path
+			)
+		) {
+			this.defaultMode = "local";
+		}
+
 		const locConverter = new LocConverter(source);
 		/** @type {Set<string>}*/
 		const declaredCssVariables = new Set();

package/lib/dependencies/ConstDependency.js

@@ -23,8 +23,8 @@ const NullDependency = require("./NullDependency");
 class ConstDependency extends NullDependency {
 	/**
 	 * @param {string} expression the expression
-	 * @param {number|Range} range the source range
-	 * @param {string[]=} runtimeRequirements runtime requirements
+	 * @param {number | Range} range the source range
+	 * @param {(string[] | null)=} runtimeRequirements runtime requirements
 	 */
 	constructor(expression, range, runtimeRequirements) {
 		super();

package/lib/dependencies/ImportMetaContextDependencyParserPlugin.js

@@ -219,6 +219,25 @@ module.exports = class ImportMetaContextDependencyParserPlugin {
 								}
 								break;
 							}
+							case "fetchPriority": {
+								const expr = parser.evaluateExpression(
+									/** @type {Expression} */ (prop.value)
+								);
+								if (
+									expr.isString() &&
+									["high", "low", "auto"].includes(expr.string)
+								) {
+									groupOptions.fetchPriority =
+										/** @type {RawChunkGroupOptions["fetchPriority"]} */ (
+											expr.string
+										);
+								} else {
+									errors.push(
+										createPropertyParseError(prop, '"high"|"low"|"auto"')
+									);
+								}
+								break;
+							}
 							case "recursive": {
 								const recursiveExpr = parser.evaluateExpression(
 									/** @type {Expression} */ (prop.value)

package/lib/dependencies/ImportParserPlugin.js

@@ -47,7 +47,11 @@ class ImportParserPlugin {
 			/** @type {RawChunkGroupOptions} */
 			const groupOptions = {};
 
-			const { dynamicImportPreload, dynamicImportPrefetch } = this.options;
+			const {
+				dynamicImportPreload,
+				dynamicImportPrefetch,
+				dynamicImportFetchPriority
+			} = this.options;
 			if (dynamicImportPreload !== undefined && dynamicImportPreload !== false)
 				groupOptions.preloadOrder =
 					dynamicImportPreload === true ? 0 : dynamicImportPreload;
@@ -57,6 +61,11 @@ class ImportParserPlugin {
 			)
 				groupOptions.prefetchOrder =
 					dynamicImportPrefetch === true ? 0 : dynamicImportPrefetch;
+			if (
+				dynamicImportFetchPriority !== undefined &&
+				dynamicImportFetchPriority !== false
+			)
+				groupOptions.fetchPriority = dynamicImportFetchPriority;
 
 			const { options: importOptions, errors: commentErrors } =
 				parser.parseCommentOptions(expr.range);
@@ -141,6 +150,21 @@ class ImportParserPlugin {
 						);
 					}
 				}
+				if (importOptions.webpackFetchPriority !== undefined) {
+					if (
+						typeof importOptions.webpackFetchPriority === "string" &&
+						["high", "low", "auto"].includes(importOptions.webpackFetchPriority)
+					) {
+						groupOptions.fetchPriority = importOptions.webpackFetchPriority;
+					} else {
+						parser.state.module.addWarning(
+							new UnsupportedFeatureWarning(
+								`\`webpackFetchPriority\` expected true or "low", "high" or "auto", but received: ${importOptions.webpackFetchPriority}.`,
+								expr.loc
+							)
+						);
+					}
+				}
 				if (importOptions.webpackInclude !== undefined) {
 					if (
 						!importOptions.webpackInclude ||

package/lib/ids/SyncModuleIdsPlugin.js

@@ -63,6 +63,7 @@ class SyncModuleIdsPlugin {
 		if (this._write) {
 			compiler.hooks.emitRecords.tapAsync(plugin, callback => {
 				if (!data || !dataChanged) return callback();
+				/** @type {Object<string, string | number>} */
 				const json = {};
 				const sorted = Array.from(data).sort(([a], [b]) => (a < b ? -1 : 1));
 				for (const [key, value] of sorted) {

package/lib/javascript/BasicEvaluatedExpression.js

@@ -5,7 +5,7 @@
 
 "use strict";
 
-/** @typedef {import("estree").Node} EsTreeNode */
+/** @typedef {import("estree").Node} Node */
 /** @typedef {import("./JavascriptParser").Range} Range */
 /** @typedef {import("./JavascriptParser").VariableInfoInterface} VariableInfoInterface */
 
@@ -27,7 +27,7 @@ const TypeBigInt = 13;
 class BasicEvaluatedExpression {
 	constructor() {
 		this.type = TypeUnknown;
-		/** @type {[number, number]} */
+		/** @type {[number, number] | undefined} */
 		this.range = undefined;
 		/** @type {boolean} */
 		this.falsy = false;
@@ -57,23 +57,23 @@ class BasicEvaluatedExpression {
 		this.items = undefined;
 		/** @type {BasicEvaluatedExpression[] | undefined} */
 		this.options = undefined;
-		/** @type {BasicEvaluatedExpression | undefined} */
+		/** @type {BasicEvaluatedExpression | undefined | null} */
 		this.prefix = undefined;
-		/** @type {BasicEvaluatedExpression | undefined} */
+		/** @type {BasicEvaluatedExpression | undefined | null} */
 		this.postfix = undefined;
-		/** @type {BasicEvaluatedExpression[]} */
+		/** @type {BasicEvaluatedExpression[] | undefined} */
 		this.wrappedInnerExpressions = undefined;
 		/** @type {string | VariableInfoInterface | undefined} */
 		this.identifier = undefined;
-		/** @type {string | VariableInfoInterface} */
+		/** @type {string | VariableInfoInterface | undefined} */
 		this.rootInfo = undefined;
-		/** @type {() => string[]} */
+		/** @type {(() => string[]) | undefined} */
 		this.getMembers = undefined;
-		/** @type {() => boolean[]} */
+		/** @type {(() => boolean[]) | undefined} */
 		this.getMembersOptionals = undefined;
-		/** @type {() => Range[]} */
+		/** @type {(() => Range[]) | undefined} */
 		this.getMemberRanges = undefined;
-		/** @type {EsTreeNode} */
+		/** @type {Node | undefined} */
 		this.expression = undefined;
 	}
 
@@ -293,7 +293,9 @@ class BasicEvaluatedExpression {
 		if (this.isRegExp()) return `${this.regExp}`;
 		if (this.isArray()) {
 			let array = [];
-			for (const item of this.items) {
+			for (const item of /** @type {BasicEvaluatedExpression[]} */ (
+				this.items
+			)) {
 				const itemStr = item.asString();
 				if (itemStr === undefined) return undefined;
 				array.push(itemStr);
@@ -303,7 +305,9 @@ class BasicEvaluatedExpression {
 		if (this.isConstArray()) return `${this.array}`;
 		if (this.isTemplateString()) {
 			let str = "";
-			for (const part of this.parts) {
+			for (const part of /** @type {BasicEvaluatedExpression[]} */ (
+				this.parts
+			)) {
 				const partStr = part.asString();
 				if (partStr === undefined) return undefined;
 				str += partStr;
@@ -313,6 +317,10 @@ class BasicEvaluatedExpression {
 		return undefined;
 	}
 
+	/**
+	 * @param {string} string value
+	 * @returns {BasicEvaluatedExpression} basic evaluated expression
+	 */
 	setString(string) {
 		this.type = TypeString;
 		this.string = string;
@@ -410,8 +418,8 @@ class BasicEvaluatedExpression {
 	/**
 	 * Wraps an array of expressions with a prefix and postfix expression.
 	 *
-	 * @param {BasicEvaluatedExpression | null} prefix Expression to be added before the innerExpressions
-	 * @param {BasicEvaluatedExpression} postfix Expression to be added after the innerExpressions
+	 * @param {BasicEvaluatedExpression | null | undefined} prefix Expression to be added before the innerExpressions
+	 * @param {BasicEvaluatedExpression | null | undefined} postfix Expression to be added after the innerExpressions
 	 * @param {BasicEvaluatedExpression[]} innerExpressions Expressions to be wrapped
 	 * @returns {this} this
 	 */
@@ -551,7 +559,7 @@ class BasicEvaluatedExpression {
 	/**
 	 * Set the expression node for the expression.
 	 *
-	 * @param {EsTreeNode} expression expression
+	 * @param {Node | undefined} expression expression
 	 * @returns {this} this
 	 */
 	setExpression(expression) {

package/lib/javascript/CommonJsChunkFormatPlugin.js

@@ -17,7 +17,9 @@ const {
 	updateHashForEntryStartup
 } = require("./StartupHelpers");
 
+/** @typedef {import("../Chunk")} Chunk */
 /** @typedef {import("../Compiler")} Compiler */
+/** @typedef {import("../Entrypoint")} Entrypoint */
 
 class CommonJsChunkFormatPlugin {
 	/**
@@ -66,7 +68,9 @@ class CommonJsChunkFormatPlugin {
 							chunkGraph.getChunkEntryModulesWithChunkGroupIterable(chunk)
 						);
 						if (entries.length > 0) {
-							const runtimeChunk = entries[0][1].getRuntimeChunk();
+							const runtimeChunk =
+								/** @type {Entrypoint} */
+								(entries[0][1]).getRuntimeChunk();
 							const currentOutputName = compilation
 								.getPath(
 									getChunkFilenameTemplate(chunk, compilation.outputOptions),
@@ -83,7 +87,7 @@ class CommonJsChunkFormatPlugin {
 										compilation.outputOptions
 									),
 									{
-										chunk: runtimeChunk,
+										chunk: /** @type {Chunk} */ (runtimeChunk),
 										contentHashType: "javascript"
 									}
 								)