webpack 5.106.0 → 5.106.2

package/lib/css/CssModulesPlugin.js

@@ -64,6 +64,7 @@ const publicPathAutoRegex = new RegExp(CssUrlDependency.PUBLIC_PATH_AUTO, "g");
 /** @typedef {import("../Module").BuildMeta} BuildMeta */
 
 /**
+ * Defines the render context type used by this module.
  * @typedef {object} RenderContext
  * @property {Chunk} chunk the chunk
  * @property {ChunkGraph} chunkGraph the chunk graph
@@ -75,6 +76,7 @@ const publicPathAutoRegex = new RegExp(CssUrlDependency.PUBLIC_PATH_AUTO, "g");
  */
 
 /**
+ * Defines the chunk render context type used by this module.
  * @typedef {object} ChunkRenderContext
  * @property {Chunk=} chunk the chunk
  * @property {ChunkGraph=} chunkGraph the chunk graph
@@ -86,12 +88,14 @@ const publicPathAutoRegex = new RegExp(CssUrlDependency.PUBLIC_PATH_AUTO, "g");
  */
 
 /**
+ * Defines the compilation hooks type used by this module.
  * @typedef {object} CompilationHooks
  * @property {SyncWaterfallHook<[Source, Module, ChunkRenderContext]>} renderModulePackage
  * @property {SyncHook<[Chunk, Hash, ChunkHashContext]>} chunkHash
  */
 
 /**
+ * Defines the module factory cache entry type used by this module.
  * @typedef {object} ModuleFactoryCacheEntry
  * @property {string} undoPath - The undo path to the CSS file
  * @property {Inheritance} inheritance - The inheritance chain
@@ -109,6 +113,7 @@ const getCssInjectStyleRuntimeModule = memoize(() =>
 );
 
 /**
+ * Returns ], definitions: import("../../schemas/WebpackOptions.json")["definitions"] }} schema.
  * @param {string} name name
  * @returns {{ oneOf: [{ $ref: string }], definitions: import("../../schemas/WebpackOptions.json")["definitions"] }} schema
  */
@@ -138,6 +143,7 @@ const PLUGIN_NAME = "CssModulesPlugin";
 
 class CssModulesPlugin {
 	/**
+	 * Returns the attached hooks.
 	 * @param {Compilation} compilation the compilation
 	 * @returns {CompilationHooks} the attached hooks
 	 */
@@ -168,7 +174,7 @@ class CssModulesPlugin {
 	}
 
 	/**
-	 * Apply the plugin
+	 * Applies the plugin by registering its hooks on the compiler.
 	 * @param {Compiler} compiler the compiler instance
 	 * @returns {void}
 	 */
@@ -399,7 +405,7 @@ class CssModulesPlugin {
 												supports: dependency.supports,
 												media: dependency.media,
 												inheritance,
-												exportType: exportType || parent.exportType
+												exportType: parent.exportType || exportType
 											})
 										);
 									}
@@ -586,6 +592,7 @@ class CssModulesPlugin {
 				});
 				const globalChunkLoading = compilation.outputOptions.chunkLoading;
 				/**
+				 * Checks whether this css modules plugin is enabled for chunk.
 				 * @param {Chunk} chunk the chunk
 				 * @returns {boolean} true, when enabled
 				 */
