webpack 5.110.2 → 5.111.0

package/lib/css/CssInjectStyleRuntimeModule.js

@@ -30,6 +30,15 @@ class CssInjectStyleRuntimeModule extends RuntimeModule {
 		this._runtimeRequirements = runtimeRequirements;
 	}
 
+	/**
+	 * The `[handlerMap, key]` pairs this module installs onto a chunk handler map
+	 * such as `__webpack_require__.f`, or `null` where it cannot name them.
+	 * @returns {[string, string][] | null} installed chunk handlers (do not mutate)
+	 */
+	getInstalledChunkHandlers() {
+		return RuntimeModule.NO_CHUNK_HANDLERS;
+	}
+
 	/**
 	 * Generates runtime code for this runtime module.
 	 * @returns {string | null} runtime code

package/lib/css/CssLoadingRuntimeModule.js

@@ -15,6 +15,7 @@ const createHooksRegistry = require("../util/createHooksRegistry");
 const { chunkHasCss } = require("./CssModulesPlugin");
 
 /** @import Chunk, { ChunkId } from "../Chunk" */
+/** @import ChunkGraph from "../ChunkGraph" */
 /** @import { ReadOnlyRuntimeRequirements } from "../Module" */
 
 const createCompilationHooks = () => ({
@@ -56,26 +57,14 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 	}
 
 	/**
-	 * Generates runtime code for this runtime module.
-	 * @returns {string | null} runtime code
+	 * The initial chunks carrying a stylesheet, and the matcher for the ones the
+	 * handler can still be asked to load.
+	 * @private
+	 * @returns {{ initialChunkIds: Set<ChunkId>, hasCssMatcher: ReturnType<typeof compileBooleanMatcher> }} loadable chunks
 	 */
-	generate() {
-		const { _runtimeRequirements } = this;
-		const compilation = /** @type {Compilation} */ (this.compilation);
+	_getLoadableChunks() {
 		const chunk = /** @type {Chunk} */ (this.chunk);
-		const {
-			chunkGraph,
-			runtimeTemplate,
-			outputOptions: {
-				crossOriginLoading,
-				uniqueName,
-				chunkLoadTimeout: loadTimeout,
-				charset,
-				resourceHints
-			}
-		} = compilation;
-		const dedupePrefetch = Boolean(resourceHints && resourceHints.dedupe);
-		const fn = RuntimeGlobals.ensureChunkHandlers;
+		const chunkGraph = /** @type {ChunkGraph} */ (this.chunkGraph);
 		/** @type {Set<ChunkId>} */
 		const initialChunkIds = new Set();
 		for (const c of chunk.getAllInitialChunks()) {
@@ -96,6 +85,75 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 			compileBooleanMatcher(loadableConditionMap) === false
 				? false
 				: compileBooleanMatcher(conditionMap);
+		return { initialChunkIds, hasCssMatcher };
+	}
+
+	/**
+	 * The `[handlerMap, key]` pairs this module installs onto a chunk handler map
+	 * such as `__webpack_require__.f`, or `null` where it cannot name them.
+	 * @returns {[string, string][] | null} installed chunk handlers (do not mutate)
+	 */
+	getInstalledChunkHandlers() {
+		const compilation = /** @type {Compilation} */ (this.compilation);
+		const chunk = /** @type {Chunk} */ (this.chunk);
+		const chunkGraph = /** @type {ChunkGraph} */ (this.chunkGraph);
+		const runtimeRequirements = this._runtimeRequirements;
+		const withLoading =
+			runtimeRequirements.has(RuntimeGlobals.ensureChunkHandlers) &&
+			this._getLoadableChunks().hasCssMatcher !== false;
+		// Nothing at all is emitted without either, so nothing is installed either.
+		if (
+			!withLoading &&
+			!runtimeRequirements.has(RuntimeGlobals.hmrDownloadUpdateHandlers)
+		) {
+			return [];
+		}
+		const withHint =
+			compilation.outputOptions.environment.document ||
+			compilation.runtimeTemplate.isNeutralPlatform();
+		/** @type {[string, string][]} */
+		const handlers = [];
+		if (withLoading) handlers.push([RuntimeGlobals.ensureChunkHandlers, "css"]);
+		if (
+			withHint &&
+			runtimeRequirements.has(RuntimeGlobals.prefetchChunkHandlers) &&
+			chunk.hasChildByOrder(chunkGraph, "prefetch", true, chunkHasCss)
+		) {
+			handlers.push([RuntimeGlobals.prefetchChunkHandlers, "s"]);
+		}
+		if (
+			withHint &&
+			runtimeRequirements.has(RuntimeGlobals.preloadChunkHandlers) &&
+			(chunk.hasChildByOrder(chunkGraph, "preload", true, chunkHasCss) ||
+				chunk.hasChildByOrder(chunkGraph, "cssPreload", true, chunkHasCss))
+		) {
+			handlers.push([RuntimeGlobals.preloadChunkHandlers, "s"]);
+		}
+		return handlers;
+	}
+
+	/**
+	 * Generates runtime code for this runtime module.
+	 * @returns {string | null} runtime code
+	 */
+	generate() {
+		const { _runtimeRequirements } = this;
+		const compilation = /** @type {Compilation} */ (this.compilation);
+		const chunk = /** @type {Chunk} */ (this.chunk);
+		const {
+			chunkGraph,
+			runtimeTemplate,
+			outputOptions: {
+				crossOriginLoading,
+				uniqueName,
+				chunkLoadTimeout: loadTimeout,
+				charset,
+				resourceHints
+			}
+		} = compilation;
+		const dedupePrefetch = Boolean(resourceHints && resourceHints.dedupe);
+		const fn = RuntimeGlobals.ensureChunkHandlers;
+		const { initialChunkIds, hasCssMatcher } = this._getLoadableChunks();
 
 		const withLoading =
 			_runtimeRequirements.has(RuntimeGlobals.ensureChunkHandlers) &&
@@ -185,32 +243,22 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 				",\n"
 			)
 		)}\n}`;
-		/**
-		 * @param {string} id expression naming the chunk whose stylesheet is wanted
-		 * @returns {string} expression building its url at runtime
-		 */
-		const runtimeCssUrl = (id) =>
-			`${RuntimeGlobals.publicPath} + ${RuntimeGlobals.getChunkCssFilename}(${id})`;
 		// The url is read through a thunk so a runtime carrying many stylesheets builds
 		// only the one it loads.
 		/**
 		 * @param {string} id expression naming the chunk whose stylesheet is wanted
 		 * @returns {string} expression evaluating to its url
 		 */
-		const cssUrl = (id) => {
-			if (!cssUrls) return runtimeCssUrl(id);
-			// An id the incomplete map lacks still resolves through the runtime lookup,
-			// which the plugin kept required for exactly this case.
-			return cssUrls.complete
-				? `cssUrls[${id}]()`
-				: `(cssUrls[${id}] ? cssUrls[${id}]() : ${runtimeCssUrl(id)})`;
-		};
+		const cssUrl = (id) =>
+			cssUrls === null
+				? `${RuntimeGlobals.publicPath} + ${RuntimeGlobals.getChunkCssFilename}(${id})`
+				: `cssUrls[${id}]()`;
 		return Template.asString([
 			...(cssUrls
 				? [
 						`${cst} cssUrls = {\n${Template.indent(
 							Array.from(
-								cssUrls.urls,
+								cssUrls,
 								([id, url]) =>
 									`${JSON.stringify(String(id))}: ${runtimeTemplate.returningFunction(url)}`
 							).join(",\n")
@@ -395,6 +443,10 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 																		]
 																	)});`
 																]
+																// No fs to import, or a url `readFile` rejects on sight (a CDN public
+																// path): nothing to collect, which is what a missing file already means.
+															)}).catch(${runtimeTemplate.expressionFunction(
+																"loadingEnded({ type: 'load' })"
 															)});`
 														]),
 														"}"
