webpack 5.97.1 → 5.104.1

package/lib/css/CssLoadingRuntimeModule.js

@@ -7,16 +7,16 @@
 
 const { SyncWaterfallHook } = require("tapable");
 const Compilation = require("../Compilation");
+const { CSS_TYPE } = require("../ModuleSourceTypeConstants");
 const RuntimeGlobals = require("../RuntimeGlobals");
 const RuntimeModule = require("../RuntimeModule");
 const Template = require("../Template");
 const compileBooleanMatcher = require("../util/compileBooleanMatcher");
 const { chunkHasCss } = require("./CssModulesPlugin");
 
-/** @typedef {import("../../declarations/WebpackOptions").Environment} Environment */
 /** @typedef {import("../Chunk")} Chunk */
+/** @typedef {import("../Chunk").ChunkId} ChunkId */
 /** @typedef {import("../ChunkGraph")} ChunkGraph */
-/** @typedef {import("../Compilation").RuntimeRequirementsContext} RuntimeRequirementsContext */
 /** @typedef {import("../Module").ReadOnlyRuntimeRequirements} ReadOnlyRuntimeRequirements */
 
 /**
@@ -74,19 +74,20 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 			outputOptions: {
 				crossOriginLoading,
 				uniqueName,
-				chunkLoadTimeout: loadTimeout
+				chunkLoadTimeout: loadTimeout,
+				charset
 			}
 		} = compilation;
 		const fn = RuntimeGlobals.ensureChunkHandlers;
 		const conditionMap = chunkGraph.getChunkConditionMap(
-			/** @type {Chunk} */ (chunk),
+			chunk,
 			/**
 			 * @param {Chunk} chunk the chunk
 			 * @param {ChunkGraph} chunkGraph the chunk graph
 			 * @returns {boolean} true, if the chunk has css
 			 */
 			(chunk, chunkGraph) =>
-				Boolean(chunkGraph.getChunkModulesIterableBySourceType(chunk, "css"))
+				Boolean(chunkGraph.getChunkModulesIterableBySourceType(chunk, CSS_TYPE))
 		);
 		const hasCssMatcher = compileBooleanMatcher(conditionMap);
 
@@ -97,11 +98,11 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 		const withHmr = _runtimeRequirements.has(
 			RuntimeGlobals.hmrDownloadUpdateHandlers
 		);
-		/** @type {Set<number | string | null>} */
+		/** @type {Set<ChunkId>} */
 		const initialChunkIds = new Set();
-		for (const c of /** @type {Chunk} */ (chunk).getAllInitialChunks()) {
+		for (const c of chunk.getAllInitialChunks()) {
 			if (chunkHasCss(c, chunkGraph)) {
-				initialChunkIds.add(c.id);
+				initialChunkIds.add(/** @type {ChunkId} */ (c.id));
 			}
 		}
 
@@ -109,9 +110,7 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 			return null;
 		}
 
-		const environment =
-			/** @type {Environment} */
-			(compilation.outputOptions.environment);
+		const environment = compilation.outputOptions.environment;
 		const isNeutralPlatform = runtimeTemplate.isNeutralPlatform();
 		const withPrefetch =
 			this._runtimeRequirements.has(RuntimeGlobals.prefetchChunkHandlers) &&
@@ -138,6 +137,7 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 
 		const code = Template.asString([
 			"link = document.createElement('link');",
+			charset ? "link.charset = 'utf-8';" : "",
 			`if (${RuntimeGlobals.scriptNonce}) {`,
 			Template.indent(
 				`link.setAttribute("nonce", ${RuntimeGlobals.scriptNonce});`
@@ -179,7 +179,7 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 				stateExpression ? `${stateExpression} = ${stateExpression} || ` : ""
 			}{`,
 			Template.indent(
-				Array.from(initialChunkIds, id => `${JSON.stringify(id)}: 0`).join(
+				Array.from(initialChunkIds, (id) => `${JSON.stringify(id)}: 0`).join(
 					",\n"
 				)
 			),
@@ -351,6 +351,7 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 							linkPrefetch.call(
 								Template.asString([
 									"var link = document.createElement('link');",
+									charset ? "link.charset = 'utf-8';" : "",
 									crossOriginLoading
 										? `link.crossOrigin = ${JSON.stringify(
 												crossOriginLoading
@@ -390,7 +391,7 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 							linkPreload.call(
 								Template.asString([
 									"var link = document.createElement('link');",
-									"link.charset = 'utf-8';",
+									charset ? "link.charset = 'utf-8';" : "",
 									`if (${RuntimeGlobals.scriptNonce}) {`,
 									Template.indent(
 										`link.setAttribute("nonce", ${RuntimeGlobals.scriptNonce});`
@@ -429,7 +430,7 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 								"while(oldTags.length) {",
 								Template.indent([
 									"var oldTag = oldTags.pop();",
-									"if(oldTag.parentNode) oldTag.parentNode.removeChild(oldTag);"
+									"if(oldTag && oldTag.parentNode) oldTag.parentNode.removeChild(oldTag);"
 								]),
 								"}"
 							])}, apply: ${runtimeTemplate.basicFunction("", [
@@ -451,17 +452,26 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 						`${
 							RuntimeGlobals.hmrDownloadUpdateHandlers
 						}.css = ${runtimeTemplate.basicFunction(
-							"chunkIds, removedChunks, removedModules, promises, applyHandlers, updatedModulesList",
+							"chunkIds, removedChunks, removedModules, promises, applyHandlers, updatedModulesList, css",
 							[
 								isNeutralPlatform
 									? "if (typeof document === 'undefined') return;"
 									: "",
 								"applyHandlers.push(applyHandler);",
+								"// Read CSS removed chunks from update manifest",
+								"var cssRemovedChunks = css && css.r;",
 								`chunkIds.forEach(${runtimeTemplate.basicFunction("chunkId", [
 									`var filename = ${RuntimeGlobals.getChunkCssFilename}(chunkId);`,
 									`var url = ${RuntimeGlobals.publicPath} + filename;`,
 									"var oldTag = loadStylesheet(chunkId, url);",
-									"if(!oldTag) return;",
+									`if(!oldTag && !${withHmr} ) return;`,
+									"// Skip if CSS was removed",
+									"if(cssRemovedChunks && cssRemovedChunks.indexOf(chunkId) >= 0) {",
+									Template.indent(["oldTags.push(oldTag);", "return;"]),
+									"}",
+									"",
+									"// create error before stack unwound to get useful stacktrace later",
+									"var error = new Error();",
 									`promises.push(new Promise(${runtimeTemplate.basicFunction(
 										"resolve, reject",
 										[

package/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;