@@ -600,6 +607,7 @@ class CssModulesPlugin {
 				/** @type {WeakSet<Chunk>} */
 				const onceForChunkSet = new WeakSet();
 				/**
+				 * Handles the hook callback for this code path.
 				 * @param {Chunk} chunk chunk to check
 				 * @param {RuntimeRequirements} set runtime requirements
 				 */
@@ -681,6 +689,7 @@ class CssModulesPlugin {
 	}
 
 	/**
+	 * Gets modules in order.
 	 * @param {Chunk} chunk chunk
 	 * @param {Iterable<Module> | undefined} modules unordered modules
 	 * @param {Compilation} compilation compilation
@@ -722,6 +731,7 @@ class CssModulesPlugin {
 		);
 
 		/**
+		 * Compares module lists.
 		 * @param {{ list: Module[] }} a a
 		 * @param {{ list: Module[] }} b b
 		 * @returns {-1 | 0 | 1} result
@@ -826,12 +836,16 @@ class CssModulesPlugin {
 	}
 
 	/**
+	 * Gets ordered chunk css modules.
 	 * @param {Chunk} chunk chunk
 	 * @param {ChunkGraph} chunkGraph chunk graph
 	 * @param {Compilation} compilation compilation
 	 * @returns {CssModule[]} ordered css modules
 	 */
 	getOrderedChunkCssModules(chunk, chunkGraph, compilation) {
+		/** @type {string | undefined} */
+		let charset;
+
 		return /** @type {CssModule[]} */ ([
 			...this.getModulesInOrder(
 				chunk,
@@ -850,11 +864,42 @@ class CssModulesPlugin {
 					compareModulesByFullName(compilation.compiler)
 				),
 				compilation
-			)
+			).map((module) => {
+				if (
+					typeof (/** @type {BuildInfo} */ (module.buildInfo).charset) !==
+					"undefined"
+				) {
+					if (
+						typeof charset !== "undefined" &&
+						charset !== /** @type {BuildInfo} */ (module.buildInfo).charset
+					) {
+						const err = new WebpackError(
+							`Conflicting @charset at-rules detected: the module ${module.readableIdentifier(
+								compilation.requestShortener
+							)} (in chunk ${chunk.name || chunk.id}) specifies "${
+								/** @type {BuildInfo} */ (module.buildInfo).charset
+							}", but "${charset}" was expected, all modules must use the same character set`
+						);
+
+						err.chunk = chunk;
+						err.module = module;
+						err.hideStack = true;
+
+						compilation.warnings.push(err);
+					}
+
+					if (typeof charset === "undefined") {
+						charset = /** @type {BuildInfo} */ (module.buildInfo).charset;
+					}
+				}
+
+				return module;
+			})
 		]);
 	}
 
 	/**
+	 * Renders css module source.
 	 * @param {CssModule} module css module
 	 * @param {ChunkRenderContext} renderContext options object
 	 * @param {CompilationHooks} hooks hooks
@@ -953,6 +998,7 @@ class CssModulesPlugin {
 	}
 
 	/**
+	 * Renders generated source.
 	 * @param {RenderContext} renderContext the render context
 	 * @param {CompilationHooks} hooks hooks
 	 * @returns {Source} generated source
@@ -969,7 +1015,19 @@ class CssModulesPlugin {
 		hooks
 	) {
 		const source = new ConcatSource();
+
+		/** @type {string | undefined} */
+		let charset;
+
 		for (const module of modules) {
+			if (
+				typeof (/** @type {BuildInfo} */ (module.buildInfo).charset) !==
+					"undefined" &&
+				typeof charset === "undefined"
+			) {
+				charset = /** @type {BuildInfo} */ (module.buildInfo).charset;
+			}
+
 			try {
 				const codeGenResult = codeGenerationResults.get(module, chunk.runtime);
 				const moduleSourceContent =
@@ -1000,11 +1058,18 @@ class CssModulesPlugin {
 				throw err;
 			}
 		}
+
 		chunk.rendered = true;
+
+		if (charset) {
+			return new ConcatSource(`@charset "${charset}";\n`, source);
+		}
+
 		return source;
 	}
 
 	/**
+	 * Gets chunk filename template.
 	 * @param {Chunk} chunk chunk
 	 * @param {OutputOptions} outputOptions output options
 	 * @returns {TemplatePath} used filename template
@@ -1019,6 +1084,7 @@ class CssModulesPlugin {
 	}
 
 	/**
+	 * Returns true, when the chunk has css.
 	 * @param {Chunk} chunk chunk
 	 * @param {ChunkGraph} chunkGraph chunk graph
 	 * @returns {boolean} true, when the chunk has css

package/lib/css/CssParser.js

@@ -51,6 +51,7 @@ const CC_HYPHEN_MINUS = "-".charCodeAt(0);
 const CC_TILDE = "~".charCodeAt(0);
 const CC_EQUAL = "=".charCodeAt(0);
 const CC_FULL_STOP = ".".charCodeAt(0);
+const CC_EXCLAMATION = "!".charCodeAt(0);
 
 // https://www.w3.org/TR/css-syntax-3/#newline
 // We don't have `preprocessing` stage, so we need specify all of them
@@ -65,6 +66,7 @@ const IS_MODULES = /\.modules?\.[^.]+$/i;
 const CSS_COMMENT = /\/\*((?!\*\/)[\s\S]*?)\*\//g;
 
 /**
+ * Returns matches.
  * @param {RegExp} regexp a regexp
  * @param {string} str a string
  * @returns {RegExpExecArray[]} matches
@@ -86,6 +88,7 @@ const matchAll = (regexp, str) => {
 };
 
 /**
+ * Returns normalized url.
  * @param {string} str url string
  * @param {boolean} isString is url wrapped in quotes
  * @returns {string} normalized url
@@ -130,6 +133,7 @@ const regexExcessiveSpaces =
 	/(^|\\+)?(\\[A-F0-9]{1,6})\u0020(?![a-fA-F0-9\u0020])/g;
 
 /**
+ * Returns escaped identifier.
  * @param {string} str string
  * @returns {string} escaped identifier
  */
