githubmirror/webpack

lib/css/CssInjectStyleRuntimeModule.js
182 строки5 KB
Alexander Akait
fix: drop unused __webpack_require__ runtime in concatenated CSS (#20936)
09 май 2026, 13:46
09 май 2026, 13:4666a8bcc
/*
	MIT License http://www.opensource.org/licenses/mit-license.php
	Author Natsu @xiaoxiaojx
*/

"use strict";

const { SyncWaterfallHook } = require("tapable");
const Compilation = require("../Compilation");
const RuntimeGlobals = require("../RuntimeGlobals");
const RuntimeModule = require("../RuntimeModule");
const Template = require("../Template");

/** @typedef {import("../Chunk")} Chunk */
/** @typedef {import("../Module").ReadOnlyRuntimeRequirements} ReadOnlyRuntimeRequirements */

/**
 * @typedef {object} CssInjectCompilationHooks
 * @property {SyncWaterfallHook<[string, Chunk]>} createStyle
 */

/** @type {WeakMap<Compilation, CssInjectCompilationHooks>} */
const compilationHooksMap = new WeakMap();

class CssInjectStyleRuntimeModule extends RuntimeModule {
	/**
	 * @param {Compilation} compilation the compilation
	 * @returns {CssInjectCompilationHooks} hooks
	 */
	static getCompilationHooks(compilation) {
		if (!(compilation instanceof Compilation)) {
			throw new TypeError(
				"The 'compilation' argument must be an instance of Compilation"
			);
		}
		let hooks = compilationHooksMap.get(compilation);
		if (hooks === undefined) {
			hooks = {
				createStyle: new SyncWaterfallHook(["source", "chunk"])
			};
			compilationHooksMap.set(compilation, hooks);
		}
		return hooks;
	}

	/**
	 * @param {ReadOnlyRuntimeRequirements} runtimeRequirements runtime requirements
	 */
	constructor(runtimeRequirements) {
		super("css inject style", RuntimeModule.STAGE_ATTACH);
		/** @type {ReadOnlyRuntimeRequirements} */
		this._runtimeRequirements = runtimeRequirements;
	}

	/**
	 * Generates runtime code for this runtime module.
	 * @returns {string | null} runtime code
	 */
	generate() {
		const compilation = /** @type {Compilation} */ (this.compilation);
		const { runtimeTemplate, outputOptions } = compilation;
		const { uniqueName } = outputOptions;
		const { _runtimeRequirements } = this;

		/** @type {boolean} */
		const withHmr =
			_runtimeRequirements &&
			_runtimeRequirements.has(RuntimeGlobals.hmrDownloadUpdateHandlers);

		const { createStyle } =
			CssInjectStyleRuntimeModule.getCompilationHooks(compilation);

		// Only emit the nonce check when scriptNonce is part of the runtime
		// requirements. Otherwise referencing `__webpack_require__.nc` would
		// keep the require runtime alive for nothing.
		const withScriptNonce =
			_runtimeRequirements &&
			_runtimeRequirements.has(RuntimeGlobals.scriptNonce);

		const createStyleElementCode = Template.asString([
			"var style = document.createElement('style');",
			"",
			...(withScriptNonce
				? [
						`if (${RuntimeGlobals.scriptNonce}) {`,
						Template.indent(
							`style.setAttribute("nonce", ${RuntimeGlobals.scriptNonce});`
						),
						"}"
					]
				: []),
			'style.setAttribute("data-webpack", getDataWebpackId(key));'
		]);

		return Template.asString([
			`var dataWebpackPrefix = ${uniqueName ? JSON.stringify(`${uniqueName}:`) : '"webpack:"'};`,
			"",
			"function getDataWebpackId(identifier) {",
			Template.indent("return dataWebpackPrefix + identifier;"),
			"}",
			"",
			"function findStyleElement(identifier) {",
			Template.indent([
				"var elements = document.getElementsByTagName('style');",
				"for (var i = 0; i < elements.length; i++) {",
				Template.indent([
					"var el = elements[i];",
					"if (el.getAttribute('data-webpack') === getDataWebpackId(identifier)) {",
					Template.indent("return el;"),
					"}"
				]),
				"}",
				"return null;"
			]),
			"}",
			"",
			"function insertStyleElement(key) {",
			Template.indent([
				createStyle.call(
					createStyleElementCode,
					/** @type {Chunk} */ (this.chunk)
				),
				"",
				"document.head.appendChild(style);",
				"",
				"return style;"
			]),
			"}",
			"",
			`${RuntimeGlobals.cssInjectStyle} = ${runtimeTemplate.basicFunction(
				"identifier, css",
				[
					"var element = findStyleElement(identifier) || insertStyleElement(identifier);",
					"element.textContent = css;"
				]
			)};`,
			"",
			withHmr
				? Template.asString([
						"",
						"function removeStyleElement(styleElement) {",
						Template.indent([
							"if (styleElement.parentNode) {",
							Template.indent(
								"styleElement.parentNode.removeChild(styleElement);"
							),
							"}"
						]),
						"}",
						`${RuntimeGlobals.cssInjectStyle}.removeModules = ${runtimeTemplate.basicFunction(
							"removedModules",
							[
								"if (!removedModules) return;",
								"var identifiers = Array.isArray(removedModules) ? removedModules : [removedModules];",
								"for (var i = 0; i < identifiers.length; i++) {",
								Template.indent([
									"var identifier = identifiers[i];",
									"var element = findStyleElement(identifier);",
									"if (element) {",
									Template.indent("removeStyleElement(element);"),
									"}"
								]),
								"}"
							]
						)};`,
						`${RuntimeGlobals.hmrDownloadUpdateHandlers}.cssInjectStyle = ${runtimeTemplate.basicFunction(
							"chunkIds, removedChunks, removedModules, promises, applyHandlers, updatedModulesList, css",
							[
								"if (removedModules) {",
								Template.indent(
									`${RuntimeGlobals.cssInjectStyle}.removeModules(removedModules);`
								),
								"}"
							]
						)};`
					])
				: "// no css inject style HMR download handler"
		]);
	}
}

module.exports = CssInjectStyleRuntimeModule;