webpack 5.108.4 → 5.109.0

package/lib/config/defaults.js

@@ -31,6 +31,7 @@ const {
 	WEBASSEMBLY_MODULE_TYPE_SYNC
 } = require("../ModuleTypeConstants");
 const Template = require("../Template");
+const RuleSetCompiler = require("../rules/RuleSetCompiler");
 const { cleverMerge } = require("../util/cleverMerge");
 const {
 	getDefaultTarget,
@@ -71,6 +72,7 @@ const {
 /** @typedef {import("../../declarations/WebpackOptions").ParserOptionsByModuleTypeKnown} ParserOptionsByModuleTypeKnown */
 /** @typedef {import("../../declarations/WebpackOptions").Performance} Performance */
 /** @typedef {import("../../declarations/WebpackOptions").ResolveOptions} ResolveOptions */
+/** @typedef {import("../../declarations/WebpackOptions").RuleSetRule} RuleSetRule */
 /** @typedef {import("../../declarations/WebpackOptions").RuleSetRules} RuleSetRules */
 /** @typedef {import("../../declarations/WebpackOptions").SnapshotOptions} SnapshotOptions */
 /** @typedef {import("../../declarations/WebpackOptions").WebpackOptionsNormalized} WebpackOptionsNormalized */
@@ -341,6 +343,26 @@ const applyWebpackOptionsDefaults = (options, compilerIndex) => {
 		}
 	}
 
+	D(options, "watch", false);
+	D(options, "profile", false);
+	D(options, "parallelism", 100);
+	D(options, "recordsInputPath", false);
+	D(options, "recordsOutputPath", false);
+
+	// Capture the raw html intent before "auto" is resolved: only an explicit
+	// `html: true` (or futureDefaults) keeps `.html` ahead of `.js` when resolving.
+	const htmlExplicitlyEnabled = options.experiments.html === true;
+	const htmlWasUnset = options.experiments.html === undefined;
+
+	applyExperimentsDefaults(options.experiments, {
+		production,
+		development,
+		targetProperties,
+		rules: options.module.rules
+	});
+
+	// After experiments are resolved: the default dev source map depends on the
+	// (possibly "auto"-resolved) `experiments.css` value.
 	F(
 		options,
 		"devtool",
@@ -363,24 +385,20 @@ const applyWebpackOptionsDefaults = (options, compilerIndex) => {
 			)
 	);
 
-	D(options, "watch", false);
-	D(options, "profile", false);
-	D(options, "parallelism", 100);
-	D(options, "recordsInputPath", false);
-	D(options, "recordsOutputPath", false);
-
-	applyExperimentsDefaults(options.experiments, {
-		production,
-		development,
-		targetProperties
-	});
-
 	const futureDefaults =
 		/** @type {NonNullable<ExperimentsNormalized["futureDefaults"]>} */
 		(options.experiments.futureDefaults);
 
+	// `.html` outranks `.js` only for an explicit opt-in (`html: true`, or the
+	// futureDefaults-forced default), never for the auto-enabled default.
+	const htmlFirst = htmlExplicitlyEnabled || (htmlWasUnset && futureDefaults);
+
 	F(options, "validate", () => !(futureDefaults === true && production));
 
+	// Progress lives on infrastructureLogging; webpack@6 shows the interactive
+	// bar by default (`"auto"` = TTY only), webpack@5 stays opt-in.
+	D(options.infrastructureLogging, "progress", futureDefaults ? "auto" : false);
+
 	F(options, "cache", () =>
 		development ? { type: /** @type {"memory"} */ ("memory") } : false
 	);
@@ -414,7 +432,7 @@ const applyWebpackOptionsDefaults = (options, compilerIndex) => {
 		entry: options.entry,
 		futureDefaults,
 		asyncWebAssembly:
-			/** @type {NonNullable<ExperimentsNormalized["asyncWebAssembly"]>} */
+			/** @type {boolean} */
 			(options.experiments.asyncWebAssembly)
 	});
 
