webpack 5.105.3 → 5.106.0

package/lib/css/CssInjectStyleRuntimeModule.js

@@ -0,0 +1,179 @@
+/*
+	MIT License http://www.opensource.org/licenses/mit-license.php
+	Author Natsu @xiaoxiaojx
+*/
+
+"use strict";
+
+const { SyncWaterfallHook } = require("tapable");
+const Compilation = require("../Compilation");
+const RuntimeGlobals = require("../RuntimeGlobals");
+const RuntimeModule = require("../RuntimeModule");
+const Template = require("../Template");
+
+/** @typedef {import("../Chunk")} Chunk */
+/** @typedef {import("../Module").ReadOnlyRuntimeRequirements} ReadOnlyRuntimeRequirements */
+
+/**
+ * @typedef {object} CssInjectCompilationHooks
+ * @property {SyncWaterfallHook<[string, Chunk]>} createStyle
+ */
+
+/** @type {WeakMap<Compilation, CssInjectCompilationHooks>} */
+const compilationHooksMap = new WeakMap();
+
+class CssInjectStyleRuntimeModule extends RuntimeModule {
+	/**
+	 * @param {Compilation} compilation the compilation
+	 * @returns {CssInjectCompilationHooks} hooks
+	 */
+	static getCompilationHooks(compilation) {
+		if (!(compilation instanceof Compilation)) {
+			throw new TypeError(
+				"The 'compilation' argument must be an instance of Compilation"
+			);
+		}
+		let hooks = compilationHooksMap.get(compilation);
+		if (hooks === undefined) {
+			hooks = {
+				createStyle: new SyncWaterfallHook(["source", "chunk"])
+			};
+			compilationHooksMap.set(compilation, hooks);
+		}
+		return hooks;
+	}
+
+	/**
+	 * @param {ReadOnlyRuntimeRequirements} runtimeRequirements runtime requirements
+	 */
+	constructor(runtimeRequirements) {
+		super("css inject style", RuntimeModule.STAGE_ATTACH);
+		/** @type {ReadOnlyRuntimeRequirements} */
+		this._runtimeRequirements = runtimeRequirements;
+	}
+
+	/**
+	 * @returns {string | null} runtime code
+	 */
+	generate() {
+		const compilation = /** @type {Compilation} */ (this.compilation);
+		const { runtimeTemplate, outputOptions } = compilation;
+		const { uniqueName } = outputOptions;
+		const { _runtimeRequirements } = this;
+
+		/** @type {boolean} */
+		const withHmr =
+			_runtimeRequirements &&
+			_runtimeRequirements.has(RuntimeGlobals.hmrDownloadUpdateHandlers);
+
+		const { createStyle } =
+			CssInjectStyleRuntimeModule.getCompilationHooks(compilation);
+
+		const createStyleElementCode = Template.asString([
+			"var style = document.createElement('style');",
+			"",
+			`if (${RuntimeGlobals.scriptNonce}) {`,
+			Template.indent(
+				`style.setAttribute("nonce", ${RuntimeGlobals.scriptNonce});`
+			),
+			"}",
+			'style.setAttribute("data-webpack", getDataWebpackId(key));'
+		]);
+
+		return Template.asString([
+			`var dataWebpackPrefix = ${uniqueName ? JSON.stringify(`${uniqueName}:`) : '"webpack:"'};`,
+			"",
+			"function getDataWebpackId(identifier) {",
+			Template.indent("return dataWebpackPrefix + identifier;"),
+			"}",
+			"",
+			"function applyStyle(styleElement, css) {",
+			Template.indent("styleElement.textContent = css;"),
+			"}",
+			"",
+			"function removeStyleElement(styleElement) {",
+			Template.indent([
+				"if (styleElement.parentNode) {",
+				Template.indent("styleElement.parentNode.removeChild(styleElement);"),
+				"}"
+			]),
+			"}",
+			"",
+			"function findStyleElement(identifier) {",
+			Template.indent([
+				"var elements = document.getElementsByTagName('style');",
+				"for (var i = 0; i < elements.length; i++) {",
+				Template.indent([
+					"var el = elements[i];",
+					"if (el.getAttribute('data-webpack') === getDataWebpackId(identifier)) {",
+					Template.indent("return el;"),
+					"}"
+				]),
+				"}",
+				"return null;"
+			]),
+			"}",
+			"",
+			"function insertStyleElement(key) {",
+			Template.indent([
+				createStyle.call(
+					createStyleElementCode,
+					/** @type {Chunk} */ (this.chunk)
+				),
+				"",
+				"document.head.appendChild(style);",
+				"",
+				"return style;"
+			]),
+			"}",
+			"",
+			`${RuntimeGlobals.cssInjectStyle} = ${runtimeTemplate.basicFunction(
+				"identifier, css",
+				[
+					"var element = findStyleElement(identifier);",
+					"if (element) {",
+					Template.indent("applyStyle(element, css);"),
+					"} else {",
+					Template.indent([
+						"var element = insertStyleElement(identifier);",
+						"applyStyle(element, css);"
+					]),
+					"}"
+				]
+			)};`,
+			"",
+			`${RuntimeGlobals.cssInjectStyle}.removeModules = ${runtimeTemplate.basicFunction(
+				"removedModules",
+				[
+					"if (!removedModules) return;",
+					"var identifiers = Array.isArray(removedModules) ? removedModules : [removedModules];",
+					"for (var i = 0; i < identifiers.length; i++) {",
+					Template.indent([
+						"var identifier = identifiers[i];",
+						"var element = findStyleElement(identifier);",
+						"if (element) {",
+						Template.indent("removeStyleElement(element);"),
+						"}"
+					]),
+					"}"
+				]
+			)};`,
+			withHmr
+				? Template.asString([
+						`${RuntimeGlobals.hmrDownloadUpdateHandlers}.cssInjectStyle = ${runtimeTemplate.basicFunction(
+							"chunkIds, removedChunks, removedModules, promises, applyHandlers, updatedModulesList, css",
+							[
+								"if (removedModules) {",
+								Template.indent(
+									`${RuntimeGlobals.cssInjectStyle}.removeModules(removedModules);`
+								),
+								"}"
+							]
+						)};`
+					])
+				: "// no css inject style HMR download handler"
+		]);
+	}
+}
+
+module.exports = CssInjectStyleRuntimeModule;

