webpack 5.90.3 → 5.92.0

package/lib/css/CssExportsGenerator.js

@@ -10,9 +10,14 @@ const { UsageState } = require("../ExportsInfo");
 const Generator = require("../Generator");
 const RuntimeGlobals = require("../RuntimeGlobals");
 const Template = require("../Template");
+const { cssExportConvention } = require("../util/conventions");
 
 /** @typedef {import("webpack-sources").Source} Source */
+/** @typedef {import("../../declarations/WebpackOptions").CssGeneratorExportsConvention} CssGeneratorExportsConvention */
+/** @typedef {import("../../declarations/WebpackOptions").CssGeneratorLocalIdentName} CssGeneratorLocalIdentName */
 /** @typedef {import("../Dependency")} Dependency */
+/** @typedef {import("../DependencyTemplate").CssDependencyTemplateContext} DependencyTemplateContext */
+/** @typedef {import("../DependencyTemplate").CssExportsData} CssExportsData */
 /** @typedef {import("../Generator").GenerateContext} GenerateContext */
 /** @typedef {import("../Generator").UpdateHashContext} UpdateHashContext */
 /** @typedef {import("../Module").ConcatenationBailoutReasonContext} ConcatenationBailoutReasonContext */
@@ -27,12 +32,39 @@ const Template = require("../Template");
 const TYPES = new Set(["javascript"]);
 
 class CssExportsGenerator extends Generator {
-	constructor() {
+	/**
+	 * @param {CssGeneratorExportsConvention | undefined} convention the convention of the exports name
+	 * @param {CssGeneratorLocalIdentName | undefined} localIdentName css export local ident name
+	 * @param {boolean} esModule whether to use ES modules syntax
+	 */
+	constructor(convention, localIdentName, esModule) {
 		super();
+		/** @type {CssGeneratorExportsConvention | undefined} */
+		this.convention = convention;
+		/** @type {CssGeneratorLocalIdentName | undefined} */
+		this.localIdentName = localIdentName;
+		/** @type {boolean} */
+		this.esModule = esModule;
 	}
 
-	// TODO add getConcatenationBailoutReason to allow concatenation
-	// but how to make it have a module id
+	/**
+	 * @param {NormalModule} module module for which the bailout reason should be determined
+	 * @param {ConcatenationBailoutReasonContext} context context
+	 * @returns {string | undefined} reason why this module can't be concatenated, undefined when it can be concatenated
+	 */
+	getConcatenationBailoutReason(module, context) {
+		if (!this.esModule) {
+			return "Module is not an ECMAScript module";
+		}
+		// TODO webpack 6: remove /\[moduleid\]/.test
+		if (
+			/\[id\]/.test(this.localIdentName) ||
+			/\[moduleid\]/.test(this.localIdentName)
+		) {
+			return "The localIdentName includes moduleId ([id] or [moduleid])";
+		}
+		return undefined;
+	}
 
 	/**
 	 * @param {NormalModule} module module for which the code should be generated
@@ -43,13 +75,18 @@ class CssExportsGenerator extends Generator {
 		const source = new ReplaceSource(new RawSource(""));
 		/** @type {InitFragment<TODO>[]} */
 		const initFragments = [];
-		const cssExports = new Map();
+		/** @type {CssExportsData} */
+		const cssExportsData = {
+			esModule: this.esModule,
+			exports: new Map()
+		};
 
 		generateContext.runtimeRequirements.add(RuntimeGlobals.module);
 
 		let chunkInitFragments;
 		const runtimeRequirements = new Set();
 
+		/** @type {DependencyTemplateContext} */
 		const templateContext = {
 			runtimeTemplate: generateContext.runtimeTemplate,
 			dependencyTemplates: generateContext.dependencyTemplates,
@@ -61,7 +98,7 @@ class CssExportsGenerator extends Generator {
 			concatenationScope: generateContext.concatenationScope,
 			codeGenerationResults: generateContext.codeGenerationResults,
 			initFragments,
-			cssExports,
+			cssExportsData,
 			get chunkInitFragments() {
 				if (!chunkInitFragments) {
 					const data = generateContext.getData();
@@ -97,39 +134,45 @@ class CssExportsGenerator extends Generator {
 		if (generateContext.concatenationScope) {
 			const source = new ConcatSource();
 			const usedIdentifiers = new Set();
-			for (const [k, v] of cssExports) {
-				let identifier = Template.toIdentifier(k);
-				let i = 0;
-				while (usedIdentifiers.has(identifier)) {
-					identifier = Template.toIdentifier(k + i);
+			for (const [name, v] of cssExportsData.exports) {
+				for (let k of cssExportConvention(name, this.convention)) {
+					let identifier = Template.toIdentifier(k);
+					let i = 0;
+					while (usedIdentifiers.has(identifier)) {
+						identifier = Template.toIdentifier(k + i);
+					}
+					usedIdentifiers.add(identifier);
+					generateContext.concatenationScope.registerExport(k, identifier);
+					source.add(
+						`${
+							generateContext.runtimeTemplate.supportsConst() ? "const" : "var"
+						} ${identifier} = ${JSON.stringify(v)};\n`
+					);
 				}
-				usedIdentifiers.add(identifier);
-				generateContext.concatenationScope.registerExport(k, identifier);
-				source.add(
-					`${
-						generateContext.runtimeTemplate.supportsConst ? "const" : "var"
-					} ${identifier} = ${JSON.stringify(v)};\n`
-				);
 			}
 			return source;
 		} else {
-			const otherUsed =
+			const needNsObj =
+				this.esModule &&
 				generateContext.moduleGraph
 					.getExportsInfo(module)
 					.otherExportsInfo.getUsed(generateContext.runtime) !==
-				UsageState.Unused;
-			if (otherUsed) {
+					UsageState.Unused;
+			if (needNsObj) {
 				generateContext.runtimeRequirements.add(
 					RuntimeGlobals.makeNamespaceObject
 				);
 			}
+			const newExports = [];
+			for (let [k, v] of cssExportsData.exports) {
+				for (let name of cssExportConvention(k, this.convention)) {
+					newExports.push(`\t${JSON.stringify(name)}: ${JSON.stringify(v)}`);
+				}
+			}
 			return new RawSource(
-				`${otherUsed ? `${RuntimeGlobals.makeNamespaceObject}(` : ""}${
+				`${needNsObj ? `${RuntimeGlobals.makeNamespaceObject}(` : ""}${
 					module.moduleArgument
-				}.exports = {\n${Array.from(
-					cssExports,
-					([k, v]) => `\t${JSON.stringify(k)}: ${JSON.stringify(v)}`
-				).join(",\n")}\n}${otherUsed ? ")" : ""};`
+				}.exports = {\n${newExports.join(",\n")}\n}${needNsObj ? ")" : ""};`
 			);
 		}
 	}

package/lib/css/CssGenerator.js

@@ -9,9 +9,14 @@ const { ReplaceSource } = require("webpack-sources");
 const Generator = require("../Generator");
 const InitFragment = require("../InitFragment");
 const RuntimeGlobals = require("../RuntimeGlobals");
+const { cssExportConvention } = require("../util/conventions");
 
 /** @typedef {import("webpack-sources").Source} Source */
+/** @typedef {import("../../declarations/WebpackOptions").CssGeneratorExportsConvention} CssGeneratorExportsConvention */
+/** @typedef {import("../../declarations/WebpackOptions").CssGeneratorLocalIdentName} CssGeneratorLocalIdentName */
 /** @typedef {import("../Dependency")} Dependency */
+/** @typedef {import("../DependencyTemplate").CssDependencyTemplateContext} DependencyTemplateContext */
+/** @typedef {import("../DependencyTemplate").CssExportsData} CssExportsData */
 /** @typedef {import("../Generator").GenerateContext} GenerateContext */
 /** @typedef {import("../Generator").UpdateHashContext} UpdateHashContext */
 /** @typedef {import("../NormalModule")} NormalModule */
@@ -20,8 +25,19 @@ const RuntimeGlobals = require("../RuntimeGlobals");
 const TYPES = new Set(["css"]);
 
 class CssGenerator extends Generator {
-	constructor() {
+	/**
+	 * @param {CssGeneratorExportsConvention | undefined} convention the convention of the exports name
+	 * @param {CssGeneratorLocalIdentName | undefined} localIdentName css export local ident name
+	 * @param {boolean} esModule whether to use ES modules syntax
+	 */
+	constructor(convention, localIdentName, esModule) {
 		super();
+		/** @type {CssGeneratorExportsConvention | undefined} */
+		this.convention = convention;
+		/** @type {CssGeneratorLocalIdentName | undefined} */
+		this.localIdentName = localIdentName;
+		/** @type {boolean} */
+		this.esModule = esModule;
 	}
 
 	/**
@@ -34,11 +50,16 @@ class CssGenerator extends Generator {
 		const source = new ReplaceSource(originalSource);
 		/** @type {InitFragment[]} */
 		const initFragments = [];
-		const cssExports = new Map();
+		/** @type {CssExportsData} */
+		const cssExportsData = {
+			esModule: this.esModule,
+			exports: new Map()
+		};
 
 		generateContext.runtimeRequirements.add(RuntimeGlobals.hasCssModules);
 
 		let chunkInitFragments;
+		/** @type {DependencyTemplateContext} */
 		const templateContext = {
 			runtimeTemplate: generateContext.runtimeTemplate,
 			dependencyTemplates: generateContext.dependencyTemplates,
@@ -50,7 +71,7 @@ class CssGenerator extends Generator {
 			concatenationScope: generateContext.concatenationScope,
 			codeGenerationResults: generateContext.codeGenerationResults,
 			initFragments,
-			cssExports,
+			cssExportsData,
 			get chunkInitFragments() {
 				if (!chunkInitFragments) {
 					const data = generateContext.getData();
@@ -85,10 +106,17 @@ class CssGenerator extends Generator {
 		if (module.presentationalDependencies !== undefined)
 			module.presentationalDependencies.forEach(handleDependency);
 
-		if (cssExports.size > 0) {
-			const data = generateContext.getData();
-			data.set("css-exports", cssExports);
+		if (cssExportsData.exports.size > 0) {
+			const newExports = new Map();
+			for (let [name, v] of cssExportsData.exports) {
+				for (let newName of cssExportConvention(name, this.convention)) {
+					newExports.set(newName, v);
+				}
+			}
+			cssExportsData.exports = newExports;
 		}
+		const data = generateContext.getData();
+		data.set("css-exports", cssExportsData);
 
 		return InitFragment.addToSource(source, initFragments, generateContext);
 	}

package/lib/css/CssLoadingRuntimeModule.js

@@ -16,19 +16,22 @@ const { chunkHasCss } = require("./CssModulesPlugin");
 /** @typedef {import("../Chunk")} Chunk */
 /** @typedef {import("../ChunkGraph")} ChunkGraph */
 /** @typedef {import("../Compilation").RuntimeRequirementsContext} RuntimeRequirementsContext */
+/** @typedef {import("../Module").ReadOnlyRuntimeRequirements} ReadOnlyRuntimeRequirements */
 
 /**
- * @typedef {Object} JsonpCompilationPluginHooks
+ * @typedef {object} CssLoadingRuntimeModulePluginHooks
  * @property {SyncWaterfallHook<[string, Chunk]>} createStylesheet
+ * @property {SyncWaterfallHook<[string, Chunk]>} linkPreload
+ * @property {SyncWaterfallHook<[string, Chunk]>} linkPrefetch
  */
 
-/** @type {WeakMap<Compilation, JsonpCompilationPluginHooks>} */
+/** @type {WeakMap<Compilation, CssLoadingRuntimeModulePluginHooks>} */
 const compilationHooksMap = new WeakMap();
 
 class CssLoadingRuntimeModule extends RuntimeModule {
 	/**
 	 * @param {Compilation} compilation the compilation
-	 * @returns {JsonpCompilationPluginHooks} hooks
+	 * @returns {CssLoadingRuntimeModulePluginHooks} hooks
 	 */
 	static getCompilationHooks(compilation) {
 		if (!(compilation instanceof Compilation)) {
@@ -39,7 +42,9 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 		let hooks = compilationHooksMap.get(compilation);
 		if (hooks === undefined) {
 			hooks = {
-				createStylesheet: new SyncWaterfallHook(["source", "chunk"])
+				createStylesheet: new SyncWaterfallHook(["source", "chunk"]),
+				linkPreload: new SyncWaterfallHook(["source", "chunk"]),
+				linkPrefetch: new SyncWaterfallHook(["source", "chunk"])
 			};
 			compilationHooksMap.set(compilation, hooks);
 		}
@@ -47,7 +52,7 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 	}
 
 	/**
-	 * @param {Set<string>} runtimeRequirements runtime requirements
+	 * @param {ReadOnlyRuntimeRequirements} runtimeRequirements runtime requirements
 	 */
 	constructor(runtimeRequirements) {
 		super("css loading", 10);
@@ -59,16 +64,19 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 	 * @returns {string | null} runtime code
 	 */
 	generate() {
-		const { compilation, chunk, _runtimeRequirements } = this;
+		const { _runtimeRequirements } = this;
+		const compilation = /** @type {Compilation} */ (this.compilation);
+		const chunk = /** @type {Chunk} */ (this.chunk);
 		const {
 			chunkGraph,
 			runtimeTemplate,
 			outputOptions: {
 				crossOriginLoading,
 				uniqueName,
-				chunkLoadTimeout: loadTimeout
+				chunkLoadTimeout: loadTimeout,
+				cssHeadDataCompression: withCompression
 			}
-		} = /** @type {Compilation} */ (compilation);
+		} = compilation;
 		const fn = RuntimeGlobals.ensureChunkHandlers;
 		const conditionMap = chunkGraph.getChunkConditionMap(
 			/** @type {Chunk} */ (chunk),
@@ -85,6 +93,12 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 		const withLoading =
 			_runtimeRequirements.has(RuntimeGlobals.ensureChunkHandlers) &&
 			hasCssMatcher !== false;
+		const withPrefetch = this._runtimeRequirements.has(
+			RuntimeGlobals.prefetchChunkHandlers
+		);
+		const withPreload = this._runtimeRequirements.has(
+			RuntimeGlobals.preloadChunkHandlers
+		);
 		/** @type {boolean} */
 		const withHmr = _runtimeRequirements.has(
 			RuntimeGlobals.hmrDownloadUpdateHandlers
@@ -104,19 +118,39 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 			return null;
 		}
 
-		const { createStylesheet } = CssLoadingRuntimeModule.getCompilationHooks(
-			/** @type {Compilation} */ (compilation)
+		const { linkPreload, linkPrefetch } =
+			CssLoadingRuntimeModule.getCompilationHooks(compilation);
+
+		const withFetchPriority = _runtimeRequirements.has(
+			RuntimeGlobals.hasFetchPriority
 		);
 
+		const { createStylesheet } =
+			CssLoadingRuntimeModule.getCompilationHooks(compilation);
+
 		const stateExpression = withHmr
 			? `${RuntimeGlobals.hmrRuntimeStatePrefix}_css`
 			: undefined;
 
 		const code = Template.asString([
 			"link = document.createElement('link');",
+			`if (${RuntimeGlobals.scriptNonce}) {`,
+			Template.indent(
+				`link.setAttribute("nonce", ${RuntimeGlobals.scriptNonce});`
+			),
+			"}",
 			uniqueName
 				? 'link.setAttribute("data-webpack", uniqueName + ":" + key);'
 				: "",
+			withFetchPriority
+				? Template.asString([
+						"if(fetchPriority) {",
+						Template.indent(
+							'link.setAttribute("fetchpriority", fetchPriority);'
+						),
+						"}"
+					])
+				: "",
 			"link.setAttribute(loadingAttribute, 1);",
 			'link.rel = "stylesheet";',
 			"link.href = url;",
@@ -163,9 +197,9 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 			`var loadCssChunkData = ${runtimeTemplate.basicFunction(
 				"target, link, chunkId",
 				[
-					`var data, token = "", token2, exports = {}, exportsWithId = [], exportsWithDashes = [], ${
+					`var data, token = "", token2 = "", exports = {}, ${
 						withHmr ? "moduleIds = [], " : ""
-					}name = ${name}, i = 0, cc = 1;`,
+					}name = ${name}, i, cc = 1;`,
 					"try {",
 					Template.indent([
 						"if(!link) link = loadStylesheet(chunkId);",
@@ -187,46 +221,44 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 					]),
 					"}",
 					"if(!data) return [];",
-					"for(; cc; i++) {",
+					withCompression
+						? Template.asString([
+								// LZW decode
+								`var map = {}, char = data[0], oldPhrase = char, decoded = char, code = 256, maxCode = ${"\uffff".charCodeAt(
+									0
+								)}, phrase;`,
+								"for (i = 1; i < data.length; i++) {",
+								Template.indent([
+									"cc = data[i].charCodeAt(0);",
+									"if (cc < 256) phrase = data[i]; else phrase = map[cc] ? map[cc] : (oldPhrase + char);",
+									"decoded += phrase;",
+									"char = phrase.charAt(0);",
+									"map[code] = oldPhrase + char;",
+									"if (++code > maxCode) { code = 256; map = {}; }",
+									"oldPhrase = phrase;"
+								]),
+								"}",
+								"data = decoded;"
+							])
+						: "// css head data compression is disabled",
+					"for(i = 0; cc; i++) {",
 					Template.indent([
 						"cc = data.charCodeAt(i);",
-						`if(cc == ${cc("(")}) { token2 = token; token = ""; }`,
+						`if(cc == ${cc(":")}) { token2 = token; token = ""; }`,
 						`else if(cc == ${cc(
-							")"
-						)}) { exports[token2.replace(/^_/, "")] = token.replace(/^_/, ""); token = ""; }`,
-						`else if(cc == ${cc("/")} || cc == ${cc(
-							"%"
-						)}) { token = token.replace(/^_/, ""); exports[token] = token; exportsWithId.push(token); if(cc == ${cc(
-							"%"
-						)}) exportsWithDashes.push(token); token = ""; }`,
+							"/"
+						)}) { token = token.replace(/^_/, ""); token2 = token2.replace(/^_/, ""); exports[token2] = token; token = ""; token2 = ""; }`,
+						`else if(cc == ${cc("&")}) { ${
+							RuntimeGlobals.makeNamespaceObject
+						}(exports); }`,
 						`else if(!cc || cc == ${cc(
 							","
-						)}) { token = token.replace(/^_/, ""); exportsWithId.forEach(${runtimeTemplate.expressionFunction(
-							`exports[x] = ${
-								uniqueName
-									? runtimeTemplate.concatenation(
-											{ expr: "uniqueName" },
-											"-",
-											{ expr: "token" },
-											"-",
-											{ expr: "exports[x]" }
-										)
-									: runtimeTemplate.concatenation({ expr: "token" }, "-", {
-											expr: "exports[x]"
-										})
-							}`,
-							"x"
-						)}); exportsWithDashes.forEach(${runtimeTemplate.expressionFunction(
-							`exports[x] = "--" + exports[x]`,
-							"x"
-						)}); ${
-							RuntimeGlobals.makeNamespaceObject
-						}(exports); target[token] = (${runtimeTemplate.basicFunction(
+						)}) { token = token.replace(/^_/, ""); target[token] = (${runtimeTemplate.basicFunction(
 							"exports, module",
 							`module.exports = exports;`
 						)}).bind(null, exports); ${
 							withHmr ? "moduleIds.push(token); " : ""
-						}token = ""; exports = {}; exportsWithId.length = 0; exportsWithDashes.length = 0; }`,
+						}token = ""; token2 = ""; exports = {};  }`,
 						`else if(cc == ${cc("\\")}) { token += data[++i] }`,
 						`else { token += data[i]; }`
 					]),
@@ -239,7 +271,9 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 			)}`,
 			'var loadingAttribute = "data-webpack-loading";',
 			`var loadStylesheet = ${runtimeTemplate.basicFunction(
-				"chunkId, url, done" + (withHmr ? ", hmr" : ""),
+				"chunkId, url, done" +
+					(withHmr ? ", hmr" : "") +
+					(withFetchPriority ? ", fetchPriority" : ""),
 				[
 					'var link, needAttach, key = "chunk-" + chunkId;',
 					withHmr ? "if(!hmr) {" : "",
@@ -307,74 +341,159 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 			"",
 			withLoading
 				? Template.asString([
-						`${fn}.css = ${runtimeTemplate.basicFunction("chunkId, promises", [
-							"// css chunk loading",
-							`var installedChunkData = ${RuntimeGlobals.hasOwnProperty}(installedChunks, chunkId) ? installedChunks[chunkId] : undefined;`,
-							'if(installedChunkData !== 0) { // 0 means "already installed".',
-							Template.indent([
-								"",
-								'// a Promise means "currently loading".',
-								"if(installedChunkData) {",
-								Template.indent(["promises.push(installedChunkData[2]);"]),
-								"} else {",
+						`${fn}.css = ${runtimeTemplate.basicFunction(
+							`chunkId, promises${withFetchPriority ? " , fetchPriority" : ""}`,
+							[
+								"// css chunk loading",
+								`var installedChunkData = ${RuntimeGlobals.hasOwnProperty}(installedChunks, chunkId) ? installedChunks[chunkId] : undefined;`,
+								'if(installedChunkData !== 0) { // 0 means "already installed".',
 								Template.indent([
-									hasCssMatcher === true
-										? "if(true) { // all chunks have CSS"
-										: `if(${hasCssMatcher("chunkId")}) {`,
+									"",
+									'// a Promise means "currently loading".',
+									"if(installedChunkData) {",
+									Template.indent(["promises.push(installedChunkData[2]);"]),
+									"} else {",
 									Template.indent([
-										"// setup Promise in chunk cache",
-										`var promise = new Promise(${runtimeTemplate.expressionFunction(
-											`installedChunkData = installedChunks[chunkId] = [resolve, reject]`,
-											"resolve, reject"
-										)});`,
-										"promises.push(installedChunkData[2] = promise);",
-										"",
-										"// start chunk loading",
-										`var url = ${RuntimeGlobals.publicPath} + ${RuntimeGlobals.getChunkCssFilename}(chunkId);`,
-										"// create error before stack unwound to get useful stacktrace later",
-										"var error = new Error();",
-										`var loadingEnded = ${runtimeTemplate.basicFunction(
-											"event",
-											[
-												`if(${RuntimeGlobals.hasOwnProperty}(installedChunks, chunkId)) {`,
-												Template.indent([
-													"installedChunkData = installedChunks[chunkId];",
-													"if(installedChunkData !== 0) installedChunks[chunkId] = undefined;",
-													"if(installedChunkData) {",
+										hasCssMatcher === true
+											? "if(true) { // all chunks have CSS"
+											: `if(${hasCssMatcher("chunkId")}) {`,
+										Template.indent([
+											"// setup Promise in chunk cache",
+											`var promise = new Promise(${runtimeTemplate.expressionFunction(
+												`installedChunkData = installedChunks[chunkId] = [resolve, reject]`,
+												"resolve, reject"
+											)});`,
+											"promises.push(installedChunkData[2] = promise);",
+											"",
+											"// start chunk loading",
+											`var url = ${RuntimeGlobals.publicPath} + ${RuntimeGlobals.getChunkCssFilename}(chunkId);`,
+											"// create error before stack unwound to get useful stacktrace later",
+											"var error = new Error();",
+											`var loadingEnded = ${runtimeTemplate.basicFunction(
+												"event",
+												[
+													`if(${RuntimeGlobals.hasOwnProperty}(installedChunks, chunkId)) {`,
 													Template.indent([
-														'if(event.type !== "load") {',
+														"installedChunkData = installedChunks[chunkId];",
+														"if(installedChunkData !== 0) installedChunks[chunkId] = undefined;",
+														"if(installedChunkData) {",
 														Template.indent([
-															"var errorType = event && event.type;",
-															"var realHref = event && event.target && event.target.href;",
-															"error.message = 'Loading css chunk ' + chunkId + ' failed.\\n(' + errorType + ': ' + realHref + ')';",
-															"error.name = 'ChunkLoadError';",
-															"error.type = errorType;",
-															"error.request = realHref;",
-															"installedChunkData[1](error);"
-														]),
-														"} else {",
-														Template.indent([
-															`loadCssChunkData(${RuntimeGlobals.moduleFactories}, link, chunkId);`,
-															"installedChunkData[0]();"
+															'if(event.type !== "load") {',
+															Template.indent([
+																"var errorType = event && event.type;",
+																"var realHref = event && event.target && event.target.href;",
+																"error.message = 'Loading css chunk ' + chunkId + ' failed.\\n(' + errorType + ': ' + realHref + ')';",
+																"error.name = 'ChunkLoadError';",
+																"error.type = errorType;",
+																"error.request = realHref;",
+																"installedChunkData[1](error);"
+															]),
+															"} else {",
+															Template.indent([
+																`loadCssChunkData(${RuntimeGlobals.moduleFactories}, link, chunkId);`,
+																"installedChunkData[0]();"
+															]),
+															"}"
 														]),
 														"}"
 													]),
 													"}"
-												]),
-												"}"
-											]
-										)};`,
-										"var link = loadStylesheet(chunkId, url, loadingEnded);"
+												]
+											)};`,
+											`var link = loadStylesheet(chunkId, url, loadingEnded${
+												withFetchPriority ? ", fetchPriority" : ""
+											});`
+										]),
+										"} else installedChunks[chunkId] = 0;"
 									]),
-									"} else installedChunks[chunkId] = 0;"
+									"}"
 								]),
 								"}"
-							]),
-							"}"
-						])};`
+							]
+						)};`
 					])
 				: "// no chunk loading",
 			"",
+			withPrefetch && hasCssMatcher !== false
+				? `${
+						RuntimeGlobals.prefetchChunkHandlers
+					}.s = ${runtimeTemplate.basicFunction("chunkId", [
+						`if((!${
+							RuntimeGlobals.hasOwnProperty
+						}(installedChunks, chunkId) || installedChunks[chunkId] === undefined) && ${
+							hasCssMatcher === true ? "true" : hasCssMatcher("chunkId")
+						}) {`,
+						Template.indent([
+							"installedChunks[chunkId] = null;",
+							linkPrefetch.call(
+								Template.asString([
+									"var link = document.createElement('link');",
+									crossOriginLoading
+										? `link.crossOrigin = ${JSON.stringify(
+												crossOriginLoading
+											)};`
+										: "",
+									`if (${RuntimeGlobals.scriptNonce}) {`,
+									Template.indent(
+										`link.setAttribute("nonce", ${RuntimeGlobals.scriptNonce});`
+									),
+									"}",
+									'link.rel = "prefetch";',
+									'link.as = "style";',
+									`link.href = ${RuntimeGlobals.publicPath} + ${RuntimeGlobals.getChunkCssFilename}(chunkId);`
+								]),
+								chunk
+							),
+							"document.head.appendChild(link);"
+						]),
+						"}"
+					])};`
+				: "// no prefetching",
+			"",
+			withPreload && hasCssMatcher !== false
+				? `${
+						RuntimeGlobals.preloadChunkHandlers
+					}.s = ${runtimeTemplate.basicFunction("chunkId", [
+						`if((!${
+							RuntimeGlobals.hasOwnProperty
+						}(installedChunks, chunkId) || installedChunks[chunkId] === undefined) && ${
+							hasCssMatcher === true ? "true" : hasCssMatcher("chunkId")
+						}) {`,
+						Template.indent([
+							"installedChunks[chunkId] = null;",
+							linkPreload.call(
+								Template.asString([
+									"var link = document.createElement('link');",
+									"link.charset = 'utf-8';",
+									`if (${RuntimeGlobals.scriptNonce}) {`,
+									Template.indent(
+										`link.setAttribute("nonce", ${RuntimeGlobals.scriptNonce});`
+									),
+									"}",
+									'link.rel = "preload";',
+									'link.as = "style";',
+									`link.href = ${RuntimeGlobals.publicPath} + ${RuntimeGlobals.getChunkCssFilename}(chunkId);`,
+									crossOriginLoading
+										? crossOriginLoading === "use-credentials"
+											? 'link.crossOrigin = "use-credentials";'
+											: Template.asString([
+													"if (link.href.indexOf(window.location.origin + '/') !== 0) {",
+													Template.indent(
+														`link.crossOrigin = ${JSON.stringify(
+															crossOriginLoading
+														)};`
+													),
+													"}"
+												])
+										: ""
+								]),
+								chunk
+							),
+							"document.head.appendChild(link);"
+						]),
+						"}"
+					])};`
+				: "// no preloaded",
 			withHmr
 				? Template.asString([
 						"var oldTags = [];",