Fix code quality violations and enhance ROUTE-EXISTS-01 rule

Implement JQHTML function cache ID system and fix bundle compilation Implement underscore prefix for system tables Fix JS syntax linter to support decorators and grant exception to Task system SPA: Update planning docs and wishlists with remaining features SPA: Document Navigation API abandonment and future enhancements Implement SPA browser integration with History API (Phase 1) Convert contacts view page to SPA action Convert clients pages to SPA actions and document conversion procedure SPA: Merge GET parameters and update documentation Implement SPA route URL generation in JavaScript and PHP Implement SPA bootstrap controller architecture Add SPA routing manual page (rsx:man spa) Add SPA routing documentation to CLAUDE.md Phase 4 Complete: Client-side SPA routing implementation Update get_routes() consumers for unified route structure Complete SPA Phase 3: PHP-side route type detection and is_spa flag Restore unified routes structure and Manifest_Query class Refactor route indexing and add SPA infrastructure Phase 3 Complete: SPA route registration in manifest Implement SPA Phase 2: Extract router code and test decorators Rename Jqhtml_Component to Component and complete SPA foundation setup 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-19 17:48:15 +00:00
parent 77b4d10af8
commit 9ebcc359ae
4360 changed files with 37751 additions and 18578 deletions
--- a/node_modules/webpack/lib/css/CssGenerator.js
+++ b/node_modules/webpack/lib/css/CssGenerator.js
@@ -12,12 +12,14 @@ const InitFragment = require("../InitFragment");
 const {
 	CSS_TYPE,
 	CSS_TYPES,
-	JS_AND_CSS_EXPORT_TYPES,
 	JS_AND_CSS_TYPES,
-	JS_TYPE
+	JS_TYPE,
+	JS_TYPES
 } = require("../ModuleSourceTypesConstants");
 const RuntimeGlobals = require("../RuntimeGlobals");
 const Template = require("../Template");
+const CssImportDependency = require("../dependencies/CssImportDependency");
+const { getUndoPath } = require("../util/identifier");
 const memoize = require("../util/memoize");

 /** @typedef {import("webpack-sources").Source} Source */
@@ -38,8 +40,14 @@ const memoize = require("../util/memoize");
 /** @typedef {import("../ModuleGraph")} ModuleGraph */
 /** @typedef {import("../NormalModule")} NormalModule */
 /** @typedef {import("../util/Hash")} Hash */
+/** @typedef {import("./CssModulesPlugin").ModuleFactoryCacheEntry} ModuleFactoryCacheEntry */
+/** @typedef {import("../CssModule")} CssModule */
+/** @typedef {import("../Compilation")} Compilation */
+/** @typedef {import("../Module").RuntimeRequirements} RuntimeRequirements */
+/** @typedef {import("../../declarations/WebpackOptions").CssParserExportType} CssParserExportType */

 const getPropertyName = memoize(() => require("../util/propertyName"));