package/lib/css/CssLoadingRuntimeModule.js

@@ -121,16 +121,13 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 			(environment.document || isNeutralPlatform) &&
 			chunk.hasChildByOrder(chunkGraph, "preload", true, chunkHasCss);
 
-		const { linkPreload, linkPrefetch } =
+		const { linkPreload, linkPrefetch, createStylesheet } =
 			CssLoadingRuntimeModule.getCompilationHooks(compilation);
 
 		const withFetchPriority = _runtimeRequirements.has(
 			RuntimeGlobals.hasFetchPriority
 		);
 
-		const { createStylesheet } =
-			CssLoadingRuntimeModule.getCompilationHooks(compilation);
-
 		const stateExpression = withHmr
 			? `${RuntimeGlobals.hmrRuntimeStatePrefix}_css`
 			: undefined;

package/lib/css/CssModulesPlugin.js

@@ -36,16 +36,16 @@ const CssUrlDependency = require("../dependencies/CssUrlDependency");
 const StaticExportsDependency = require("../dependencies/StaticExportsDependency");
 const JavascriptModulesPlugin = require("../javascript/JavascriptModulesPlugin");
 const { compareModulesByFullName } = 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 CssMergeStyleSheetsRuntimeModule = require("./CssMergeStyleSheetsRuntimeModule");
 const CssParser = require("./CssParser");
 
+const publicPathAutoRegex = new RegExp(CssUrlDependency.PUBLIC_PATH_AUTO, "g");
+
 /** @typedef {import("webpack-sources").Source} Source */
 /** @typedef {import("../config/defaults").OutputNormalizedWithDefaults} OutputOptions */
 /** @typedef {import("../Chunk")} Chunk */
@@ -101,6 +101,12 @@ const CssParser = require("./CssParser");
 const getCssLoadingRuntimeModule = memoize(() =>
 	require("./CssLoadingRuntimeModule")
 );