@@ -430,16 +448,16 @@ const applyWebpackOptionsDefaults = (options, compilerIndex) => {
 			/** @type {NonNullable<ExperimentsNormalized["syncWebAssembly"]>} */
 			(options.experiments.syncWebAssembly),
 		asyncWebAssembly:
-			/** @type {NonNullable<ExperimentsNormalized["asyncWebAssembly"]>} */
+			/** @type {boolean} */
 			(options.experiments.asyncWebAssembly),
 		css:
-			/** @type {NonNullable<ExperimentsNormalized["css"]>} */
+			/** @type {boolean} */
 			(options.experiments.css),
 		html:
-			/** @type {NonNullable<ExperimentsNormalized["html"]>} */
+			/** @type {boolean} */
 			(options.experiments.html),
 		typescript:
-			/** @type {NonNullable<ExperimentsNormalized["typescript"]>} */
+			/** @type {boolean} */
 			(options.experiments.typescript),
 		deferImport:
 			/** @type {NonNullable<ExperimentsNormalized["deferImport"]>} */
@@ -458,6 +476,29 @@ const applyWebpackOptionsDefaults = (options, compilerIndex) => {
 		library: options.output.library
 	});
 
+	// `output.resourceHints.urlHints` shorthand: fan the project-wide rules out
+	// as the base `urlHints` of every URL-emitting parser (JS `new URL`, CSS
+	// `url()`, HTML `<img src>`). They go first so parser-scoped
+	// `parser.<type>.urlHints` rules — matched later, last-match-wins — override.
+	const outputUrlHints =
+		options.output.resourceHints && options.output.resourceHints.urlHints;
+	if (outputUrlHints && outputUrlHints.length > 0) {
+		for (const type of [
+			"javascript",
+			CSS_MODULE_TYPE,
+			CSS_MODULE_TYPE_AUTO,
+			CSS_MODULE_TYPE_MODULE,
+			CSS_MODULE_TYPE_GLOBAL,
+			HTML_MODULE_TYPE
+		]) {
+			const parser =
+				/** @type {{ urlHints?: import("../../declarations/WebpackOptions").UrlHintRule[] } | undefined} */
+				(options.module.parser[type]);
+			if (!parser) continue;
+			parser.urlHints = [...outputUrlHints, ...(parser.urlHints || [])];
+		}
+	}
+
 	applyExternalsPresetsDefaults(options.externalsPresets, {
 		targetProperties,
 		buildHttp: Boolean(options.experiments.buildHttp),
@@ -514,7 +555,7 @@ const applyWebpackOptionsDefaults = (options, compilerIndex) => {
 		development,
 		production,
 		css:
-			/** @type {NonNullable<ExperimentsNormalized["css"]>} */
+			/** @type {boolean} */
 			(options.experiments.css),
 		records: Boolean(options.recordsInputPath || options.recordsOutputPath)
 	});
@@ -526,13 +567,14 @@ const applyWebpackOptionsDefaults = (options, compilerIndex) => {
 			targetProperties,
 			mode: /** @type {Mode} */ (options.mode),
 			css:
-				/** @type {NonNullable<ExperimentsNormalized["css"]>} */
+				/** @type {boolean} */
 				(options.experiments.css),
 			html:
-				/** @type {NonNullable<ExperimentsNormalized["html"]>} */
+				/** @type {boolean} */
 				(options.experiments.html),
+			htmlFirst,
 			typescript:
-				/** @type {NonNullable<ExperimentsNormalized["typescript"]>} */
+				/** @type {boolean} */
 				(options.experiments.typescript)
 		}),
 		options.resolve