+const getCssModulesPlugin = memoize(() => require("./CssModulesPlugin"));

 class CssGenerator extends Generator {
 	/**
@@ -50,9 +58,11 @@ class CssGenerator extends Generator {
 		super();
 		this.convention = options.exportsConvention;
 		this.localIdentName = options.localIdentName;
-		this.exportsOnly = options.exportsOnly;
-		this.esModule = options.esModule;
+		this._exportsOnly = options.exportsOnly;
+		this._esModule = options.esModule;
 		this._moduleGraph = moduleGraph;
+		/** @type {WeakMap<Source, ModuleFactoryCacheEntry>} */
+		this._moduleFactoryCache = new WeakMap();
 	}

 	/**
@@ -61,7 +71,7 @@ class CssGenerator extends Generator {
 	 * @returns {string | undefined} reason why this module can't be concatenated, undefined when it can be concatenated
 	 */
 	getConcatenationBailoutReason(module, context) {
-		if (!this.esModule) {
+		if (!this._esModule) {
 			return "Module is not an ECMAScript module";
 		}

@@ -69,24 +79,117 @@ class CssGenerator extends Generator {
 	}

 	/**
-	 * @param {NormalModule} module module for which the code should be generated
-	 * @param {GenerateContext} generateContext context for generate
-	 * @returns {Source | null} generated code
+	 * Generate JavaScript code that requires and concatenates all CSS imports
+	 * @param {NormalModule} module the module to generate CSS text for
+	 * @param {GenerateContext} generateContext the generate context
+	 * @returns {{ expr: string, type: CssParserExportType }[]} JavaScript code that concatenates all imported CSS
 	 */
-	generate(module, generateContext) {
-		const source =
-			generateContext.type === "javascript"
-				? new ReplaceSource(new RawSource(""))
-				: new ReplaceSource(/** @type {Source} */ (module.originalSource()));
+	_generateImportCode(module, generateContext) {
+		const moduleGraph = generateContext.moduleGraph;
+		/** @type {{ expr: string, type: CssParserExportType }[]} */
+		const parts = [];

-		/** @type {InitFragment<GenerateContext>[]} */
-		const initFragments = [];
-		/** @type {CssData} */
-		const cssData = {
-			esModule: /** @type {boolean} */ (this.esModule),
-			exports: new Map()
-		};
+		// Iterate through module.dependencies to maintain source order
+		for (const dep of module.dependencies) {
+			if (dep instanceof CssImportDependency) {
+				/** @type {CssModule} */
+				const depModule = /** @type {CssModule} */ (moduleGraph.getModule(dep));
+				const importVar = generateContext.runtimeTemplate.moduleExports({
+					module: depModule,
+					chunkGraph: generateContext.chunkGraph,
+					request: /** @type {CssModule} */ (depModule).userRequest,
+					weak: false,
+					runtimeRequirements: generateContext.runtimeRequirements
+				});

+				generateContext.runtimeRequirements.add(
+					RuntimeGlobals.compatGetDefaultExport
+				);
+				parts.push({
+					expr: `(${RuntimeGlobals.compatGetDefaultExport}(${importVar})() || "")`,
+					type: /** @type {CssParserExportType} */ (
+						/** @type {BuildMeta} */ (depModule.buildMeta).exportType
+					)
+				});
+			}
+		}
+
+		return parts;
+	}
+
+	/**
+	 * Generate CSS code for the current module
+	 * @param {NormalModule} module the module to generate CSS code for
+	 * @param {GenerateContext} generateContext the generate context
+	 * @returns {string} the CSS code as string
+	 */
+	_generateModuleCode(module, generateContext) {
+		const moduleSourceContent = /** @type {Source} */ (
+			this.generate(module, {
+				...generateContext,
+				type: "css"
+			})
+		);
+
+		if (!moduleSourceContent) {
+			return "";
+		}
+
+		const compilation = generateContext.runtimeTemplate.compilation;
+		const { path: filename } = compilation.getPathWithInfo(
+			compilation.outputOptions.cssChunkFilename,
+			{
+				runtime: generateContext.runtime,
+				contentHashType: "css"
+			}
+		);
+		const undoPath = getUndoPath(
+			filename,
+			compilation.outputOptions.path,
+			false
+		);
+
+		const CssModulesPlugin = getCssModulesPlugin();
+		const hooks = CssModulesPlugin.getCompilationHooks(compilation);
+		const renderedSource = CssModulesPlugin.renderModule(
+			/** @type {CssModule} */ (module),
+			{
+				undoPath,
+				moduleSourceContent,
+				moduleFactoryCache: this._moduleFactoryCache,
+				runtimeTemplate: generateContext.runtimeTemplate
+			},
+			hooks
+		);
+
+		if (!renderedSource) {
+			return "";
+		}
+
+		const content = renderedSource.source();
+		return typeof content === "string" ? content : content.toString("utf8");
+	}
+
+	/**
+	 * @param {NormalModule} module the current module
+	 * @param {Dependency} dependency the dependency to generate
+	 * @param {InitFragment<GenerateContext>[]} initFragments mutable list of init fragments
+	 * @param {ReplaceSource} source the current replace source which can be modified
+	 * @param {GenerateContext & { cssData: CssData }} generateContext the render context
+	 * @returns {void}
+	 */
+	sourceDependency(module, dependency, initFragments, source, generateContext) {
+		const constructor =
+			/** @type {DependencyConstructor} */
+			(dependency.constructor);
+		const template = generateContext.dependencyTemplates.get(constructor);
+		if (!template) {
+			throw new Error(
+				`No template for dependency: ${dependency.constructor.name}`
+			);
+		}
+
+		/** @type {DependencyTemplateContext} */
 		/** @type {InitFragment<GenerateContext>[] | undefined} */
 		let chunkInitFragments;
 		/** @type {DependencyTemplateContext} */
@@ -103,7 +206,8 @@ class CssGenerator extends Generator {
 				/** @type {CodeGenerationResults} */
 				(generateContext.codeGenerationResults),
 			initFragments,
-			cssData,
+			cssData: generateContext.cssData,
+			type: generateContext.type,
 			get chunkInitFragments() {
 				if (!chunkInitFragments) {
 					const data =
@@ -120,38 +224,149 @@ class CssGenerator extends Generator {
 			}
 		};

-		/**
-		 * @param {Dependency} dependency dependency
-		 */
-		const handleDependency = (dependency) => {
-			const constructor =
-				/** @type {DependencyConstructor} */
-				(dependency.constructor);
-			const template = generateContext.dependencyTemplates.get(constructor);
-			if (!template) {
-				throw new Error(
-					`No template for dependency: ${dependency.constructor.name}`
+		template.apply(dependency, source, templateContext);
+	}
+
+	/**
+	 * @param {NormalModule} module the module to generate
+	 * @param {InitFragment<GenerateContext>[]} initFragments mutable list of init fragments
+	 * @param {ReplaceSource} source the current replace source which can be modified
+	 * @param {GenerateContext & { cssData: CssData }} generateContext the generateContext
+	 * @returns {void}
+	 */
+	sourceModule(module, initFragments, source, generateContext) {
+		for (const dependency of module.dependencies) {
+			this.sourceDependency(
+				module,
+				dependency,
+				initFragments,
+				source,
+				generateContext
+			);
+		}
+
+		if (module.presentationalDependencies !== undefined) {
+			for (const dependency of module.presentationalDependencies) {
+				this.sourceDependency(
+					module,
+					dependency,
+					initFragments,
+					source,
+					generateContext
 				);
 			}
+		}
+	}

-			template.apply(dependency, source, templateContext);
+	/**
+	 * @param {NormalModule} module module for which the code should be generated
+	 * @param {GenerateContext} generateContext context for generate
+	 * @returns {Source | null} generated code
+	 */
+	generate(module, generateContext) {
+		const exportType = /** @type {BuildMeta} */ (module.buildMeta).exportType;
+		const source =
+			generateContext.type === "javascript"
+				? exportType === "link"
+					? new ReplaceSource(new RawSource(""))
+					: new ReplaceSource(/** @type {Source} */ (module.originalSource()))
+				: new ReplaceSource(/** @type {Source} */ (module.originalSource()));
+		/** @type {InitFragment<GenerateContext>[]} */
+		const initFragments = [];
+		/** @type {CssData} */
+		const cssData = {
+			esModule: /** @type {boolean} */ (this._esModule),
+			exports: new Map()
 		};

-		for (const dependency of module.dependencies) {
-			handleDependency(dependency);
-		}
+		this.sourceModule(module, initFragments, source, {
+			...generateContext,
+			cssData
+		});
+
+		const generateCssText = () => {
+			const importCode = this._generateImportCode(module, generateContext);
+			const moduleCode = this._generateModuleCode(module, generateContext);
+
+			if (importCode.length > 0) {
+				if (
+					exportType === "css-style-sheet" ||
+					importCode.some((part) => part.type !== exportType)
+				) {
+					generateContext.runtimeRequirements.add(
+						RuntimeGlobals.cssMergeStyleSheets
+					);
+
+					return `${RuntimeGlobals.cssMergeStyleSheets}([${[...importCode.map((part) => part.expr), JSON.stringify(moduleCode)].join(", ")}])`;
+				}
+				return generateContext.runtimeTemplate.concatenation(
+					...importCode,
+					moduleCode
+				);
+			}
+			return JSON.stringify(moduleCode);
+		};
+
+		/**
+		 * @returns {string | null} the default export
+		 */
+		const generateJSDefaultExport = () => {
+			switch (exportType) {
+				case "text": {
+					return generateCssText();
+				}
+				case "css-style-sheet": {
+					const constOrVar = generateContext.runtimeTemplate.renderConst();
+					return `(${generateContext.runtimeTemplate.basicFunction("", [
+						`${constOrVar} cssText = ${generateCssText()};`,
+						`${constOrVar} sheet = new CSSStyleSheet();`,
+						"sheet.replaceSync(cssText);",
+						"return sheet;"
+					])})()`;
+				}
+				default:
+					return null;
+			}
+		};

 		switch (generateContext.type) {
 			case "javascript": {
+				const isCSSModule = /** @type {BuildMeta} */ (module.buildMeta)
+					.isCSSModule;
+				const defaultExport = generateJSDefaultExport();
+				/**
+				 * @param {string} name the export name
+				 * @param {string} value the export value
+				 * @returns {string} the value to be used in the export
+				 */
+				const stringifyExportValue = (name, value) => {
+					if (defaultExport) {
+						return name === "default" ? value : JSON.stringify(value);
+					}
+					return JSON.stringify(value);
+				};
+
 				/** @type {BuildInfo} */
 				(module.buildInfo).cssData = cssData;

-				generateContext.runtimeRequirements.add(RuntimeGlobals.module);
+				// Required for HMR
+				if (module.hot) {
+					generateContext.runtimeRequirements.add(RuntimeGlobals.module);
+				}
+
+				if (defaultExport) {
+					cssData.exports.set("default", /** @type {string} */ (defaultExport));
+				}
+
+				if (cssData.exports.size === 0 && !isCSSModule) {
+					return new RawSource("");
+				}

 				if (generateContext.concatenationScope) {
 					const source = new ConcatSource();
 					const usedIdentifiers = new Set();
 					const { RESERVED_IDENTIFIER } = getPropertyName();
+
 					for (const [name, v] of cssData.exports) {
 						const usedName = generateContext.moduleGraph
 							.getExportInfo(module, name)
@@ -171,21 +386,14 @@ class CssGenerator extends Generator {
 						usedIdentifiers.add(identifier);
 						generateContext.concatenationScope.registerExport(name, identifier);
 						source.add(
-							`${generateContext.runtimeTemplate.renderConst()} ${identifier} = ${JSON.stringify(v)};\n`
+							`${generateContext.runtimeTemplate.renderConst()} ${identifier} = ${stringifyExportValue(name, v)};\n`
 						);
 					}
 					return source;
 				}

-				if (
-					cssData.exports.size === 0 &&
-					!(/** @type {BuildMeta} */ (module.buildMeta).isCSSModule)
-				) {
-					return new RawSource("");
-				}
-
 				const needNsObj =
-					this.esModule &&
+					this._esModule &&
 					generateContext.moduleGraph
 						.getExportsInfo(module)
 						.otherExportsInfo.getUsed(generateContext.runtime) !==
@@ -197,10 +405,21 @@ class CssGenerator extends Generator {
 					);
 				}

+				// Should be after `concatenationScope` to allow module inlining
+				generateContext.runtimeRequirements.add(RuntimeGlobals.module);
+
+				if (!isCSSModule && !needNsObj) {
+					return new RawSource(
+						`${module.moduleArgument}.exports = ${defaultExport}`
+					);
+				}
+
 				const exports = [];

 				for (const [name, v] of cssData.exports) {
-					exports.push(`\t${JSON.stringify(name)}: ${JSON.stringify(v)}`);
+					exports.push(
+						`\t${JSON.stringify(name)}: ${stringifyExportValue(name, v)}`
+					);
 				}

 				return new RawSource(
@@ -210,14 +429,10 @@ class CssGenerator extends Generator {
 				);
 			}
 			case "css": {
-				if (module.presentationalDependencies !== undefined) {
-					for (const dependency of module.presentationalDependencies) {
-						handleDependency(dependency);
-					}
+				if (!this._generatesJsOnly(module)) {
+					generateContext.runtimeRequirements.add(RuntimeGlobals.hasCssModules);
 				}

-				generateContext.runtimeRequirements.add(RuntimeGlobals.hasCssModules);
-
 				return InitFragment.addToSource(source, initFragments, generateContext);
 			}
 			default:
@@ -251,9 +466,8 @@ class CssGenerator extends Generator {
 	 * @returns {SourceTypes} available types (do not mutate)
 	 */
 	getTypes(module) {
-		// TODO, find a better way to prevent the original module from being removed after concatenation, maybe it is a bug
-		if (this.exportsOnly) {
-			return JS_AND_CSS_EXPORT_TYPES;
+		if (this._generatesJsOnly(module)) {
+			return JS_TYPES;
 		}
 		const sourceTypes = new Set();
 		const connections = this._moduleGraph.getIncomingConnections(module);
@@ -318,7 +532,19 @@ class CssGenerator extends Generator {
 	 * @param {UpdateHashContext} updateHashContext context for updating hash
 	 */
 	updateHash(hash, { module }) {
-		hash.update(/** @type {boolean} */ (this.esModule).toString());
+		hash.update(/** @type {boolean} */ (this._esModule).toString());
+	}
+
+	/**
+	 * @param {NormalModule} module module
+	 * @returns {boolean} true if the module only outputs JavaScript
+	 */
+	_generatesJsOnly(module) {
+		const exportType = /** @type {BuildMeta} */ (module.buildMeta).exportType;
+		return (
+			this._exportsOnly ||
+			/** @type {boolean} */ (exportType && exportType !== "link")
+		);
 	}
 }

--- a/node_modules/webpack/lib/css/CssLoadingRuntimeModule.js
+++ b/node_modules/webpack/lib/css/CssLoadingRuntimeModule.js
@@ -462,6 +462,8 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 									`var url = ${RuntimeGlobals.publicPath} + filename;`,
 									"var oldTag = loadStylesheet(chunkId, url);",
 									"if(!oldTag) return;",
+									"// create error before stack unwound to get useful stacktrace later",
+									"var error = new Error();",
 									`promises.push(new Promise(${runtimeTemplate.basicFunction(
 										"resolve, reject",
 										[
--- a/node_modules/webpack/lib/css/CssMergeStyleSheetsRuntimeModule.js
+++ b/node_modules/webpack/lib/css/CssMergeStyleSheetsRuntimeModule.js
@@ -0,0 +1,56 @@
+/*
+	MIT License http://www.opensource.org/licenses/mit-license.php
+	Author Natsu @xiaoxiaojx
+*/
+
+"use strict";
+
+const RuntimeGlobals = require("../RuntimeGlobals");
+const RuntimeModule = require("../RuntimeModule");
+const Template = require("../Template");
+
+/** @typedef {import("../Chunk")} Chunk */
+
+class CssMergeStyleSheetsRuntimeModule extends RuntimeModule {
+	constructor() {
+		super("css merge stylesheets");
+	}
+
+	/**
+	 * @returns {string | null} runtime code
+	 */
+	generate() {
+		const { runtimeTemplate } = /** @type {import("../Compilation")} */ (
+			this.compilation
+		);
+
+		return Template.asString([
+			`${RuntimeGlobals.cssMergeStyleSheets} = ${runtimeTemplate.basicFunction(
+				"sheets",
+				[
+					"var sheetsArray = Array.isArray(sheets) ? sheets : [sheets];",
+					"var cssTexts = [];",
+					"for (var i = 0; i < sheetsArray.length; i++) {",
+					Template.indent([
+						"var s = sheetsArray[i];",
+						"if (!s) continue;",
+						"if (typeof s === 'string') {",
+						Template.indent("cssTexts.push(s);"),
+						"} else if (s.cssRules) {",
+						Template.indent([
+							"var rules = s.cssRules;",
+							"for (var j = 0; j < rules.length; j++) {",
+							Template.indent("cssTexts.push(rules[j].cssText);"),
+							"}"
+						]),
+						"}"
+					]),
+					"}",
+					"return cssTexts.join('');"
+				]
+			)};`
+		]);
+	}
+}
+
+module.exports = CssMergeStyleSheetsRuntimeModule;
--- a/node_modules/webpack/lib/css/CssModulesPlugin.js
+++ b/node_modules/webpack/lib/css/CssModulesPlugin.js
@@ -29,11 +29,13 @@ const SelfModuleFactory = require("../SelfModuleFactory");
 const Template = require("../Template");
 const WebpackError = require("../WebpackError");
 const CssIcssExportDependency = require("../dependencies/CssIcssExportDependency");
+const CssIcssFromIdentifierDependency = require("../dependencies/CssIcssFromIdentifierDependency");
+const CssIcssGlobalIdentifierDependency = require("../dependencies/CssIcssGlobalIdentifierDependency");
 const CssIcssImportDependency = require("../dependencies/CssIcssImportDependency");
+const CssIcssLocalIdentifierDependency = require("../dependencies/CssIcssLocalIdentifierDependency");
+const CssIcssSelfLocalIdentifierDependency = require("../dependencies/CssIcssSelfLocalIdentifierDependency");
 const CssIcssSymbolDependency = require("../dependencies/CssIcssSymbolDependency");
 const CssImportDependency = require("../dependencies/CssImportDependency");
-const CssLocalIdentifierDependency = require("../dependencies/CssLocalIdentifierDependency");
-const CssSelfLocalIdentifierDependency = require("../dependencies/CssSelfLocalIdentifierDependency");
 const CssUrlDependency = require("../dependencies/CssUrlDependency");
 const StaticExportsDependency = require("../dependencies/StaticExportsDependency");
 const JavascriptModulesPlugin = require("../javascript/JavascriptModulesPlugin");
@@ -45,6 +47,7 @@ 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");

 /** @typedef {import("webpack-sources").Source} Source */
@@ -62,6 +65,7 @@ const CssParser = require("./CssParser");
 /** @typedef {import("../Template").RuntimeTemplate} RuntimeTemplate */
 /** @typedef {import("../TemplatedPathPlugin").TemplatePath} TemplatePath */
 /** @typedef {import("../util/Hash")} Hash */
+/** @typedef {import("../Module").BuildMeta} BuildMeta */

 /**
 * @typedef {object} RenderContext
@@ -76,11 +80,13 @@ const CssParser = require("./CssParser");

 /**
 * @typedef {object} ChunkRenderContext
- * @property {Chunk} chunk the chunk
- * @property {ChunkGraph} chunkGraph the chunk graph
- * @property {CodeGenerationResults} codeGenerationResults results of code generation
+ * @property {Chunk=} chunk the chunk
+ * @property {ChunkGraph=} chunkGraph the chunk graph
+ * @property {CodeGenerationResults=} codeGenerationResults results of code generation
 * @property {RuntimeTemplate} runtimeTemplate the runtime template
 * @property {string} undoPath undo path to css file
+ * @property {WeakMap<Source, ModuleFactoryCacheEntry>} moduleFactoryCache moduleFactoryCache
+ * @property {Source} moduleSourceContent content
 */

 /**
@@ -89,6 +95,13 @@ const CssParser = require("./CssParser");
 * @property {SyncHook<[Chunk, Hash, ChunkHashContext]>} chunkHash
 */

+/**
+ * @typedef {object} ModuleFactoryCacheEntry
+ * @property {string} undoPath - The undo path to the CSS file
+ * @property {Inheritance} inheritance - The inheritance chain
+ * @property {CachedSource} source - The cached source
+ */
+
 const getCssLoadingRuntimeModule = memoize(() =>
 	require("./CssLoadingRuntimeModule")
 );
@@ -192,7 +205,7 @@ class CssModulesPlugin {
 	}

 	constructor() {
-		/** @type {WeakMap<Source, { undoPath: string, inheritance: Inheritance, source: CachedSource }>} */
+		/** @type {WeakMap<Source, ModuleFactoryCacheEntry>} */
 		this._moduleFactoryCache = new WeakMap();
 	}

@@ -224,16 +237,16 @@ class CssModulesPlugin {
 					new CssUrlDependency.Template()
 				);
 				compilation.dependencyTemplates.set(
-					CssLocalIdentifierDependency,
-					new CssLocalIdentifierDependency.Template()
+					CssIcssLocalIdentifierDependency,
+					new CssIcssLocalIdentifierDependency.Template()
 				);
 				compilation.dependencyFactories.set(
-					CssSelfLocalIdentifierDependency,
+					CssIcssSelfLocalIdentifierDependency,
 					selfFactory
 				);
 				compilation.dependencyTemplates.set(
-					CssSelfLocalIdentifierDependency,
-					new CssSelfLocalIdentifierDependency.Template()
+					CssIcssSelfLocalIdentifierDependency,
+					new CssIcssSelfLocalIdentifierDependency.Template()
 				);
 				compilation.dependencyFactories.set(
 					CssIcssImportDependency,
@@ -243,6 +256,22 @@ class CssModulesPlugin {
 					CssIcssImportDependency,
 					new CssIcssImportDependency.Template()
 				);
+				compilation.dependencyFactories.set(
+					CssIcssFromIdentifierDependency,
+					normalModuleFactory
+				);
+				compilation.dependencyTemplates.set(
+					CssIcssFromIdentifierDependency,
+					new CssIcssFromIdentifierDependency.Template()
+				);
+				compilation.dependencyFactories.set(
+					CssIcssGlobalIdentifierDependency,
+					normalModuleFactory
+				);
+				compilation.dependencyTemplates.set(
+					CssIcssGlobalIdentifierDependency,
+					new CssIcssGlobalIdentifierDependency.Template()
+				);
 				compilation.dependencyTemplates.set(
 					CssIcssExportDependency,
 					new CssIcssExportDependency.Template()
@@ -265,35 +294,44 @@ class CssModulesPlugin {
 						.for(type)
 						.tap(PLUGIN_NAME, (parserOptions) => {
 							validateParserOptions[type](parserOptions);
-							const { url, import: importOption, namedExports } = parserOptions;
+							const {
+								url,
+								import: importOption,
+								namedExports,
+								exportType
+							} = parserOptions;

 							switch (type) {
 								case CSS_MODULE_TYPE:
 									return new CssParser({
 										importOption,
 										url,
-										namedExports
+										namedExports,
+										exportType
 									});
 								case CSS_MODULE_TYPE_GLOBAL:
 									return new CssParser({
 										defaultMode: "global",
 										importOption,
 										url,
-										namedExports
+										namedExports,
+										exportType
 									});
 								case CSS_MODULE_TYPE_MODULE:
 									return new CssParser({
 										defaultMode: "local",
 										importOption,
 										url,
-										namedExports
+										namedExports,
+										exportType
 									});
 								case CSS_MODULE_TYPE_AUTO:
 									return new CssParser({
 										defaultMode: "auto",
 										importOption,
 										url,
-										namedExports
+										namedExports,
+										exportType
 									});
 							}
 						});
@@ -545,8 +583,6 @@ class CssModulesPlugin {
 					onceForChunkSet.add(chunk);
 					if (!isEnabledForChunk(chunk)) return;

-					set.add(RuntimeGlobals.makeNamespaceObject);
-
 					const CssLoadingRuntimeModule = getCssLoadingRuntimeModule();
 					compilation.addRuntimeModule(chunk, new CssLoadingRuntimeModule(set));
 				};
@@ -593,6 +629,15 @@ class CssModulesPlugin {
 						set.add(RuntimeGlobals.publicPath);
 						set.add(RuntimeGlobals.getChunkCssFilename);
 					});
+
+				compilation.hooks.runtimeRequirementInTree
+					.for(RuntimeGlobals.cssMergeStyleSheets)
+					.tap(PLUGIN_NAME, (chunk) => {
+						compilation.addRuntimeModule(
+							chunk,
+							new CssMergeStyleSheetsRuntimeModule()
+						);
+					});
 			}
 		);
 	}
@@ -758,18 +803,11 @@ class CssModulesPlugin {
 	 * @param {CssModule} module css module
 	 * @param {ChunkRenderContext} renderContext options object
 	 * @param {CompilationHooks} hooks hooks
-	 * @returns {Source} css module source
+	 * @returns {Source | null} css module source
 	 */
-	renderModule(module, renderContext, hooks) {
-		const { codeGenerationResults, chunk, undoPath } = renderContext;
-		const codeGenResult = codeGenerationResults.get(module, chunk.runtime);
-		const moduleSourceContent =
-			/** @type {Source} */
-			(
-				codeGenResult.sources.get("css") ||
-					codeGenResult.sources.get("css-import")
-			);
-		const cacheEntry = this._moduleFactoryCache.get(moduleSourceContent);
+	static renderModule(module, renderContext, hooks) {
+		const { undoPath, moduleFactoryCache, moduleSourceContent } = renderContext;
+		const cacheEntry = moduleFactoryCache.get(moduleSourceContent);

 		/** @type {Inheritance} */
 		const inheritance = [[module.cssLayer, module.supports, module.media]];
@@ -791,6 +829,7 @@ class CssModulesPlugin {
 		) {
 			source = cacheEntry.source;
 		} else {
+			if (!moduleSourceContent) return null;
 			const moduleSourceCode =
 				/** @type {string} */
 				(moduleSourceContent.source());
@@ -845,7 +884,7 @@ class CssModulesPlugin {
 			}

 			source = new CachedSource(moduleSource);
-			this._moduleFactoryCache.set(moduleSourceContent, {
+			moduleFactoryCache.set(moduleSourceContent, {
 				inheritance,
 				undoPath,
 				source
@@ -867,28 +906,39 @@ class CssModulesPlugin {
 		{
 			undoPath,
 			chunk,
-			chunkGraph,
 			codeGenerationResults,
 			modules,
-			runtimeTemplate
+			runtimeTemplate,
+			chunkGraph
 		},
 		hooks
 	) {
 		const source = new ConcatSource();
 		for (const module of modules) {
 			try {
-				const moduleSource = this.renderModule(
+				const codeGenResult = codeGenerationResults.get(module, chunk.runtime);
+				const moduleSourceContent =
+					/** @type {Source} */
+					(
+						codeGenResult.sources.get("css") ||
+							codeGenResult.sources.get("css-import")
+					);
+				const moduleSource = CssModulesPlugin.renderModule(
 					module,
 					{
 						undoPath,
 						chunk,
 						chunkGraph,
 						codeGenerationResults,
+						moduleSourceContent,
+						moduleFactoryCache: this._moduleFactoryCache,
 						runtimeTemplate
 					},
 					hooks
 				);
-				source.add(moduleSource);
+				if (moduleSource) {
+					source.add(moduleSource);
+				}
 			} catch (err) {
 				/** @type {Error} */
 				(err).message += `\nduring rendering of css ${module.identifier()}`;
--- a/node_modules/webpack/lib/css/CssParser.js
+++ b/node_modules/webpack/lib/css/CssParser.js
--- a/node_modules/webpack/lib/css/walkCssTokens.js
+++ b/node_modules/webpack/lib/css/walkCssTokens.js
@@ -1197,6 +1197,102 @@ module.exports = (input, pos = 0, callbacks = {}) => {
 	return pos;
 };

+/**
+ * @param {string} input input css
+ * @param {number} pos pos
+ * @param {CssTokenCallbacks} callbacks callbacks
+ * @param {CssTokenCallbacks} additional additional callbacks
+ * @param {{ onlyTopLevel?: boolean, declarationValue?: boolean, atRulePrelude?: boolean, functionValue?: boolean }=} options options
+ * @returns {number} pos
+ */
+const consumeUntil = (input, pos, callbacks, additional, options = {}) => {
+	let needHandle = true;
+	let needTerminate = false;
+
+	/** @type {CssTokenCallbacks} */
+	const servicedCallbacks = {};
+
+	let balanced = 0;
+
+	if (options.onlyTopLevel) {
+		servicedCallbacks.function = (input, start, end) => {
+			balanced++;
+			if (!options.functionValue) {
+				needHandle = false;
+			}
+
+			if (additional.function !== undefined) {
+				return additional.function(input, start, end);
+			}
+
+			return end;
+		};
+
+		servicedCallbacks.leftParenthesis = (_input, _start, end) => {
+			balanced++;
+			needHandle = false;
+			return end;
+		};
+		servicedCallbacks.rightParenthesis = (_input, _start, end) => {
+			balanced--;
+			if (balanced === 0) {
+				needHandle = true;
+			}
+			return end;
+		};
+	}
+
+	if (options.declarationValue) {
+		servicedCallbacks.semicolon = (_input, _start, end) => {
+			needTerminate = true;
+			return end;
+		};
+
+		servicedCallbacks.rightCurlyBracket = (_input, _start, end) => {
+			needTerminate = true;
+			return end;
+		};
+	} else if (options.functionValue) {
+		servicedCallbacks.rightParenthesis = (_input, _start, end) => {
+			balanced--;
+			if (balanced === 0) {
+				needTerminate = true;
+			}
+			return end;
+		};
+	} else if (options.atRulePrelude) {
+		servicedCallbacks.leftCurlyBracket = (_input, _start, end) => {
+			needTerminate = true;
+			return end;
+		};
+	}
+
+	while (pos < input.length) {
+		// Consume comments.
+		pos = consumeComments(
+			input,
+			pos,
+			needHandle ? { ...servicedCallbacks, ...callbacks } : servicedCallbacks
+		);
+
+		const start = pos;
+
+		// Consume the next input code point.
+		pos++;
+		pos = consumeAToken(
+			input,
+			pos,
+			needHandle ? { ...servicedCallbacks, ...callbacks } : servicedCallbacks
+		);
+
+		if (needTerminate) {
+			return start;
+		}
+	}
+
+	return pos;
+};
+
 /**
 * @param {string} input input
 * @param {number} pos position
@@ -1608,6 +1704,7 @@ const eatUntil = (chars) => {
 	};
 };

+module.exports.consumeUntil = consumeUntil;
 module.exports.eatComments = eatComments;
 module.exports.eatIdentSequence = eatIdentSequence;
 module.exports.eatIdentSequenceOrString = eatIdentSequenceOrString;