+const getCssMergeStyleSheetsRuntimeModule = memoize(() =>
+	require("./CssMergeStyleSheetsRuntimeModule")
+);
+const getCssInjectStyleRuntimeModule = memoize(() =>
+	require("./CssInjectStyleRuntimeModule")
+);
 
 /**
  * @param {string} name name
@@ -115,58 +121,14 @@ const getSchema = (name) => {
 	};
 };
 
-const generatorValidationOptions = {
-	name: "Css Modules Plugin",
-	baseDataPath: "generator"
-};
-const validateGeneratorOptions = {
-	css: createSchemaValidation(
-		require("../../schemas/plugins/css/CssGeneratorOptions.check"),
-		() => getSchema("CssGeneratorOptions"),
-		generatorValidationOptions
-	),
-	"css/auto": createSchemaValidation(
-		require("../../schemas/plugins/css/CssModuleGeneratorOptions.check"),
-		() => getSchema("CssModuleGeneratorOptions"),
-		generatorValidationOptions
-	),
-	"css/module": createSchemaValidation(
-		require("../../schemas/plugins/css/CssModuleGeneratorOptions.check"),
-		() => getSchema("CssModuleGeneratorOptions"),
-		generatorValidationOptions
-	),
-	"css/global": createSchemaValidation(
-		require("../../schemas/plugins/css/CssModuleGeneratorOptions.check"),
-		() => getSchema("CssModuleGeneratorOptions"),
-		generatorValidationOptions
-	)
-};
-
 const parserValidationOptions = {
 	name: "Css Modules Plugin",
 	baseDataPath: "parser"
 };
-const validateParserOptions = {
-	css: createSchemaValidation(
-		require("../../schemas/plugins/css/CssParserOptions.check"),
-		() => getSchema("CssParserOptions"),
-		parserValidationOptions
-	),
-	"css/auto": createSchemaValidation(
-		require("../../schemas/plugins/css/CssModuleParserOptions.check"),
-		() => getSchema("CssModuleParserOptions"),
-		parserValidationOptions
-	),
-	"css/module": createSchemaValidation(
-		require("../../schemas/plugins/css/CssModuleParserOptions.check"),
-		() => getSchema("CssModuleParserOptions"),
-		parserValidationOptions
-	),
-	"css/global": createSchemaValidation(
-		require("../../schemas/plugins/css/CssModuleParserOptions.check"),
-		() => getSchema("CssModuleParserOptions"),
-		parserValidationOptions
-	)
+
+const generatorValidationOptions = {
+	name: "Css Modules Plugin",
+	baseDataPath: "generator"
 };
 
 /** @type {WeakMap<Compilation, CompilationHooks>} */