@@ -183,6 +187,7 @@ const escapeIdentifier = (str) => {
 const CONTAINS_ESCAPE = /\\/;
 
 /**
+ * Returns hex.
  * @param {string} str string
  * @returns {[string, number] | undefined} hex
  */
@@ -220,6 +225,7 @@ const gobbleHex = (str) => {
 };
 
 /**
+ * Unescape identifier.
  * @param {string} str string
  * @returns {string} unescaped string
  */
@@ -405,6 +411,7 @@ const GRID = {
 };
 
 /**
+ * Gets known properties.
  * @param {{ animation?: boolean, container?: boolean, customIdents?: boolean, grid?: boolean }=} options options
  * @returns {Map<string, Record<string, number>>} list of known properties
  */
@@ -526,6 +533,7 @@ const getKnownProperties = (options = {}) => {
 
 class LocConverter {
 	/**
+	 * Creates an instance of LocConverter.
 	 * @param {string} input input
 	 */
 	constructor(input) {
@@ -536,6 +544,7 @@ class LocConverter {
 	}
 
 	/**
+	 * Returns location converter.
 	 * @param {number} pos position
 	 * @returns {LocConverter} location converter
 	 */
@@ -582,6 +591,7 @@ const eatUntilSemi = walkCssTokens.eatUntil(";");
 const eatUntilLeftCurly = walkCssTokens.eatUntil("{");
 
 /**
+ * Defines the css parser own options type used by this module.
  * @typedef {object} CssParserOwnOptions
  * @property {("pure" | "global" | "local" | "auto")=} defaultMode default mode
  */
@@ -590,6 +600,7 @@ const eatUntilLeftCurly = walkCssTokens.eatUntil("{");
 
 class CssParser extends Parser {
 	/**
+	 * Creates an instance of CssParser.
 	 * @param {CssParserOptions=} options options
 	 */
 	constructor(options = {}) {
@@ -614,6 +625,7 @@ class CssParser extends Parser {
 	}
 
 	/**
+	 * Processes the provided state.
 	 * @param {ParserState} state parser state
 	 * @param {string} message warning message
 	 * @param {LocConverter} locConverter location converter
@@ -633,6 +645,7 @@ class CssParser extends Parser {
 	}
 
 	/**
+	 * Parses the provided source and updates the parser state.
 	 * @param {string | Buffer | PreparsedAst} source the source to parse
 	 * @param {ParserState} state the parser state
 	 * @returns {ParserState} the parser state
@@ -699,6 +712,7 @@ class CssParser extends Parser {
 		const icssDefinitions = new Map();
 
 		/**
+		 * Checks whether this css parser is next nested syntax.
 		 * @param {string} input input
 		 * @param {number} pos position
 		 * @returns {boolean} true, when next is nested syntax
@@ -730,12 +744,14 @@ class CssParser extends Parser {
 			return true;
 		};
 		/**
+		 * Checks whether this css parser is local mode.
 		 * @returns {boolean} true, when in local scope
 		 */
 		const isLocalMode = () =>
 			modeData === LOCAL_MODE || (mode === "local" && modeData === undefined);
 
 		/**
+		 * Returns end.
 		 * @param {string} input input
 		 * @param {number} start start
 		 * @param {number} end end
@@ -762,6 +778,7 @@ class CssParser extends Parser {
 		// Vanilla CSS stuff
 
 		/**
+		 * Processes the provided input.
 		 * @param {string} input input
 		 * @param {number} start name start position
 		 * @param {number} end name end position
@@ -874,6 +891,7 @@ class CssParser extends Parser {
 		};
 
 		/**
+		 * Process url function.
 		 * @param {string} input input
 		 * @param {number} end end position
 		 * @param {string} name the name of function
@@ -936,6 +954,7 @@ class CssParser extends Parser {
 		};
 
 		/**
+		 * Process old url function.
 		 * @param {string} input input
 		 * @param {number} start start position
 		 * @param {number} end end position
@@ -998,6 +1017,7 @@ class CssParser extends Parser {
 		};
 
 		/**
+		 * Process image set function.
 		 * @param {string} input input
 		 * @param {number} start start position
 		 * @param {number} end end position
@@ -1062,6 +1082,7 @@ class CssParser extends Parser {
 		// CSS modules stuff
 
 		/**
+		 * Returns resolved reexport (localName and importName).
 		 * @param {string} value value to resolve
 		 * @param {string=} localName override local name
 		 * @param {boolean=} isCustomProperty true when it is custom property, otherwise false
@@ -1095,6 +1116,7 @@ class CssParser extends Parser {
 		};
 
 		/**
+		 * Process import or export.
 		 * @param {0 | 1} type import or export
 		 * @param {string} input input
 		 * @param {number} pos start position
@@ -1148,6 +1170,7 @@ class CssParser extends Parser {
 			}
 
 			/**
+			 * Creates a dep from the provided name.
 			 * @param {string} name name
 			 * @param {string} value value
 			 * @param {number} start start of position
@@ -1265,6 +1288,7 @@ class CssParser extends Parser {
 		/** @typedef {{ from: string, items: ({ localName: string, importName: string })[] }} ValueAtRuleImport */
 		/** @typedef {{ localName: string, value: string }} ValueAtRuleValue */
 		/**
+		 * Parses value at rule params.
 		 * @param {string} str value at-rule params
 		 * @returns {ValueAtRuleImport | ValueAtRuleValue} parsed result
 		 */
@@ -1333,6 +1357,7 @@ class CssParser extends Parser {
 		};
 
 		/**
+		 * Processes the provided input.
 		 * @param {string} input input
 		 * @param {number} start name start position
 		 * @param {number} end name end position
@@ -1450,6 +1475,7 @@ class CssParser extends Parser {
 		};
 
 		/**
+		 * Process icss symbol.
 		 * @param {string} name ICSS symbol name
 		 * @param {number} start start position
 		 * @param {number} end end position
@@ -1473,6 +1499,7 @@ class CssParser extends Parser {
 		};
 
 		/**
+		 * Process local or global function.
 		 * @param {string} input input
 		 * @param {1 | 2} type type of function
 		 * @param {number} start start position
@@ -1534,6 +1561,7 @@ class CssParser extends Parser {
 		};
 
 		/**
+		 * Process local at rule.
 		 * @param {string} input input
 		 * @param {number} end name end position
 		 * @param {{ string?: boolean, identifier?: boolean | RegExp }} options types which allowed to handle
@@ -1628,6 +1656,7 @@ class CssParser extends Parser {
 			);
 		};
 		/**
+		 * Process dashed ident.
 		 * @param {string} input input
 		 * @param {number} start start position
 		 * @param {number} end end position
@@ -1727,6 +1756,7 @@ class CssParser extends Parser {
 			return end;
 		};
 		/**
+		 * Process local declaration.
 		 * @param {string} input input
 		 * @param {number} pos name start position
 		 * @param {number} end name end position
@@ -1772,10 +1802,16 @@ class CssParser extends Parser {
 						)
 					: false;
 
+				let afterExclamation = false;
+
 				const end = walkCssTokens.consumeUntil(
 					input,
 					pos,
 					{
+						delim(input, start, end) {
+							afterExclamation = input.charCodeAt(start) === CC_EXCLAMATION;
+							return end;
+						},
 						leftSquareBracket(input, start, end) {
 							let i = end;
 
@@ -1824,6 +1860,11 @@ class CssParser extends Parser {
 								return end;
 							}
 
+							if (afterExclamation) {
+								afterExclamation = false;
+								return end;
+							}
+
 							const identifier = input.slice(start, end);
 							const keyword = identifier.toLowerCase();
 
@@ -2121,6 +2162,7 @@ class CssParser extends Parser {
 		};
 
 		/**
+		 * Process id selector.
 		 * @param {string} input input
 		 * @param {number} start start position
 		 * @param {number} end end position
@@ -2144,6 +2186,7 @@ class CssParser extends Parser {
 		};
 
 		/**
+		 * Process class selector.
 		 * @param {string} input input
 		 * @param {number} start start position
 		 * @param {number} end end position
@@ -2169,6 +2212,7 @@ class CssParser extends Parser {
 		};
 
 		/**
+		 * Process attribute selector.
 		 * @param {string} input input
 		 * @param {number} start start position
 		 * @param {number} end end position
@@ -2303,6 +2347,29 @@ class CssParser extends Parser {
 
 						return eatUntilSemi(input, start);
 					}
+					case "@charset": {
+						const atRuleEnd = eatUntilSemi(input, start);
+
+						if (/** @type {CssModule} */ (module).exportType === "style") {
+							return atRuleEnd;
+						}
+
+						const dep = new ConstDependency("", [start, atRuleEnd + 1]);
+						module.addPresentationalDependency(dep);
+
+						const value = walkCssTokens.eatString(input, end);
+
+						if (!value) {
+							return atRuleEnd;
+						}
+
+						/** @type {BuildInfo} */
+						(module.buildInfo).charset = input
+							.slice(value[0] + 1, value[1] - 1)
+							.toUpperCase();
+
+						return atRuleEnd;
+					}
 					case "@import": {
 						if (!this.options.import) {
 							return eatUntilSemi(input, end);
@@ -2316,7 +2383,7 @@ class CssParser extends Parser {
 								start,
 								end
 							);
-							return end;
+							return eatUntilSemi(input, end);
 						}
 
 						return processAtImport(input, start, end);
@@ -2641,6 +2708,7 @@ class CssParser extends Parser {
 	}
 
 	/**
+	 * Returns comments in the range.
 	 * @param {Range} range range
 	 * @returns {Comment[]} comments in the range
 	 */
@@ -2648,6 +2716,7 @@ class CssParser extends Parser {
 		if (!this.comments) return [];
 		const [rangeStart, rangeEnd] = range;
 		/**
+		 * Returns compared.
 		 * @param {Comment} comment comment
 		 * @param {number} needle needle
 		 * @returns {number} compared
@@ -2670,6 +2739,7 @@ class CssParser extends Parser {
 	}
 
 	/**
+	 * Parses comment options.
 	 * @param {Range} range range of the comment
 	 * @returns {{ options: Record<string, EXPECTED_ANY> | null, errors: (Error & { comment: Comment })[] | null }} result
 	 */