@@ -570,17 +612,22 @@ const applyWebpackOptionsDefaults = (options, compilerIndex) => {
  * @param {boolean} options.production is production
  * @param {boolean} options.development is development mode
  * @param {TargetProperties | false} options.targetProperties target properties
+ * @param {RuleSetRules} options.rules user `module.rules`, used to resolve the css/html/asyncWebAssembly/typescript "auto" defaults
  * @returns {void}
  */
 const applyExperimentsDefaults = (
 	experiments,
-	{ production, development, targetProperties }
+	{ production, development, targetProperties, rules }
 ) => {
 	D(experiments, "futureDefaults", false);
 	D(experiments, "backCompat", !experiments.futureDefaults);
 	// TODO do we need sync web assembly in webpack@6?
 	D(experiments, "syncWebAssembly", false);
-	D(experiments, "asyncWebAssembly", experiments.futureDefaults);
+	D(
+		experiments,
+		"asyncWebAssembly",
+		experiments.futureDefaults ? true : "auto"
+	);
 	// the universal target (web + node, neither specific) only works as ESM
 	const universal =
 		Boolean(targetProperties) &&
@@ -599,12 +646,52 @@ const applyExperimentsDefaults = (
 	D(experiments, "cacheUnaffected", experiments.futureDefaults);
 	D(experiments, "deferImport", false);
 	D(experiments, "sourceImport", false);
-	F(experiments, "css", () => (experiments.futureDefaults ? true : undefined));
-	F(experiments, "html", () => (experiments.futureDefaults ? true : undefined));
+	F(experiments, "css", () => (experiments.futureDefaults ? true : "auto"));
+	F(experiments, "html", () => (experiments.futureDefaults ? true : "auto"));
 	F(experiments, "typescript", () =>
-		experiments.futureDefaults ? true : undefined
+		experiments.futureDefaults ? true : "auto"
 	);
 
+	// Resolve the "auto" default: enable the built-in css/html module type unless
+	// the user already registered a loader (or explicit type) for these files, so
+	// enabling them by default does not break existing css-loader/html-loader setups.
+	// The built-in `/\.css$/i` rule also covers `.module.css`, so a loader scoped to
+	// CSS modules must disable the built-in type too — sample both extensions.
+	// When enabled implicitly the value stays `"auto"` (truthy): Css/HtmlModulesPlugin
+	// then step aside per-module for requests that loaders were applied to
+	// (inline requests or loaders injected via hooks, e.g. html-webpack-plugin).
+	// TODO webpack 6: css/html default to `true`, drop the `"auto"` marker.
+	if (experiments.css === "auto") {
+		experiments.css =
+			!(
+				RuleSetCompiler.hasRuleForResource(rules, "/file.css") ||
+				RuleSetCompiler.hasRuleForResource(rules, "/file.module.css")
+			) && "auto";
+	}
+	if (experiments.html === "auto") {
+		experiments.html =
+			!RuleSetCompiler.hasRuleForResource(rules, "/file.html") && "auto";
+	}
+	// Auto-enable only when the built-in TypeScript support can actually run:
+	// it needs `module.stripTypeScriptTypes` (Node.js >= 22.6) and must step
+	// aside for a loader registered for `.ts`/`.mts`/`.cts` (e.g. ts-loader).
+	if (experiments.typescript === "auto") {
+		experiments.typescript =
+			// eslint-disable-next-line n/no-unsupported-features/node-builtins
+			typeof require("module").stripTypeScriptTypes === "function" &&
+			!(
+				RuleSetCompiler.hasRuleForResource(rules, "/file.ts") ||
+				RuleSetCompiler.hasRuleForResource(rules, "/file.mts") ||
+				RuleSetCompiler.hasRuleForResource(rules, "/file.cts")
+			);
+	}
+	// `syncWebAssembly` already claims `.wasm`, so don't let "auto" override it.
+	if (experiments.asyncWebAssembly === "auto") {
+		experiments.asyncWebAssembly =
+			!experiments.syncWebAssembly &&
+			!RuleSetCompiler.hasRuleForResource(rules, "/file.wasm");
+	}
+
 	if (typeof experiments.buildHttp === "object") {
 		D(experiments.buildHttp, "frozen", production);
 		D(experiments.buildHttp, "upgrade", false);
@@ -820,6 +907,7 @@ const applyJavascriptParserOptionsDefaults = (
 	D(parserOptions, "sourceImport", sourceImport);
 	D(parserOptions, "typescript", typescript);
 	if (futureDefaults) D(parserOptions, "exportsPresence", "error");
+	D(parserOptions, "strictModeViolations", futureDefaults ? "error" : "warn");
 	D(parserOptions, "anonymousDefaultExportName", !library);
 };
 
@@ -989,6 +1077,18 @@ const applyModuleDefaults = (
 			"namedExports",
 			true
 		);
+		D(
+			/** @type {NonNullable<ParserOptionsByModuleTypeKnown[CSS_MODULE_TYPE]>} */
+			(module.parser[CSS_MODULE_TYPE]),
+			"customMedia",
+			true
+		);
+		D(
+			/** @type {NonNullable<ParserOptionsByModuleTypeKnown[CSS_MODULE_TYPE]>} */
+			(module.parser[CSS_MODULE_TYPE]),
+			"customSelectors",
+			true
+		);
 
 		for (const type of [
 			CSS_MODULE_TYPE_AUTO,
@@ -1033,6 +1133,18 @@ const applyModuleDefaults = (
 				"grid",
 				true
 			);
+			D(
+				/** @type {NonNullable<ParserOptionsByModuleTypeKnown[CSS_MODULE_TYPE_AUTO]> | NonNullable<ParserOptionsByModuleTypeKnown[CSS_MODULE_TYPE_MODULE]> | NonNullable<ParserOptionsByModuleTypeKnown[CSS_MODULE_TYPE_GLOBAL]>} */
+				(module.parser[type]),
+				"customMedia",
+				true
+			);
+			D(
+				/** @type {NonNullable<ParserOptionsByModuleTypeKnown[CSS_MODULE_TYPE_AUTO]> | NonNullable<ParserOptionsByModuleTypeKnown[CSS_MODULE_TYPE_MODULE]> | NonNullable<ParserOptionsByModuleTypeKnown[CSS_MODULE_TYPE_GLOBAL]>} */
+				(module.parser[type]),
+				"customSelectors",
+				true
+			);
 		}
 
 		F(module.generator, CSS_MODULE_TYPE, () => ({}));
@@ -1407,6 +1519,46 @@ const applyModuleDefaults = (
 				type: ASSET_MODULE_TYPE_BYTES
 			}
 		);
+		if (html) {
+			// A `.webmanifest` referenced by `<link rel="manifest">` is a `url`
+			// dependency; route it to the `asset/webmanifest` type so its icon URLs
+			// are parsed. Must come after the generic `url` → asset rule so it wins.
+			rules.push({
+				dependency: "url",
+				test: /\.webmanifest$/i,
+				type: "asset/webmanifest"
+			});
+			// A generated manifest (`output.html.manifest` object) is injected as a
+			// `data:application/manifest+json` URL with no `.webmanifest` extension;
+			// route it by mimetype so its icons are parsed and hashed too.
+			rules.push({
+				dependency: "url",
+				mimetype: "application/manifest+json",
+				type: "asset/webmanifest"
+			});
+		}
+		if (futureDefaults) {
+			rules.push({
+				oneOf: [
+					{
+						resourceQuery: /(\?|&)raw(&|$)/,
+						type: ASSET_MODULE_TYPE_SOURCE
+					},
+					{
+						resourceQuery: /(\?|&)url(&|$)/,
+						type: ASSET_MODULE_TYPE_RESOURCE
+					},
+					{
+						resourceQuery: /(\?|&)no-inline(&|$)/,
+						type: ASSET_MODULE_TYPE_RESOURCE
+					},
+					{
+						resourceQuery: /(\?|&)inline(&|$)/,
+						type: ASSET_MODULE_TYPE_INLINE
+					}
+				]
+			});
+		}
 		return rules;
 	});
 };
@@ -1565,6 +1717,11 @@ const applyOutputDefaults = (
 		() =>
 			tp && optimistic(/** @type {boolean | undefined} */ (tp.asyncFunction))
 	);
+	F(
+		environment,
+		"generator",
+		() => tp && optimistic(/** @type {boolean | undefined} */ (tp.generator))
+	);
 	F(
 		environment,
 		"forOf",
@@ -1639,6 +1796,30 @@ const applyOutputDefaults = (
 		"document",
 		() => tp && optimistic(/** @type {boolean | undefined} */ (tp.document))
 	);
+	F(
+		environment,
+		"modulePreload",
+		() =>
+			tp && optimistic(/** @type {boolean | undefined} */ (tp.modulePreload))
+	);
+
+	// Vite-style default for ESM output (`output.module`): preload the entry's
+	// initial dependency graph, which native `import()` would otherwise fetch in
+	// a waterfall. Classic output loads initial chunks via parallel `<script>`
+	// tags (no waterfall), so it stays opt-in.
+	if (output.module && output.resourceHints === undefined) {
+		output.resourceHints = {};
+	}
+	if (output.resourceHints) {
+		if (output.module) D(output.resourceHints, "initial", true);
+		// `modulePreloadPolyfill` defaults from the target's modulepreload
+		// support: inject the polyfill iff the environment lacks it.
+		D(
+			output.resourceHints,
+			"modulePreloadPolyfill",
+			!environment.modulePreload
+		);
+	}
 
 	D(output, "filename", output.module ? "[name].mjs" : "[name].js");
 	F(output, "iife", () => !output.module);
@@ -1718,6 +1899,8 @@ const applyOutputDefaults = (
 	D(output, "html", false);
 	D(output, "assetModuleFilename", "[hash][ext][query][fragment]");
 	D(output, "webassemblyModuleFilename", "[hash].module.wasm");
+	// On by default like other wasm toolchains; set false to drop the fallback runtime code.
+	D(output, "wasmStreamingFallback", true);
 	D(output, "compareBeforeEmit", true);
 	D(output, "charset", !futureDefaults);
 	const uniqueNameId = Template.toIdentifier(
@@ -1863,7 +2046,9 @@ const applyOutputDefaults = (
 	D(
 		output,
 		"hotUpdateMainFilename",
-		`[runtime].[fullhash].hot-update.${output.module ? "json.mjs" : "json"}`
+		// Only `chunkLoading: "import"` loads the manifest via `import()` (needs an
+		// `export default` ES module); every other loader fetches it as raw JSON.
+		`[runtime].[fullhash].hot-update.${output.chunkLoading === "import" ? "json.mjs" : "json"}`
 	);
 	D(output, "crossOriginLoading", false);
 	F(output, "scriptType", () => (output.module ? "module" : false));
@@ -2255,6 +2440,7 @@ const applyOptimizationDefaults = (
  * @param {Mode} options.mode mode
  * @param {boolean} options.css is css enabled
  * @param {boolean} options.html is html enabled
+ * @param {boolean} options.htmlFirst whether `.html` should outrank `.js` when resolving (only when html was explicitly enabled)
  * @param {boolean} options.typescript is typescript enabled
  * @returns {ResolveOptions} resolve options
  */
@@ -2265,6 +2451,7 @@ const getResolveDefaults = ({
 	mode,
 	css,
 	html,
+	htmlFirst,
 	typescript
 }) => {
 	/** @type {string[]} */
@@ -2286,10 +2473,13 @@ const getResolveDefaults = ({
 		? [".ts", ".js", ".json", ".wasm"]
 		: [".js", ".json", ".wasm"];
 
-	// HTML-first when enabled: `.html` outranks `.js`, `.css` is the last fallback.
+	// Explicitly enabling html keeps `.html` ahead of `.js` (html-as-entry feature).
+	// Auto-enabled html/css are lower-priority fallbacks after `.js`, so enabling
+	// them by default never makes `x.html`/`x.css` shadow `x.js`.
 	const esmResolveExtensions = [
-		...(html ? [".html"] : []),
+		...(html && htmlFirst ? [".html"] : []),
 		...jsExtensions,
+		...(html && !htmlFirst ? [".html"] : []),
 		...(css ? [".css"] : [])
 	];
 

package/lib/config/normalization.js

@@ -133,6 +133,30 @@ const keyedNestedConfig = (value, fn, customKeys) => {
 	return result;
 };
 
+/**
+ * Normalize `output.resourceHints` into its object form: the scalar / array /
+ * function shorthand becomes `{ initial: <value> }` (with `"preload"` aliased to
+ * `true`); an object is passed through, its `initial` getting the same alias.
+ * @param {import("../../declarations/WebpackOptions").ResourceHints=} resourceHints raw value
+ * @returns {import("../../declarations/WebpackOptions").ResourceHintsOptions | undefined} normalized object form
+ */
+const normalizeResourceHints = (resourceHints) => {
+	if (resourceHints === undefined) return undefined;
+	/**
+	 * @param {import("../../declarations/WebpackOptions").ResourceHintsInitial=} value initial value
+	 * @returns {import("../../declarations/WebpackOptions").ResourceHintsInitial | undefined} `"preload"` aliased to `true`
+	 */
+	const alias = (value) => (value === "preload" ? true : value);
+	if (
+		typeof resourceHints === "object" &&
+		!Array.isArray(resourceHints) &&
+		typeof resourceHints !== "function"
+	) {
+		return { ...resourceHints, initial: alias(resourceHints.initial) };
+	}
+	return { initial: alias(resourceHints) };
+};
+
 /**
  * Gets normalized webpack options.
  * @param {WebpackOptions} config input config
@@ -404,6 +428,7 @@ const getNormalizedWebpackOptions = (config) => ({
 			path: output.path,
 			pathinfo: output.pathinfo,
 			publicPath: output.publicPath,
+			resourceHints: normalizeResourceHints(output.resourceHints),
 			sourceMapFilename: output.sourceMapFilename,
 			sourcePrefix: output.sourcePrefix,
 			strictModuleErrorHandling: output.strictModuleErrorHandling,
@@ -421,6 +446,7 @@ const getNormalizedWebpackOptions = (config) => ({
 			),
 			uniqueName: output.uniqueName,
 			wasmLoading: output.wasmLoading,
+			wasmStreamingFallback: output.wasmStreamingFallback,
 			webassemblyModuleFilename: output.webassemblyModuleFilename,
 			workerPublicPath: output.workerPublicPath,
 			workerChunkFilename: output.workerChunkFilename,

package/lib/config/target.js

@@ -52,6 +52,7 @@ const getDefaultTarget = (context) => {
  * @property {boolean | null} nodeBuiltinModuleGetter node.js exposes `process.getBuiltinModule()` to synchronously load core modules
  * @property {boolean | null} importMetaDirnameAndFilename node.js allows to use `import.meta.dirname` and `import.meta.filename`
  * @property {boolean | null} document has document available (allows script tags)
+ * @property {(boolean | null)=} modulePreload supports `<link rel="modulepreload">` (optional; absent means "assume supported")
  * @property {boolean | null} importScripts has importScripts available
  * @property {boolean | null} importScriptsInWorker has importScripts available when creating a worker
  * @property {boolean | null} fetchWasm has fetch function available for WebAssembly
@@ -79,6 +80,7 @@ const getDefaultTarget = (context) => {
  * @property {boolean | null} spread spread and rest in array/object literals and calls is available
  * @property {boolean | null} templateLiteral template literal is available
  * @property {boolean | null} asyncFunction async functions and await are available
+ * @property {boolean | null} generator generator functions and yield are available
  */
 
 /**
@@ -259,6 +261,7 @@ You can also more options via the 'target' option: 'browserslist' / 'browserslis
 				methodShorthand: v(4),
 				arrowFunction: v(6),
 				asyncFunction: v(7, 6),
+				generator: v(4),
 				forOf: v(5),
 				destructuring: v(6),
 				bigIntLiteral: v(10, 4),
@@ -315,7 +318,8 @@ You can also more options via the 'target' option: 'browserslist' / 'browserslis
 				optionalChaining: true,
 				spread: true,
 				templateLiteral: true,
-				asyncFunction: true
+				asyncFunction: true,
+				generator: true
 			};
 		}
 	],
@@ -362,6 +366,7 @@ You can also more options via the 'target' option: 'browserslist' / 'browserslis
 			methodShorthand: true,
 			arrowFunction: true,
 			asyncFunction: true,
+			generator: true,
 			forOf: true,
 			destructuring: true,
 			bigIntLiteral: true,
@@ -418,6 +423,7 @@ You can also more options via the 'target' option: 'browserslist' / 'browserslis
 				methodShorthand: v(1, 1),
 				arrowFunction: v(1, 1),
 				asyncFunction: v(1, 7),
+				generator: v(1, 1),
 				forOf: v(0, 36),
 				destructuring: v(1, 1),
 				bigIntLiteral: v(4),
@@ -466,6 +472,7 @@ You can also more options via the 'target' option: 'browserslist' / 'browserslis
 				methodShorthand: v(0, 15),
 				arrowFunction: v(0, 15),
 				asyncFunction: v(0, 21),
+				generator: v(0, 15),
 				forOf: v(0, 13),
 				destructuring: v(0, 15),
 				bigIntLiteral: v(0, 32),
@@ -495,6 +502,7 @@ You can also more options via the 'target' option: 'browserslist' / 'browserslis
 				destructuring: v >= 2015,
 				module: v >= 2015,
 				asyncFunction: v >= 2017,
+				generator: v >= 2015,
 				globalThis: v >= 2020,
 				symbol: v >= 2015,
 				hasOwn: v >= 2022,

package/lib/css/CssGenerator.js

@@ -402,20 +402,28 @@ class CssGenerator extends Generator {
 						return new RawSource("");
 					}
 
+					const exportsInfo =
+						generateContext.moduleGraph.getExportsInfo(module);
+
+					/**
+					 * @param {string} name export name
+					 * @returns {string | false} used export name when the export is referenced
+					 */
+					const getUsedExportName = (name) =>
+						/** @type {string | false} */ (
+							exportsInfo
+								.getExportInfo(name)
+								.getUsedName(name, generateContext.runtime)
+						);
+
 					if (generateContext.concatenationScope) {
 						const source = new ConcatSource();
 						/** @type {Set<string>} */
 						const usedIdentifiers = new Set();
 						const { RESERVED_IDENTIFIER } = getPropertyName();
-						const exportsInfo =
-							generateContext.moduleGraph.getExportsInfo(module);
 
 						if (defaultExport) {
-							const usedName = /** @type {string | false} */ (
-								exportsInfo
-									.getExportInfo("default")
-									.getUsedName("default", generateContext.runtime)
-							);
+							const usedName = getUsedExportName("default");
 							if (usedName) {
 								let identifier = Template.toIdentifier(usedName);
 								if (RESERVED_IDENTIFIER.has(identifier)) {
@@ -435,16 +443,8 @@ class CssGenerator extends Generator {
 						}
 
 						for (const [name, v] of cssData.exports) {
-							const usedName = /** @type {string | false} */ (
-								exportsInfo
-									.getExportInfo(name)
-									.getUsedName(name, generateContext.runtime)
-							);
-							if (!usedName) {
-								continue;
-							}
-
-							let identifier = Template.toIdentifier(usedName);
+							const usedName = getUsedExportName(name);
+							let identifier = Template.toIdentifier(usedName || name);
 							if (RESERVED_IDENTIFIER.has(identifier)) {
 								identifier = `_${identifier}`;
 							}
@@ -469,9 +469,7 @@ class CssGenerator extends Generator {
 
 					const needNsObj =
 						this._esModule &&
-						generateContext.moduleGraph
-							.getExportsInfo(module)
-							.otherExportsInfo.getUsed(generateContext.runtime) !==
+						exportsInfo.otherExportsInfo.getUsed(generateContext.runtime) !==
 							UsageState.Unused;
 
 					if (needNsObj) {
@@ -483,7 +481,25 @@ class CssGenerator extends Generator {
 					// Should be after `concatenationScope` to allow module inlining
 					generateContext.runtimeRequirements.add(RuntimeGlobals.module);
 
-					if (!isCssModule && !needNsObj) {
+					const defaultUsedName = defaultExport
+						? getUsedExportName("default")
+						: false;
+
+					/** @type {string[]} */
+					const exportEntries = [];
+					for (const [name, v] of cssData.exports) {
+						const exportKey = getUsedExportName(name) || name;
+						exportEntries.push(
+							`\t${JSON.stringify(exportKey)}: ${JSON.stringify(v)}`
+						);
+					}
+
+					if (
+						!isCssModule &&
+						!needNsObj &&
+						exportEntries.length === 0 &&
+						defaultUsedName
+					) {
 						return new ConcatSource(
 							`${module.moduleArgument}.exports = `,
 							/** @type {Source} */ (defaultExport)
@@ -497,21 +513,14 @@ class CssGenerator extends Generator {
 						}.exports = {\n`
 					);
 
-					if (defaultExport) {
+					if (defaultUsedName) {
 						result.add('\t"default": ');
-						result.add(defaultExport);
-						if (cssData.exports.size > 0) {
+						result.add(/** @type {Source} */ (defaultExport));
+						if (exportEntries.length > 0) {
 							result.add(",\n");
 						}
 					}
 
-					/** @type {string[]} */
-					const exportEntries = [];
-					for (const [name, v] of cssData.exports) {
-						exportEntries.push(
-							`\t${JSON.stringify(name)}: ${JSON.stringify(v)}`
-						);
-					}
 					if (exportEntries.length > 0) {
 						result.add(exportEntries.join(",\n"));
 					}

package/lib/css/CssLoadingRuntimeModule.js

@@ -99,7 +99,9 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 		const withPreload =
 			this._runtimeRequirements.has(RuntimeGlobals.preloadChunkHandlers) &&
 			(environment.document || isNeutralPlatform) &&
-			chunk.hasChildByOrder(chunkGraph, "preload", true, chunkHasCss);
+			(chunk.hasChildByOrder(chunkGraph, "preload", true, chunkHasCss) ||
+				// `parser.javascript.dynamicImportCssPreload` — CSS-only preload order.
+				chunk.hasChildByOrder(chunkGraph, "cssPreload", true, chunkHasCss));
 
 		const { linkPreload, linkPrefetch, createStylesheet, linkInsert } =
 			CssLoadingRuntimeModule.getCompilationHooks(compilation);
@@ -295,6 +297,7 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 																"error.name = 'ChunkLoadError';",
 																"error.type = errorType;",
 																"error.request = realHref;",
+																"error.event = event;",
 																"installedChunkData[1](error);"
 															]),
 															"} else {",
@@ -548,6 +551,7 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 														"error.name = 'ChunkLoadError';",
 														"error.type = errorType;",
 														"error.request = realHref;",
+														"error.event = event;",
 														"reject(error);"
 													]),
 													"} else {",