@@ -260,38 +222,126 @@ class CssModulesPlugin {
 					normalModuleFactory.hooks.createParser
 						.for(type)
 						.tap(PLUGIN_NAME, (parserOptions) => {
+							/** @type {undefined | "global" | "local" | "auto"} */
+							let defaultMode;
+
 							switch (type) {
-								case CSS_MODULE_TYPE:
-									validateParserOptions[type](parserOptions);
-
-									return new CssParser(parserOptions);
-								case CSS_MODULE_TYPE_GLOBAL:
-									validateParserOptions[type](parserOptions);
-
-									return new CssParser({
-										defaultMode: "global",
-										...parserOptions
-									});
-								case CSS_MODULE_TYPE_MODULE:
-									validateParserOptions[type](parserOptions);
-
-									return new CssParser({
-										defaultMode: "local",
-										...parserOptions
-									});
-								case CSS_MODULE_TYPE_AUTO:
-									validateParserOptions[type](parserOptions);
-
-									return new CssParser({
-										defaultMode: "auto",
-										...parserOptions
-									});
+								case CSS_MODULE_TYPE: {
+									compiler.validate(
+										() => getSchema("CssParserOptions"),
+										parserOptions,
+										parserValidationOptions,
+										(options) =>
+											require("../../schemas/plugins/css/CssParserOptions.check")(
+												options
+											)
+									);
+
+									break;
+								}
+								case CSS_MODULE_TYPE_GLOBAL: {
+									defaultMode = "global";
+									compiler.validate(
+										() => getSchema("CssModuleParserOptions"),
+										parserOptions,
+										parserValidationOptions,
+										(options) =>
+											require("../../schemas/plugins/css/CssModuleParserOptions.check")(
+												options
+											)
+									);
+									break;
+								}
+								case CSS_MODULE_TYPE_MODULE: {
+									defaultMode = "local";
+									compiler.validate(
+										() => getSchema("CssModuleParserOptions"),
+										parserOptions,
+										parserValidationOptions,
+										(options) =>
+											require("../../schemas/plugins/css/CssModuleParserOptions.check")(
+												options
+											)
+									);
+									break;
+								}
+								case CSS_MODULE_TYPE_AUTO: {
+									defaultMode = "auto";
+									compiler.validate(
+										() => getSchema("CssModuleParserOptions"),
+										parserOptions,
+										parserValidationOptions,
+										(options) =>
+											require("../../schemas/plugins/css/CssModuleParserOptions.check")(
+												options
+											)
+									);
+									break;
+								}
 							}
+
+							return new CssParser({
+								defaultMode,
+								...parserOptions
+							});
 						});
 					normalModuleFactory.hooks.createGenerator
 						.for(type)
 						.tap(PLUGIN_NAME, (generatorOptions) => {
-							validateGeneratorOptions[type](generatorOptions);
+							switch (type) {
+								case CSS_MODULE_TYPE: {
+									compiler.validate(
+										() => getSchema("CssGeneratorOptions"),
+										generatorOptions,
+										generatorValidationOptions,
+										(options) =>
+											require("../../schemas/plugins/css/CssGeneratorOptions.check")(
+												options
+											)
+									);
+
+									break;
+								}
+								case CSS_MODULE_TYPE_GLOBAL: {
+									compiler.validate(
+										() => getSchema("CssModuleGeneratorOptions"),
+										generatorOptions,
+										generatorValidationOptions,
+										(options) =>
+											require("../../schemas/plugins/css/CssModuleGeneratorOptions.check")(
+												options
+											)
+									);
+
+									break;
+								}
+								case CSS_MODULE_TYPE_MODULE: {
+									compiler.validate(
+										() => getSchema("CssModuleGeneratorOptions"),
+										generatorOptions,
+										generatorValidationOptions,
+										(options) =>
+											require("../../schemas/plugins/css/CssModuleGeneratorOptions.check")(
+												options
+											)
+									);
+
+									break;
+								}
+								case CSS_MODULE_TYPE_AUTO: {
+									compiler.validate(
+										() => getSchema("CssModuleGeneratorOptions"),
+										generatorOptions,
+										generatorValidationOptions,
+										(options) =>
+											require("../../schemas/plugins/css/CssModuleGeneratorOptions.check")(
+												options
+											)
+									);
+
+									break;
+								}
+							}
 
 							return new CssGenerator(
 								generatorOptions,
@@ -301,6 +351,9 @@ class CssModulesPlugin {
 					normalModuleFactory.hooks.createModuleClass
 						.for(type)
 						.tap(PLUGIN_NAME, (createData, resolveData) => {
+							const exportType =
+								/** @type {CssParser} */
+								(createData.parser).options.exportType;
 							if (resolveData.dependencies.length > 0) {
 								// When CSS is imported from CSS there is only one dependency
 								const dependency = resolveData.dependencies[0];
@@ -345,7 +398,8 @@ class CssModulesPlugin {
 												cssLayer: dependency.layer,
 												supports: dependency.supports,
 												media: dependency.media,
-												inheritance
+												inheritance,
+												exportType: exportType || parent.exportType
 											})
 										);
 									}
@@ -356,7 +410,8 @@ class CssModulesPlugin {
 											...createData,
 											cssLayer: dependency.layer,
 											supports: dependency.supports,
-											media: dependency.media
+											media: dependency.media,
+											exportType
 										})
 									);
 								}
@@ -364,7 +419,12 @@ class CssModulesPlugin {
 
 							return new CssModule(
 								/** @type {CSSModuleCreateData} */
-								(createData)
+								(
+									/** @type {unknown} */ ({
+										...createData,
+										exportType
+									})
+								)
 							);
 						});
 
@@ -386,10 +446,9 @@ class CssModulesPlugin {
 					compilation
 				).renderModuleContent.tap(PLUGIN_NAME, (source, module) => {
 					if (module instanceof CssModule && module.hot) {
-						const exportType = /** @type {BuildMeta} */ (module.buildMeta)
-							.exportType;
+						const exportType = module.exportType;
 						// When exportType !== "link", modules behave like JavaScript modules
-						if (exportType && exportType !== "link") {
+						if (exportType && !["link", "style"].includes(exportType)) {
 							return source;
 						}
 						// For exportType === "link", we can optimize with self-acceptance
@@ -398,13 +457,13 @@ class CssModulesPlugin {
 							return source;
 						}
 						const exports = cssData.exports;
+						/** @type {Record<string, string>} */
+						const exportsObj = {};
+						for (const [key, value] of exports) {
+							exportsObj[key] = value;
+						}
 						const stringifiedExports = JSON.stringify(
-							JSON.stringify(
-								[...exports].reduce((obj, [key, value]) => {
-									obj[key] = value;
-									return obj;
-								}, /** @type {Record<string, string>} */ ({}))
-							)
+							JSON.stringify(exportsObj)
 						);
 
 						const hmrCode = Template.asString([
@@ -416,7 +475,11 @@ class CssModulesPlugin {
 							"} else {",
 							Template.indent("module.hot.accept();"),
 							"}",
-							"module.hot.dispose(function(data) { data.__webpack_css_exports__ = __webpack_css_exports__; });"
+							"module.hot.dispose(function(data) {",
+							Template.indent([
+								"data.__webpack_css_exports__ = __webpack_css_exports__;"
+							]),
+							"});"
 						]);
 
 						return new ConcatSource(source, "\n", new RawSource(hmrCode));
@@ -595,11 +658,24 @@ class CssModulesPlugin {
 				compilation.hooks.runtimeRequirementInTree
 					.for(RuntimeGlobals.cssMergeStyleSheets)
 					.tap(PLUGIN_NAME, (chunk) => {
+						const CssMergeStyleSheetsRuntimeModule =
+							getCssMergeStyleSheetsRuntimeModule();
 						compilation.addRuntimeModule(
 							chunk,
 							new CssMergeStyleSheetsRuntimeModule()
 						);
 					});
+
+				compilation.hooks.runtimeRequirementInTree
+					.for(RuntimeGlobals.cssInjectStyle)
+					.tap(PLUGIN_NAME, (chunk, set) => {
+						const CssInjectStyleRuntimeModule =
+							getCssInjectStyleRuntimeModule();
+						compilation.addRuntimeModule(
+							chunk,
+							new CssInjectStyleRuntimeModule(set)
+						);
+					});
 			}
 		);
 	}
@@ -694,18 +770,43 @@ class CssModulesPlugin {
 				break;
 			}
 			if (hasFailed) {
+				const fallbackModule = /** @type {Module} */ (hasFailed);
+
+				const fallbackIssuers = [
+					...compilation.moduleGraph
+						.getIncomingConnectionsByOriginModule(fallbackModule)
+						.keys()
+				].filter(Boolean);
+
+				const selectedIssuers = [
+					...compilation.moduleGraph
+						.getIncomingConnectionsByOriginModule(selectedModule)
+						.keys()
+				].filter(Boolean);
+
+				const allIssuers = [
+					...new Set([...fallbackIssuers, ...selectedIssuers])
+				]
+					.map((m) =>
+						/** @type {Module} */ (m).readableIdentifier(
+							compilation.requestShortener
+						)
+					)
+					.sort();
+
 				// There is a not resolve-able conflict with the selectedModule
-				// TODO print better warning
 				compilation.warnings.push(
 					new WebpackError(
-						`chunk ${chunk.name || chunk.id}\nConflicting order between ${hasFailed.readableIdentifier(
+						`chunk ${
+							chunk.name || chunk.id
+						}\nConflicting order between ${fallbackModule.readableIdentifier(
 							compilation.requestShortener
 						)} and ${selectedModule.readableIdentifier(
 							compilation.requestShortener
-						)}`
+						)}\nCSS modules are imported in:\n  - ${allIssuers.join("\n  - ")}`
 					)
 				);
-				selectedModule = /** @type {Module} */ (hasFailed);
+				selectedModule = fallbackModule;
 			}
 			// Insert the selected module into the final modules list
 			finalModules.push(selectedModule);
@@ -774,6 +875,7 @@ class CssModulesPlugin {
 		if (
 			cacheEntry &&
 			cacheEntry.undoPath === undoPath &&
+			cacheEntry.inheritance.length === inheritance.length &&
 			cacheEntry.inheritance.every(([layer, supports, media], i) => {
 				const item = inheritance[i];
 				if (Array.isArray(item)) {
@@ -788,10 +890,7 @@ class CssModulesPlugin {
 			const moduleSourceCode =
 				/** @type {string} */
 				(moduleSourceContent.source());
-			const publicPathAutoRegex = new RegExp(
-				CssUrlDependency.PUBLIC_PATH_AUTO,
-				"g"
-			);
+			publicPathAutoRegex.lastIndex = 0;
 			/** @type {Source} */
 			let moduleSource = new ReplaceSource(moduleSourceContent);
 			/** @type {null | RegExpExecArray} */
@@ -799,7 +898,7 @@ class CssModulesPlugin {
 			while ((match = publicPathAutoRegex.exec(moduleSourceCode))) {
 				/** @type {ReplaceSource} */ (moduleSource).replace(
 					match.index,
-					(match.index += match[0].length - 1),
+					match.index + match[0].length - 1,
 					undoPath
 				);
 			}