webpack 5.97.1 → 5.99.0

package/lib/container/RemoteModule.js

@@ -20,9 +20,11 @@ const RemoteToExternalDependency = require("./RemoteToExternalDependency");
 /** @typedef {import("../ChunkGraph")} ChunkGraph */
 /** @typedef {import("../ChunkGroup")} ChunkGroup */
 /** @typedef {import("../Compilation")} Compilation */
+/** @typedef {import("../Module").BuildCallback} BuildCallback */
 /** @typedef {import("../Module").CodeGenerationContext} CodeGenerationContext */
 /** @typedef {import("../Module").CodeGenerationResult} CodeGenerationResult */
 /** @typedef {import("../Module").LibIdentOptions} LibIdentOptions */
+/** @typedef {import("../Module").NeedBuildCallback} NeedBuildCallback */
 /** @typedef {import("../Module").NeedBuildContext} NeedBuildContext */
 /** @typedef {import("../Module").SourceTypes} SourceTypes */
 /** @typedef {import("../RequestShortener")} RequestShortener */
@@ -80,7 +82,7 @@ class RemoteModule extends Module {
 
 	/**
 	 * @param {NeedBuildContext} context context info
-	 * @param {function((WebpackError | null)=, boolean=): void} callback callback function, returns true, if the module needs a rebuild
+	 * @param {NeedBuildCallback} callback callback function, returns true, if the module needs a rebuild
 	 * @returns {void}
 	 */
 	needBuild(context, callback) {
@@ -92,7 +94,7 @@ class RemoteModule extends Module {
 	 * @param {Compilation} compilation the compilation
 	 * @param {ResolverWithOptions} resolver the resolver
 	 * @param {InputFileSystem} fs the file system
-	 * @param {function(WebpackError=): void} callback callback function
+	 * @param {BuildCallback} callback callback function
 	 * @returns {void}
 	 */
 	build(options, compilation, resolver, fs, callback) {

package/lib/container/options.js

@@ -19,9 +19,9 @@
  * @template T
  * @template N
  * @param {ContainerOptionsFormat<T>} options options passed by the user
- * @param {function(string | string[], string) : N} normalizeSimple normalize a simple item
- * @param {function(T, string) : N} normalizeOptions normalize a complex item
- * @param {function(string, N): void} fn processing function
+ * @param {(item: string | string[], itemOrKey: string) => N} normalizeSimple normalize a simple item
+ * @param {(value: T, key: string) => N} normalizeOptions normalize a complex item
+ * @param {(item: string, normalized: N) => void} fn processing function
  * @returns {void}
  */
 const process = (options, normalizeSimple, normalizeOptions, fn) => {
@@ -66,8 +66,8 @@ const process = (options, normalizeSimple, normalizeOptions, fn) => {
  * @template T
  * @template R
  * @param {ContainerOptionsFormat<T>} options options passed by the user
- * @param {function(string | string[], string) : R} normalizeSimple normalize a simple item
- * @param {function(T, string) : R} normalizeOptions normalize a complex item
+ * @param {(item: string | string[], itemOrKey: string) => R} normalizeSimple normalize a simple item
+ * @param {(value: T, key: string) => R} normalizeOptions normalize a complex item
  * @returns {[string, R][]} parsed options
  */
 const parseOptions = (options, normalizeSimple, normalizeOptions) => {

package/lib/css/CssGenerator.js

@@ -11,7 +11,10 @@ const Generator = require("../Generator");
 const InitFragment = require("../InitFragment");
 const {
 	JS_AND_CSS_EXPORT_TYPES,
-	JS_AND_CSS_TYPES
+	JS_AND_CSS_TYPES,
+	CSS_TYPES,
+	JS_TYPE,
+	CSS_TYPE
 } = require("../ModuleSourceTypesConstants");
 const RuntimeGlobals = require("../RuntimeGlobals");
 const Template = require("../Template");
@@ -26,21 +29,26 @@ const Template = require("../Template");
 /** @typedef {import("../DependencyTemplate").CssDependencyTemplateContext} DependencyTemplateContext */
 /** @typedef {import("../Generator").GenerateContext} GenerateContext */
 /** @typedef {import("../Generator").UpdateHashContext} UpdateHashContext */
+/** @typedef {import("../Module").BuildInfo} BuildInfo */
+/** @typedef {import("../Module").BuildMeta} BuildMeta */
 /** @typedef {import("../Module").ConcatenationBailoutReasonContext} ConcatenationBailoutReasonContext */
 /** @typedef {import("../Module").SourceTypes} SourceTypes */
+/** @typedef {import("../ModuleGraph")} ModuleGraph */
 /** @typedef {import("../NormalModule")} NormalModule */
 /** @typedef {import("../util/Hash")} Hash */
 
 class CssGenerator extends Generator {
 	/**
 	 * @param {CssAutoGeneratorOptions | CssGlobalGeneratorOptions | CssModuleGeneratorOptions} options options
+	 * @param {ModuleGraph} moduleGraph the module graph
 	 */
-	constructor(options) {
+	constructor(options, moduleGraph) {
 		super();
 		this.convention = options.exportsConvention;
 		this.localIdentName = options.localIdentName;
 		this.exportsOnly = options.exportsOnly;
 		this.esModule = options.esModule;
+		this._moduleGraph = moduleGraph;
 	}
 
 	/**
@@ -71,7 +79,7 @@ class CssGenerator extends Generator {
 		const initFragments = [];
 		/** @type {CssData} */
 		const cssData = {
-			esModule: this.esModule,
+			esModule: /** @type {boolean} */ (this.esModule),
 			exports: new Map()
 		};
 
@@ -131,7 +139,8 @@ class CssGenerator extends Generator {
 
 		switch (generateContext.type) {
 			case "javascript": {
-				module.buildInfo.cssData = cssData;
+				/** @type {BuildInfo} */
+				(module.buildInfo).cssData = cssData;
 
 				generateContext.runtimeRequirements.add(RuntimeGlobals.module);
 
@@ -167,6 +176,13 @@ class CssGenerator extends Generator {
 					return source;
 				}
 
+				if (
+					cssData.exports.size === 0 &&
+					!(/** @type {BuildMeta} */ (module.buildMeta).isCSSModule)
+				) {
+					return new RawSource("");
+				}
+
 				const needNsObj =
 					this.esModule &&
 					generateContext.moduleGraph
@@ -203,6 +219,29 @@ class CssGenerator extends Generator {
 
 				return InitFragment.addToSource(source, initFragments, generateContext);
 			}
+			default:
+				return null;
+		}
+	}
+
+	/**
+	 * @param {Error} error the error
+	 * @param {NormalModule} module module for which the code should be generated
+	 * @param {GenerateContext} generateContext context for generate
+	 * @returns {Source | null} generated code
+	 */
+	generateError(error, module, generateContext) {
+		switch (generateContext.type) {
+			case "javascript": {
+				return new RawSource(
+					`throw new Error(${JSON.stringify(error.message)});`
+				);
+			}
+			case "css": {
+				return new RawSource(`/**\n ${error.message} \n**/`);
+			}
+			default:
+				return null;
 		}
 	}
 
@@ -212,7 +251,22 @@ class CssGenerator extends Generator {
 	 */
 	getTypes(module) {
 		// TODO, find a better way to prevent the original module from being removed after concatenation, maybe it is a bug
-		return this.exportsOnly ? JS_AND_CSS_EXPORT_TYPES : JS_AND_CSS_TYPES;
+		if (this.exportsOnly) {
+			return JS_AND_CSS_EXPORT_TYPES;
+		}
+		const sourceTypes = new Set();
+		const connections = this._moduleGraph.getIncomingConnections(module);
+		for (const connection of connections) {
+			if (!connection.originModule) {
+				continue;
+			}
+			if (connection.originModule.type.split("/")[0] !== CSS_TYPE)
+				sourceTypes.add(JS_TYPE);
+		}
+		if (sourceTypes.has(JS_TYPE)) {
+			return JS_AND_CSS_TYPES;
+		}
+		return CSS_TYPES;
 	}
 
 	/**
@@ -223,11 +277,17 @@ class CssGenerator extends Generator {
 	getSize(module, type) {
 		switch (type) {
 			case "javascript": {
-				if (!module.buildInfo.cssData) {
+				const cssData = /** @type {BuildInfo} */ (module.buildInfo).cssData;
+				if (!cssData) {
 					return 42;
 				}
-
-				const exports = module.buildInfo.cssData.exports;
+				if (cssData.exports.size === 0) {
+					if (/** @type {BuildMeta} */ (module.buildMeta).isCSSModule) {
+						return 42;
+					}
+					return 0;
+				}
+				const exports = cssData.exports;
 				const stringifiedExports = JSON.stringify(
 					Array.from(exports).reduce((obj, [key, value]) => {
 						obj[key] = value;
@@ -246,6 +306,8 @@ class CssGenerator extends Generator {
 
 				return originalSource.size();
 			}
+			default:
+				return 0;
 		}
 	}
 
@@ -254,7 +316,7 @@ class CssGenerator extends Generator {
 	 * @param {UpdateHashContext} updateHashContext context for updating hash
 	 */
 	updateHash(hash, { module }) {
-		hash.update(this.esModule.toString());
+		hash.update(/** @type {boolean} */ (this.esModule).toString());
 	}
 }
 

package/lib/css/CssLoadingRuntimeModule.js

@@ -74,7 +74,8 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 			outputOptions: {
 				crossOriginLoading,
 				uniqueName,
-				chunkLoadTimeout: loadTimeout
+				chunkLoadTimeout: loadTimeout,
+				charset
 			}
 		} = compilation;
 		const fn = RuntimeGlobals.ensureChunkHandlers;
@@ -138,6 +139,7 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 
 		const code = Template.asString([
 			"link = document.createElement('link');",
+			charset ? "link.charset = 'utf-8';" : "",
 			`if (${RuntimeGlobals.scriptNonce}) {`,
 			Template.indent(
 				`link.setAttribute("nonce", ${RuntimeGlobals.scriptNonce});`
@@ -351,6 +353,7 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 							linkPrefetch.call(
 								Template.asString([
 									"var link = document.createElement('link');",
+									charset ? "link.charset = 'utf-8';" : "",
 									crossOriginLoading
 										? `link.crossOrigin = ${JSON.stringify(
 												crossOriginLoading
@@ -390,7 +393,7 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 							linkPreload.call(
 								Template.asString([
 									"var link = document.createElement('link');",
-									"link.charset = 'utf-8';",
+									charset ? "link.charset = 'utf-8';" : "",
 									`if (${RuntimeGlobals.scriptNonce}) {`,
 									Template.indent(
 										`link.setAttribute("nonce", ${RuntimeGlobals.scriptNonce});`

package/lib/css/CssModulesPlugin.js

@@ -23,6 +23,7 @@ const {
 	CSS_MODULE_TYPE_MODULE,
 	CSS_MODULE_TYPE_AUTO
 } = require("../ModuleTypeConstants");
+const NormalModule = require("../NormalModule");
 const RuntimeGlobals = require("../RuntimeGlobals");
 const SelfModuleFactory = require("../SelfModuleFactory");
 const Template = require("../Template");
@@ -36,12 +37,13 @@ const CssSelfLocalIdentifierDependency = require("../dependencies/CssSelfLocalId
 const CssUrlDependency = require("../dependencies/CssUrlDependency");
 const StaticExportsDependency = require("../dependencies/StaticExportsDependency");
 const JavascriptModulesPlugin = require("../javascript/JavascriptModulesPlugin");
-const { compareModulesByIdentifier } = require("../util/comparators");
+const { compareModulesByIdOrIdentifier } = require("../util/comparators");
 const createSchemaValidation = require("../util/create-schema-validation");
 const createHash = require("../util/createHash");
 const { getUndoPath } = require("../util/identifier");
 const memoize = require("../util/memoize");
 const nonNumericOnlyHash = require("../util/nonNumericOnlyHash");
+const removeBOM = require("../util/removeBOM");
 const CssGenerator = require("./CssGenerator");
 const CssParser = require("./CssParser");
 
@@ -54,6 +56,7 @@ const CssParser = require("./CssParser");
 /** @typedef {import("../Compiler")} Compiler */
 /** @typedef {import("../CssModule").Inheritance} Inheritance */
 /** @typedef {import("../Module")} Module */
+/** @typedef {import("../Module").BuildInfo} BuildInfo */
 /** @typedef {import("../Template").RuntimeTemplate} RuntimeTemplate */
 /** @typedef {import("../TemplatedPathPlugin").TemplatePath} TemplatePath */
 /** @typedef {import("../util/Hash")} Hash */
@@ -92,7 +95,7 @@ const getCssLoadingRuntimeModule = memoize(() =>
 
 /**
  * @param {string} name name
- * @returns {{oneOf: [{$ref: string}], definitions: *}} schema
+ * @returns {{ oneOf: [{ $ref: string }], definitions: import("../../schemas/WebpackOptions.json")["definitions"] }} schema
  */
 const getSchema = name => {
 	const { definitions } = require("../../schemas/WebpackOptions.json");
@@ -298,7 +301,10 @@ class CssModulesPlugin {
 						.tap(PLUGIN_NAME, generatorOptions => {
 							validateGeneratorOptions[type](generatorOptions);
 
-							return new CssGenerator(generatorOptions);
+							return new CssGenerator(
+								generatorOptions,
+								compilation.moduleGraph
+							);
 						});
 					normalModuleFactory.hooks.createModuleClass
 						.for(type)
@@ -360,13 +366,28 @@ class CssModulesPlugin {
 
 							return new CssModule(createData);
 						});
+
+					NormalModule.getCompilationHooks(compilation).processResult.tap(
+						PLUGIN_NAME,
+						(result, module) => {
+							if (module.type === type) {
+								const [source, ...rest] = result;
+
+								return [removeBOM(source), ...rest];
+							}
+
+							return result;
+						}
+					);
 				}
 
 				JavascriptModulesPlugin.getCompilationHooks(
 					compilation
 				).renderModuleContent.tap(PLUGIN_NAME, (source, module) => {
 					if (module instanceof CssModule && module.hot) {
-						const exports = module.buildInfo.cssData.exports;
+						const exports =
+							/** @type {BuildInfo} */
+							(module.buildInfo).cssData.exports;
 						const stringifiedExports = JSON.stringify(
 							JSON.stringify(
 								Array.from(exports).reduce((obj, [key, value]) => {
@@ -390,6 +411,8 @@ class CssModulesPlugin {
 
 						return new ConcatSource(source, "\n", new RawSource(hmrCode));
 					}
+
+					return source;
 				});
 				const orderedCssModulesPerChunk = new WeakMap();
 				compilation.hooks.afterCodeGeneration.tap(PLUGIN_NAME, () => {
@@ -475,7 +498,9 @@ class CssModulesPlugin {
 										chunk,
 										chunkGraph,
 										codeGenerationResults,
-										uniqueName: compilation.outputOptions.uniqueName,
+										uniqueName:
+											/** @type {string} */
+											(compilation.outputOptions.uniqueName),
 										undoPath,
 										modules,
 										runtimeTemplate
@@ -598,6 +623,10 @@ class CssModulesPlugin {
 		if (modulesByChunkGroup.length === 1)
 			return modulesByChunkGroup[0].list.reverse();
 
+		const boundCompareModulesByIdOrIdentifier = compareModulesByIdOrIdentifier(
+			compilation.chunkGraph
+		);
+
 		/**
 		 * @param {{ list: Module[] }} a a
 		 * @param {{ list: Module[] }} b b
@@ -608,7 +637,10 @@ class CssModulesPlugin {
 				return b.length === 0 ? 0 : 1;
 			}
 			if (b.length === 0) return -1;
-			return compareModulesByIdentifier(a[a.length - 1], b[b.length - 1]);
+			return boundCompareModulesByIdOrIdentifier(
+				a[a.length - 1],
+				b[b.length - 1]
+			);
 		};
 
 		modulesByChunkGroup.sort(compareModuleLists);
@@ -690,7 +722,7 @@ class CssModulesPlugin {
 					chunkGraph.getOrderedChunkModulesIterableBySourceType(
 						chunk,
 						"css-import",
-						compareModulesByIdentifier
+						compareModulesByIdOrIdentifier(chunkGraph)
 					)
 				),
 				compilation
@@ -702,7 +734,7 @@ class CssModulesPlugin {
 					chunkGraph.getOrderedChunkModulesIterableBySourceType(
 						chunk,
 						"css",
-						compareModulesByIdentifier
+						compareModulesByIdOrIdentifier(chunkGraph)
 					)
 				),
 				compilation
@@ -711,7 +743,7 @@ class CssModulesPlugin {
 	}
 
 	/**
-	 * @param {CssModule}  module css module
+	 * @param {CssModule} module css module
 	 * @param {ChunkRenderContext} renderContext options object
 	 * @param {CompilationHooks} hooks hooks
 	 * @returns {Source} css module source

package/lib/css/CssParser.js

@@ -283,13 +283,17 @@ const eatUntilSemi = walkCssTokens.eatUntil(";");
 const eatUntilLeftCurly = walkCssTokens.eatUntil("{");
 const eatSemi = walkCssTokens.eatUntil(";");
 
+/**
+ * @typedef {object} CssParserOptions
+ * @property {boolean=} importOption need handle `@import`
+ * @property {boolean=} url need handle URLs
+ * @property {("pure" | "global" | "local" | "auto")=} defaultMode default mode
+ * @property {boolean=} namedExports is named exports
+ */
+
 class CssParser extends Parser {
 	/**
-	 * @param {object} options options
-	 * @param {boolean=} options.importOption need handle `@import`
-	 * @param {boolean=} options.url need handle URLs
-	 * @param {("pure" | "global" | "local" | "auto")=} options.defaultMode default mode
-	 * @param {boolean=} options.namedExports is named exports
+	 * @param {CssParserOptions} [options] options
 	 */
 	constructor({
 		defaultMode = "pure",
@@ -357,6 +361,9 @@ class CssParser extends Parser {
 
 		const isModules = mode === "global" || mode === "local";
 
+		/** @type {BuildMeta} */
+		(module.buildMeta).isCSSModule = isModules;
+
 		const locConverter = new LocConverter(source);
 
 		/** @type {number} */
@@ -379,7 +386,8 @@ class CssParser extends Parser {
 		let lastIdentifier;
 		/** @type {Set<string>} */
 		const declaredCssVariables = new Set();
-		/** @type {Map<string, { path?: string, value: string }>} */
+		/** @typedef {{ path?: string, value: string }} IcssDefinition */
+		/** @type {Map<string, IcssDefinition>} */
 		const icssDefinitions = new Map();
 
 		/**
@@ -447,6 +455,7 @@ class CssParser extends Parser {
 		 */
 		const parseImportOrExport = (type, input, pos) => {
 			pos = walkCssTokens.eatWhitespaceAndComments(input, pos);
+			/** @type {string | undefined} */
 			let importPath;
 			if (type === 0) {
 				let cc = input.charCodeAt(pos);
@@ -517,7 +526,9 @@ class CssParser extends Parser {
 			/** @type {undefined | 0 | 1 | 2} */
 			let scope;
 
-			/** @type {[number, number] | undefined} */
+			/** @typedef {[number, number]} Name */
+
+			/** @type {Name | undefined} */
 			let name;
 			/** @type {number | undefined} */
 			let value;
@@ -537,10 +548,11 @@ class CssParser extends Parser {
 					balanced--;
 
 					if (scope === 2) {
+						const [nameStart, nameEnd] = /** @type {Name} */ (name);
 						createDep(
-							input.slice(name[0], name[1]),
+							input.slice(nameStart, nameEnd),
 							input.slice(value, end - 1).trim(),
-							name[1],
+							nameEnd,
 							end - 1
 						);
 						scope = 0;
@@ -571,10 +583,11 @@ class CssParser extends Parser {
 				},
 				semicolon: (input, _start, end) => {
 					if (scope === 2) {
+						const [nameStart, nameEnd] = /** @type {Name} */ (name);
 						createDep(
-							input.slice(name[0], name[1]),
+							input.slice(nameStart, nameEnd),
 							input.slice(value, end - 1),
-							name[1],
+							nameEnd,
 							end - 1
 						);
 						scope = 0;
@@ -986,7 +999,9 @@ class CssParser extends Parser {
 									}
 
 									if (icssDefinitions.has(value)) {
-										const def = icssDefinitions.get(value);
+										const def =
+											/** @type {IcssDefinition} */
+											(icssDefinitions.get(value));
 
 										value = def.value;
 									}
@@ -1068,13 +1083,18 @@ class CssParser extends Parser {
 			},
 			identifier: (input, start, end) => {
 				if (isModules) {
-					if (icssDefinitions.has(input.slice(start, end))) {
-						const name = input.slice(start, end);
-						let { path, value } = icssDefinitions.get(name);
+					const name = input.slice(start, end);
+
+					if (icssDefinitions.has(name)) {
+						let { path, value } =
+							/** @type {IcssDefinition} */
+							(icssDefinitions.get(name));
 
 						if (path) {
 							if (icssDefinitions.has(path)) {
-								const definition = icssDefinitions.get(path);
+								const definition =
+									/** @type {IcssDefinition} */
+									(icssDefinitions.get(path));
 
 								path = definition.value.slice(1, -1);
 							}
@@ -1555,7 +1575,7 @@ class CssParser extends Parser {
 
 	/**
 	 * @param {Range} range range of the comment
-	 * @returns {{ options: Record<string, any> | null, errors: (Error & { comment: Comment })[] | null }} result
+	 * @returns {{ options: Record<string, EXPECTED_ANY> | null, errors: (Error & { comment: Comment })[] | null }} result
 	 */
 	parseCommentOptions(range) {
 		const comments = this.getComments(range);

package/lib/css/walkCssTokens.js

@@ -7,25 +7,25 @@
 
 /**
  * @typedef {object} CssTokenCallbacks
- * @property {(function(string, number, number, number, number): number)=} url
- * @property {(function(string, number, number): number)=} comment
- * @property {(function(string, number, number): number)=} string
- * @property {(function(string, number, number): number)=} leftParenthesis
- * @property {(function(string, number, number): number)=} rightParenthesis
- * @property {(function(string, number, number): number)=} function
- * @property {(function(string, number, number): number)=} colon
- * @property {(function(string, number, number): number)=} atKeyword
- * @property {(function(string, number, number): number)=} delim
- * @property {(function(string, number, number): number)=} identifier
- * @property {(function(string, number, number, boolean): number)=} hash
- * @property {(function(string, number, number): number)=} leftCurlyBracket
- * @property {(function(string, number, number): number)=} rightCurlyBracket
- * @property {(function(string, number, number): number)=} semicolon
- * @property {(function(string, number, number): number)=} comma
- * @property {(function(): boolean)=} needTerminate
+ * @property {((input: string, start: number, end: number, innerStart: number, innerEnd: number) => number)=} url
+ * @property {((input: string, start: number, end: number) => number)=} comment
+ * @property {((input: string, start: number, end: number) => number)=} string
+ * @property {((input: string, start: number, end: number) => number)=} leftParenthesis
+ * @property {((input: string, start: number, end: number) => number)=} rightParenthesis
+ * @property {((input: string, start: number, end: number) => number)=} function
+ * @property {((input: string, start: number, end: number) => number)=} colon
+ * @property {((input: string, start: number, end: number) => number)=} atKeyword
+ * @property {((input: string, start: number, end: number) => number)=} delim
+ * @property {((input: string, start: number, end: number) => number)=} identifier
+ * @property {((input: string, start: number, end: number, isId: boolean) => number)=} hash
+ * @property {((input: string, start: number, end: number) => number)=} leftCurlyBracket
+ * @property {((input: string, start: number, end: number) => number)=} rightCurlyBracket
+ * @property {((input: string, start: number, end: number) => number)=} semicolon
+ * @property {((input: string, start: number, end: number) => number)=} comma
+ * @property {(() => boolean)=} needTerminate
  */
 
-/** @typedef {function(string, number, CssTokenCallbacks): number} CharHandler */
+/** @typedef {(input: string, pos: number, callbacks: CssTokenCallbacks) => number} CharHandler */
 
 // spec: https://drafts.csswg.org/css-syntax/