@@ -552,6 +604,7 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 											Template.indent([
 												// node SSR: refresh the server style registry from the re-emitted CSS instead of touching the DOM
 												`${cst} cssRemovedChunks = css && css.r;`,
+												`${cst} cssNames = css && css.n;`,
 												`${cst} registry = ${runtimeTemplate.cssServerStyleRegistry()};`,
 												`chunkIds.forEach(${runtimeTemplate.basicFunction(
 													"chunkId",
@@ -561,7 +614,7 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 															"cssRemovedChunks",
 															"indexOf(chunkId)"
 														)} >= 0) { delete registry[key]; return; }`,
-														`${cst} url = ${RuntimeGlobals.publicPath} + ${RuntimeGlobals.getChunkCssFilename}(chunkId);`,
+														`${cst} url = ${RuntimeGlobals.publicPath} + (cssNames && cssNames[chunkId] || ${RuntimeGlobals.getChunkCssFilename}(chunkId));`,
 														`promises.push(Promise.all([import('fs'), import('url')]).then(${runtimeTemplate.basicFunction(
 															"[{ readFile }, { URL }]",
 															[
@@ -594,9 +647,14 @@ class CssLoadingRuntimeModule extends RuntimeModule {
 								"applyHandlers.push(applyHandler);",
 								"// Read CSS removed chunks from update manifest",
 								`${cst} cssRemovedChunks = css && css.r;`,
+								// The name map this runtime holds is refreshed by the update chunk, which
+								// has not run yet, so a name that moved is read off the manifest.
+								`${cst} cssNames = css && css.n;`,
 								`chunkIds.forEach(${runtimeTemplate.basicFunction("chunkId", [
-									`${cst} url = ${RuntimeGlobals.publicPath} + ${RuntimeGlobals.getChunkCssFilename}(chunkId);`,
-									`${cst} oldTag = loadStylesheet(chunkId, url);`,
+									`${cst} url = ${RuntimeGlobals.publicPath} + (cssNames && cssNames[chunkId] || ${RuntimeGlobals.getChunkCssFilename}(chunkId));`,
+									// The stylesheet in the document was loaded at the name this runtime
+									// still holds, so that is the name it is found by.
+									`${cst} oldTag = loadStylesheet(chunkId, ${RuntimeGlobals.publicPath} + ${RuntimeGlobals.getChunkCssFilename}(chunkId));`,
 									`if(!oldTag && !${withHmr} ) return;`,
 									"// Skip if CSS was removed",
 									`if(${runtimeTemplate.optionalChaining(

package/lib/css/CssModule.js

@@ -197,7 +197,7 @@ class CssModule extends NormalModule {
 			parserOptions: /** @type {EXPECTED_ANY} */ (null),
 			generator: /** @type {EXPECTED_ANY} */ (null),
 			generatorOptions: /** @type {EXPECTED_ANY} */ (null),
-			resolveOptions: /** @type {EXPECTED_ANY} */ (null),
+			resolveOptions: undefined,
 			cssLayer: /** @type {EXPECTED_ANY} */ (null),
 			supports: /** @type {EXPECTED_ANY} */ (null),
 			media: /** @type {EXPECTED_ANY} */ (null),

package/lib/css/CssModulesPlugin.js

@@ -772,12 +772,13 @@ class CssModulesPlugin {
 						// A baked url carries where the stylesheet is, so neither the public
 						// path nor the name lookup is read for it. Asked exactly as the
 						// loading runtime module asks, so the two always agree.
-						const baked = compilation.runtimeTemplate.analyzableCssChunkUrls(
-							chunk,
-							chunkGraph,
-							set
-						);
-						if (baked === null || !baked.complete) {
+						if (
+							compilation.runtimeTemplate.analyzableCssChunkUrls(
+								chunk,
+								chunkGraph,
+								set
+							) === null
+						) {
 							set.add(RuntimeGlobals.publicPath);
 							set.add(RuntimeGlobals.getChunkCssFilename);
 						}

package/lib/css/CssParser.js

@@ -207,6 +207,10 @@ const VALUE_AS_ALIAS = /\s+as\s+/;
 // `@value name value`: end of the name run (first non-space followed by space).
 const VALUE_NAME_BOUNDARY = /\S\s/;
 const ONLY_WHITESPACE = /^\s+$/;
+// A `@value` whose whole value is one `.class` / `#id`, the only shape whose
+// localizable ident is knowable without re-parsing the substitution.
+const SIMPLE_CLASS_OR_ID_VALUE =
+	/^([.#])(-?(?:[A-Za-z_]|[\u0080-\uFFFF])(?:[\w-]|[\u0080-\uFFFF])*)$/;
 // Relative request prefix (`./` or `../`) — `isSelfReferenceRequest` per `from`.
 const RELATIVE_REQUEST = /^\.{1,2}\//;
 
@@ -994,6 +998,19 @@ class CssParser extends Parser {
 			d.entries.push(cssExportEntries.length);
 		};
 
+		// Start offsets of the idents an at-rule's own prelude handler already
+		// replaced: two deps over one range concatenate rather than the later winning.
+		/** @type {Set<number>} */
+		const handledPreludeIdents = new Set();
+		// Only a prelude is walked by both a handler and the value visitors, so
+		// nothing outside one pays for the bookkeeping.
+		let trackingPreludeIdents = false;
+
+		// Start offsets of `@value`-named dashed idents a `var()` handler already
+		// scoped; only those are walked twice, so plain dashed idents cost nothing.
+		/** @type {Set<number>} */
+		const handledDashedValueIdents = new Set();
+
 		// All `:export`-style exports are collected into a single
 		// `CssIcssExportDependency` per module (emitted at parse end) instead of one
 		// `Dependency` per export — far fewer retained objects on CSS-heavy builds.
@@ -1024,6 +1041,7 @@ class CssParser extends Parser {
 			exportMode = CssIcssExportDependency.EXPORT_MODE.REPLACE,
 			exportType = CssIcssExportDependency.EXPORT_TYPE.NORMAL
 		) => {
+			if (trackingPreludeIdents && range) handledPreludeIdents.add(range[0]);
 			// Flat location numbers — the nested loc objects were the parser's
 			// hottest allocation (3 objects per exported name).
 			cssExportEntries.push({
@@ -1556,13 +1574,15 @@ class CssParser extends Parser {
 		};
 
 		/**
-		 * Emit a `CssIcssSymbolDependency` rewrite for an ident resolving to an `@value`-defined ICSS symbol (source-order semantics hold since the walker handles each `@value` before later references).
+		 * Emit a `CssIcssSymbolDependency` rewrite for an ident resolving to an `@value`-defined ICSS symbol (source-order semantics hold since the walker handles each `@value` before later references). A no-op for an ident an at-rule's own prelude handler already replaced.
 		 * @param {string} name ICSS symbol name
 		 * @param {number} start start position
 		 * @param {number} end end position
 		 * @returns {number} `end` of the rewritten ident range
 		 */
 		const emitICSSSymbol = (name, start, end) => {
+			if (handledPreludeIdents.has(start)) return end;
+			if (trackingPreludeIdents) handledPreludeIdents.add(start);
 			const def =
 				/** @type {IcssDefinition} */
 				(icssDefinitions.get(name));
@@ -1580,6 +1600,37 @@ class CssParser extends Parser {
 			return end;
 		};
 
+		/**
+		 * The `.class` / `#id` a locally defined `@value` stands for, when its whole value is exactly one of those. Undefined for an imported value or any richer selector, which stay a plain textual substitution.
+		 * @param {string} name `@value` name used where a selector is expected
+		 * @returns {["." | "#", string] | undefined} the selector's prefix and the ident to localize
+		 */
+		const localizableSelectorValue = (name) => {
+			const def = icssDefinitions.get(name);
+			if (!def || def.importName || typeof def.value !== "string") {
+				return undefined;
+			}
+			const match = SIMPLE_CLASS_OR_ID_VALUE.exec(def.value.trim());
+			return match
+				? [/** @type {"." | "#"} */ (match[1]), match[2]]
+				: undefined;
+		};
+
+		/**
+		 * The dashed ident a locally defined `@value` stands for, without its `--` prefix, when its whole value is exactly one. Undefined for an imported value or any richer value, which stay a plain textual substitution.
+		 * @param {string} name `@value` name used where a dashed ident is expected
+		 * @returns {string | undefined} the name to localize, sans `--`
+		 */
+		const localizableDashedValue = (name) => {
+			if (icssDefinitions.size === 0) return undefined;
+			const def = icssDefinitions.get(name);
+			if (!def || def.importName || typeof def.value !== "string") {
+				return undefined;
+			}
+			const value = def.value.trim();
+			return isDashedIdentifier(value) ? value.slice(2) : undefined;
+		};
+
 		/**
 		 * Process a `local(...)` / `global(...)` pseudo-function: strip the call (and a leading legacy `:`) via a presentational dep, then emit `local()`'s inner top-level idents as ICSS exports.
 		 * @param {FunctionNode} fn parsed local/global function node
@@ -1740,12 +1791,12 @@ class CssParser extends Parser {
 				: unescapeRange(identStart, identEnd).slice(2);
 
 		/**
-		 * Emit the ICSS export declaring this module exports the given custom property.
-		 * @param {number} identStart start of the `--<name>` ident
+		 * Emit the ICSS export declaring this module exports the given custom property, naming it explicitly rather than reading it back from the replaced range. A `@value` standing in for a dashed ident is scoped under the name it resolves to, not the name written at the use site.
+		 * @param {string} identifier custom property name, sans `--`
+		 * @param {number} identStart start of the replaced ident
 		 * @param {number} identEnd end of the ident (exclusive)
 		 */
-		const emitDashedIdentExport = (identStart, identEnd) => {
-			const identifier = dashedIdentName(identStart, identEnd);
+		const emitNamedDashedIdentExport = (identifier, identStart, identEnd) => {
 			const { line: sl, column: sc } = locConverter.get(identStart);
 			const { line: el, column: ec } = locConverter.get(identEnd);
 			recordDeclaration(identifier, "custom property", sl, sc);
@@ -1763,6 +1814,19 @@ class CssParser extends Parser {
 			);
 		};
 
+		/**
+		 * Emit the ICSS export declaring this module exports the given custom property.
+		 * @param {number} identStart start of the `--<name>` ident
+		 * @param {number} identEnd end of the ident (exclusive)
+		 */
+		const emitDashedIdentExport = (identStart, identEnd) => {
+			emitNamedDashedIdentExport(
+				dashedIdentName(identStart, identEnd),
+				identStart,
+				identEnd
+			);
+		};
+
 		/**
 		 * Emit `--<name> from "<path>"` as an ICSS import + export, stripping ` from "<path>"` so the runtime sees just `--<name>` (dep ranges end at `sourceEnd - 1`, the closing quote).
 		 * @param {number} identStart start of the `--<name>` ident
@@ -1846,7 +1910,16 @@ class CssParser extends Parser {
 
 			const identStart = A.start(identNode);
 			const identEnd = A.end(identNode);
-			if (!rangeIsDashedIdentifier(input, identStart, identEnd)) return;
+			if (!rangeIsDashedIdentifier(input, identStart, identEnd)) {
+				// `var(v)` where `@value v: --foo` names the same property `var(--foo)`
+				// does, so it is scoped here rather than substituted verbatim.
+				const dashedName = localizableDashedValue(A.value(identNode));
+				if (dashedName !== undefined) {
+					handledDashedValueIdents.add(identStart);
+					emitNamedDashedIdentExport(dashedName, identStart, identEnd);
+				}
+				return;
+			}
 
 			let j = identIdx + 1;
 			while (j < fv.length && A.type(fv[j]) === NodeType.Whitespace) {
@@ -2351,12 +2424,52 @@ class CssParser extends Parser {
 						break;
 					}
 					case NodeType.Ident: {
-						// ICSS rewrite for a bare `@value`-defined ident used as a type-style selector; only worth the slice when definitions exist.
+						// A bare `@value`-defined ident stands in for a selector; only worth the slice when definitions exist.
 						if (icssDefinitions.size === 0) break;
 						const ident = A.value(v);
-						if (!isDashedIdentifier(ident) && icssDefinitions.has(ident)) {
-							emitICSSSymbol(ident, A.start(v), A.end(v));
+						if (isDashedIdentifier(ident) || !icssDefinitions.has(ident)) {
+							break;
+						}
+						const identStart = A.start(v);
+						const identEnd = A.end(v);
+						// A value naming one class / id is localized like the selector the
+						// author would have written; anything else is substituted verbatim.
+						const localizable =
+							segmentMode === "local"
+								? localizableSelectorValue(ident)
+								: undefined;
+						if (localizable === undefined) {
+							emitICSSSymbol(ident, identStart, identEnd);
+							break;
+						}
+						const [prefix, localName] = localizable;
+						const { line: sl, column: sc } = locConverter.get(identStart);
+						const { line: el, column: ec } = locConverter.get(identEnd);
+						module.addPresentationalDependency(
+							new ConstDependency(prefix, [identStart, identStart])
+						);
+						recordDeclaration(
+							localName,
+							prefix === "." ? "class" : "id",
+							sl,
+							sc
+						);
+						addCssExport(
+							sl,
+							sc,
+							el,
+							ec,
+							localName,
+							getReexport(localName),
+							[identStart, identEnd],
+							true,
+							CssIcssExportDependency.EXPORT_MODE.ONCE
+						);
+						if (prefix === ".") {
+							currentRule.hasLocalAnchor = true;
+							currentRule.localIdentifiers.push(localName);
 						}
+						pure.markLocal();
 						break;
 					}
 					default:
@@ -4074,6 +4187,10 @@ class CssParser extends Parser {
 					// truncates back to this length (no per-rule copy).
 					const savedLocalIdentifierCount = currentRule.localIdentifiers.length;
 					const name = `@${toLowerCaseIfNeeded(A.unescapedName(at))}`;
+					// The dispatch below is the only place a prelude is rewritten ahead
+					// of the value visitors, so the marks live exactly as long as it.
+					if (handledPreludeIdents.size !== 0) handledPreludeIdents.clear();
+					trackingPreludeIdents = true;
 					switch (name) {
 						case "@namespace": {
 							this._emitWarning(
@@ -4173,6 +4290,7 @@ class CssParser extends Parser {
 							)
 						);
 					}
+					trackingPreludeIdents = false;
 
 					// Prelude value-visitor context; AST-handled at-rules emit their own deps so they're excluded from the local() / global() / ICSS walks.
 					const effectiveLocalMode = isEffectivelyLocal();
@@ -4777,9 +4895,24 @@ class CssParser extends Parser {
 				if (dashed.counterArgs) return;
 				// Deferred: only the ICSS probe needs the ident's string value.
 				const identValue = A.value(node);
-				if (icssDefinitions.has(identValue)) {
-					emitICSSSymbol(identValue, identStart, identEnd);
+				if (!icssDefinitions.has(identValue)) return;
+				// Already scoped by the enclosing `var()` handler.
+				if (
+					handledDashedValueIdents.size !== 0 &&
+					handledDashedValueIdents.has(identStart)
+				) {
+					return;
+				}
+				// A `@value` resolving to a dashed ident sits where `--foo` would be
+				// scoped, so it is localized rather than substituted verbatim.
+				if (dashedActive && dashed.emit) {
+					const dashedName = localizableDashedValue(identValue);
+					if (dashedName !== undefined) {
+						emitNamedDashedIdentExport(dashedName, identStart, identEnd);
+						return;
+					}
 				}
+				emitICSSSymbol(identValue, identStart, identEnd);
 			}
 		};
 		// `as` selects the top-level production (§5.3): a `style` attribute is a

package/lib/css/CssServerStylesRuntimeModule.js

@@ -26,6 +26,15 @@ class CssServerStylesRuntimeModule extends RuntimeModule {
 		return false;
 	}
 
+	/**
+	 * The `[handlerMap, key]` pairs this module installs onto a chunk handler map
+	 * such as `__webpack_require__.f`, or `null` where it cannot name them.
+	 * @returns {[string, string][] | null} installed chunk handlers (do not mutate)
+	 */
+	getInstalledChunkHandlers() {
+		return RuntimeModule.NO_CHUNK_HANDLERS;
+	}
+
 	/**
 	 * Generates runtime code for this runtime module.
 	 * @returns {string | null} runtime code

package/lib/css/cssMinify.js

@@ -31,9 +31,9 @@
  * imported at module scope: `minimizer-webpack-plugin` ships this function to its
  * worker pool as source (a top-level import wouldn't survive), and `require("webpack")`
  * re-resolves in the worker — via the installed package, or the dev self-link.
- * @param {{ [file: string]: string }} input a single `{ filename: code }` entry
+ * @param {{ [file: string]: string | Buffer }} input a single `{ filename: code }` entry; a `Buffer` is read as UTF-8
  * @param {object=} sourceMap the asset's input source map — the plugin chains it onto the map returned here, so it isn't read directly
- * @param {{ as?: "stylesheet" | "block-contents", environment?: CssEnvironment, convertLengthUnits?: boolean, rewriteCustomProperties?: boolean, renderEmbeddedSource?: AsyncEmbeddedSourceRenderer } & CssTransformOptions=} minimizerOptions minimizer options — `environment` carries the target's CSS abilities (see `output.environment`), so a spelling the target cannot read is not reached for; the rest is `optimization.minimize.css` (e.g. `convertLengthUnits`, and the per-transform switches). `renderEmbeddedSource` minifies source this stylesheet embeds, and may be asynchronous: one parse serves both it and the output
+ * @param {{ as?: "stylesheet" | "block-contents", environment?: CssEnvironment, convertLengthUnits?: boolean, mergeDistantRules?: boolean, rewriteCustomProperties?: boolean, unusedSymbols?: string[], pseudoClasses?: { [name: string]: string }, renderEmbeddedSource?: AsyncEmbeddedSourceRenderer } & CssTransformOptions=} minimizerOptions minimizer options — `environment` carries the target's CSS abilities (see `output.environment`), so a spelling the target cannot read is not reached for; the rest is `optimization.minimize.css` (e.g. `convertLengthUnits`, and the per-transform switches). `renderEmbeddedSource` minifies source this stylesheet embeds, and may be asynchronous: one parse serves both it and the output
  * @returns {Promise<{ code: string, map?: SourceMap, warnings?: (Error | string)[], errors?: (Error | string)[] }>} the minified CSS, its input->output source map (one anchor for the whole of a `block-contents` print, which is emitted as one piece), and what a renderer reported over what this embeds
  */
 const cssMinify = async (input, sourceMap, minimizerOptions = {}) => {
@@ -81,7 +81,9 @@ const cssMinify = async (input, sourceMap, minimizerOptions = {}) => {
 		embeddedText,
 		pickTransforms
 	} = webpack.css.syntax;
-	const [[file, code]] = Object.entries(input);
+	const [[file, given]] = Object.entries(input);
+	// The plugin hands a text minifier a string; the type admits an image's bytes.
+	const code = typeof given === "string" ? given : given.toString("utf8");
 	// `process` parses once, and with `mode: "minify"` the same walk also prints
 	// the safely minified serialization — no second parse. Naming the input with
 	// `source` / `content` is what asks for the map, which the plugin composes
@@ -90,7 +92,10 @@ const cssMinify = async (input, sourceMap, minimizerOptions = {}) => {
 		as,
 		environment,
 		convertLengthUnits,
+		mergeDistantRules,
 		rewriteCustomProperties,
+		unusedSymbols,
+		pseudoClasses,
 		renderEmbeddedSource
 	} = minimizerOptions;
 	// One set of options, handed to the print. `as` names the production: a
@@ -103,7 +108,10 @@ const cssMinify = async (input, sourceMap, minimizerOptions = {}) => {
 		content: code,
 		environment,
 		convertLengthUnits,
+		mergeDistantRules,
 		rewriteCustomProperties,
+		unusedSymbols,
+		pseudoClasses,
 		// The per-transform switches stand beside those rather than nested in
 		// them, so a config names one the way it names `convertLengthUnits`;
 		// `pickTransforms` is what knows which names those are.