webpack 5.110.2 → 5.111.0

package/lib/html/htmlMinify.js

@@ -5,7 +5,8 @@
 
 "use strict";
 
-/** @import { DeferredEmbeddedSource, HtmlPrintOptions } from "../html/syntax" */
+/** @import { HtmlPrintOptions } from "../html/syntax" */
+/** @import { CssEnvironment } from "../css/syntax" */
 
 /**
  * What a renderer made of one embedded body: the minified text, and anything it
@@ -32,9 +33,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 {(RawSourceMap | undefined)=} sourceMap input source map (unused: safe serialize keeps positions token-coarse, so no map is produced yet)
- * @param {Omit<HtmlPrintOptions, "renderEmbeddedSource" | "deferEmbeddedSource"> & { css?: { convertLengthUnits?: boolean, rewriteCustomProperties?: boolean }, minifyConditionalComments?: boolean, minifySrcdoc?: boolean, renderEmbeddedSource?: AsyncEmbeddedSourceRenderer }=} minimizerOptions minimizer options — `environment` and `css` (`optimization.minimize.css`, whole) reach the CSS minifier this runs over inline CSS; the rest is `optimization.minimize.html`. The two stand apart rather than merged: both languages name a `quotes` and a `comments`, and one flat object would hand each the other's answer. `renderEmbeddedSource` minifies source this document embeds and may be asynchronous — one parse serves both it and the output — and `minifySrcdoc` takes an `<iframe srcdoc>` back off it, since it minifies one already
+ * @param {Omit<HtmlPrintOptions, "renderEmbeddedSource" | "deferEmbeddedSource"> & { environment?: CssEnvironment, css?: { convertLengthUnits?: boolean, rewriteCustomProperties?: boolean, unusedSymbols?: string[], pseudoClasses?: { [name: string]: string } }, minifyConditionalComments?: boolean, renderEmbeddedSource?: AsyncEmbeddedSourceRenderer }=} minimizerOptions minimizer options — `environment` and `css` (`optimization.minimize.css`, whole) reach the CSS minifier this runs over inline CSS; the rest is `optimization.minimize.html`. The two stand apart rather than merged: both languages name a `quotes` and a `comments`, and one flat object would hand each the other's answer. `renderEmbeddedSource` minifies source this document embeds and may be asynchronous — one parse serves both it and the output. What it declines this minifies itself, for the languages webpack ships a minifier for
  * @returns {Promise<{ code: string, warnings?: (Error | string)[], errors?: (Error | string)[] }>} the minified HTML, and what a renderer reported over what it embeds
  */
 const htmlMinify = async (input, sourceMap, minimizerOptions = {}) => {
@@ -43,21 +44,20 @@ const htmlMinify = async (input, sourceMap, minimizerOptions = {}) => {
 		require(/** @type {string} */ ("webpack"))
 	);
 
-	// TODO widen the value rewrites the switches below name: a boolean attribute
-	// spelled any other way than its own name, an enumerated value the spec does
-	// not name.
+	// TODO widen the value rewrites the switches below name: an enumerated
+	// value the spec does not name.
 	const {
 		askEmbeddedRenderer,
+		builtinEmbeddedRenderer,
 		collectEmbeddedDiagnostics,
 		embeddedText,
 		SourceProcessor,
 		NodeType,
-		NS_HTML,
-		decodeEntities,
-		escapeAttribute,
 		pickTransforms
 	} = webpack.html.syntax;
-	const [[, code]] = Object.entries(input);
+	const [[, 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");
 	// The nested CSS minifier gets the abilities and options a `.css` asset
 	// gets, or the inline copy of a declaration would disagree with it.
 	const {
@@ -65,37 +65,39 @@ const htmlMinify = async (input, sourceMap, minimizerOptions = {}) => {
 		css = {},
 		collapseWhitespace,
 		mergeStyles,
+		mergeScripts,
 		removeEmptyAttributes,
 		removeEmptyElements,
 		removeRedundantAttributes,
 		minifyConditionalComments,
-		minifySrcdoc,
 		sortAttributes,
 		sortTokenLists,
 		removeImpliedTags,
 		renderEmbeddedSource
 	} = minimizerOptions;
-	// A `<iframe srcdoc>` the pre-pass below owns is not offered, or the same
-	// document would be minified twice — once each, and the pre-pass keeps the
-	// delimiter and reaches a value written bare, which the printer cannot.
-	const ownsSrcdoc = Boolean(minifySrcdoc);
 	// One list for the whole run: a nested document reaches this same collector,
 	// so what a renderer reports inside an `<iframe srcdoc>` is reported once at
 	// the top rather than lost at the level that heard it.
 	/** @type {EmbeddedSourceResult[]} */
 	const reported = [];
+	// Webpack's own renderer, handed the CSS minifier's options so an inline
+	// declaration agrees with the `.css` asset; each language picks its switches.
+	const builtin = builtinEmbeddedRenderer({
+		environment,
+		convertLengthUnits: css.convertLengthUnits,
+		rewriteCustomProperties: css.rewriteCustomProperties,
+		unusedSymbols: css.unusedSymbols,
+		pseudoClasses: css.pseudoClasses,
+		transforms: webpack.css.syntax.pickTransforms(css)
+	});
 	// One set of options, handed to the document pass and to each conditional
 	// comment's body below.
 	const printOptions = {
 		mode: /** @type {"minify"} */ ("minify"),
-		environment,
-		convertLengthUnits: css.convertLengthUnits,
-		rewriteCustomProperties: css.rewriteCustomProperties,
-		// Each language picks its own switches out of its own options object.
-		cssTransforms: webpack.css.syntax.pickTransforms(css),
 		transforms: pickTransforms(minimizerOptions),
 		collapseWhitespace,
 		mergeStyles,
+		mergeScripts,
 		removeEmptyAttributes,
 		removeEmptyElements,
 		removeRedundantAttributes,
@@ -106,27 +108,46 @@ const htmlMinify = async (input, sourceMap, minimizerOptions = {}) => {
 	// Handed each body the print offers, with what it reported kept: how the
 	// element or attribute around one is written is decided from the answer, and
 	// a body declined or thrown on is spelled as an untapped run spells it.
-	const renderer =
-		renderEmbeddedSource === undefined
-			? undefined
-			: (/** @type {string} */ _source, /** @type {EXPECTED_ANY} */ hole) =>
-					askEmbeddedRenderer(renderEmbeddedSource, hole, reported).then(
-						embeddedText
-					);
+	// A caller's renderer is asked first; whatever it declines this minifies
+	// itself, for the languages webpack ships a minifier for.
+	const renderer = async (
+		/** @type {string} */ source,
+		/** @type {EXPECTED_ANY} */ hole
+	) => {
+		if (renderEmbeddedSource !== undefined) {
+			const answered = embeddedText(
+				await askEmbeddedRenderer(renderEmbeddedSource, hole, reported)
+			);
+
+			if (typeof answered === "string") return answered;
+		}
+
+		// Webpack's own answers for what the caller's left: CSS and JSON, and a
+		// nested document, which is a document minified the same way.
+		const own = builtin(source, hole);
+		if (own !== undefined) return own;
+		return hole.type === "html" ? minifyDocument(source) : undefined;
+	};
 	/**
 	 * @param {string} text a whole document
 	 * @returns {Promise<string>} the same document, printed
 	 */
-	const printDocument = async (text) =>
-		(
+	const printDocument = async (text) => {
+		// The built-in renderer is synchronous, so with no caller's renderer only
+		// a nested document needs the async pass — and no `srcdoc`, none is there.
+		if (renderEmbeddedSource === undefined && !/srcdoc/i.test(text)) {
+			return new SourceProcessor().process(text, {
+				...printOptions,
+				renderEmbeddedSource: builtin
+			}).code;
+		}
+		return (
 			await new SourceProcessor().processAsync(text, {
 				...printOptions,
-				// The pre-pass below minifies the document an `<iframe srcdoc>` holds,
-				// so one is not offered here as well.
-				deferSrcdoc: !ownsSrcdoc,
 				renderEmbeddedSource: renderer
 			})
 		).code;
+	};
 
 	// Recursion goes through this local name, never the module's own: the plugin
 	// ships this function to its workers as source, where that binding is absent.
@@ -140,94 +161,49 @@ const htmlMinify = async (input, sourceMap, minimizerOptions = {}) => {
 		// Put back into the source, not the output: the printer respells an
 		// attribute value, so the recorded text is not what the output holds.
 		let source = text;
-		// Both are markup this parse cannot start a second one over, so both are
-		// located in one walk and spliced afterwards. Their ranges never nest: a
-		// `srcdoc` is an attribute value and a conditional comment's body is a
-		// comment, neither of which this parse reads as markup.
-		const wantsSrcdoc = Boolean(minifySrcdoc) && /srcdoc\s*=/i.test(source);
+		// A conditional comment's body is markup this parse cannot start a second
+		// one over, so each is located in a walk and spliced afterwards.
 		const wantsConditional =
 			Boolean(minifyConditionalComments) && /<!--\[if\s/i.test(source);
 
-		if (wantsSrcdoc || wantsConditional) {
-			/** @type {{ start: number, end: number, srcdoc: boolean, value: string }[]} */
+		if (wantsConditional) {
+			/** @type {{ start: number, end: number, value: string }[]} */
 			const found = [];
 			/** @type {{ [type: number]: (path: EXPECTED_ANY) => void }} */
 			const visitors = {};
 
-			if (wantsSrcdoc) {
-				visitors[NodeType.Element] = (path) => {
-					// An `<iframe>` in foreign content is an SVG or MathML element that
-					// happens to share the name, and its `srcdoc` is not this attribute.
-					if (path.tagName() !== "iframe" || path.namespace() !== NS_HTML) {
-						return;
-					}
-
-					for (const attribute of path.attributes()) {
-						if (attribute.name !== "srcdoc" || attribute.value === "") continue;
-
-						found.push({
-							start: attribute.valueStart,
-							end: attribute.valueEnd,
-							srcdoc: true,
-							value: attribute.value
-						});
-					}
-				};
-			}
+			visitors[NodeType.Comment] = (path) => {
+				const comment = path.source();
+				const opened = comment.indexOf("]>");
+				const closes = comment.lastIndexOf("<![endif]");
 
-			if (wantsConditional) {
-				visitors[NodeType.Comment] = (path) => {
-					const comment = path.source();
-					const opened = comment.indexOf("]>");
-					const closes = comment.lastIndexOf("<![endif]");
+				if (
+					!/^<!--\[if\s/i.test(comment) ||
+					opened === -1 ||
+					closes <= opened
+				) {
+					return;
+				}
 
-					if (
-						!/^<!--\[if\s/i.test(comment) ||
-						opened === -1 ||
-						closes <= opened
-					) {
-						return;
-					}
+				const start = path.start() + opened + 2;
+				const end = path.start() + closes;
 
-					const start = path.start() + opened + 2;
-					const end = path.start() + closes;
-
-					found.push({
-						start,
-						end,
-						srcdoc: false,
-						value: comment.slice(opened + 2, closes)
-					});
-				};
-			}
+				found.push({
+					start,
+					end,
+					value: comment.slice(opened + 2, closes)
+				});
+			};
 
 			new SourceProcessor().use(visitors).process(source, {});
-			// An element's attributes are visited where the element is, so the two
-			// kinds do not arrive interleaved by position on their own.
-			found.sort((a, b) => a.start - b.start);
 
 			// Back to front, so an earlier splice does not move a later range.
 			for (let i = found.length - 1; i >= 0; i--) {
-				const { start, end, srcdoc, value } = found[i];
+				const { start, end, value } = found[i];
 				// Sequential: a later splice must not move an earlier range.
+				const inner = await minifyDocument(value);
 
-				const inner = await minifyDocument(
-					srcdoc ? decodeEntities(value, true) : value
-				);
-				let written = inner;
-
-				if (srcdoc) {
-					// A document is not something an unquoted value can hold — a space
-					// or a `>` in it would end the attribute — so one written bare gets
-					// quotes.
-					const delimiter = source.charCodeAt(start - 1);
-					const quoted = delimiter === 34 || delimiter === 39;
-					const escaped = escapeAttribute(inner, quoted ? delimiter : 34, true);
-
-					written = quoted ? escaped : `"${escaped}"`;
-				}
-
-				source = `${source.slice(0, start)}${written}${source.slice(end)}`;
+				source = `${source.slice(0, start)}${inner}${source.slice(end)}`;
 			}
 		}
 		// `process` parses once, and with `mode: "minify"` its walk also prints the
@@ -255,24 +231,19 @@ htmlMinify.getTypes = () => ["html"];
 
 /**
  * The languages this can offer a caller through `renderEmbeddedSource` — an
- * inline `<style>`, a `<script>`, an `<svg>` subtree and the document an
- * `<iframe srcdoc>` holds, less the one `minifySrcdoc` keeps to itself. A
- * `style=""` is not among them: how the attribute is written is decided by
- * reading the minified text back, so it stays with the built-in CSS minifier,
- * which is webpack's own `cssMinify`.
- * @param {{ minifySrcdoc?: boolean }=} minimizerOptions the options this will run with
+ * inline `<style>`, a `<script>`, every event handler attribute (as the
+ * function body it is), an `<svg>` subtree and the document an
+ * `<iframe srcdoc>` holds, and every `style=""` as the block's contents it is.
  * @returns {string[]} the languages
  */
-htmlMinify.getEmbeddedTypes = (minimizerOptions = {}) => {
+htmlMinify.getEmbeddedTypes = () => {
 	/** @type {string[]} */
 	const languages =
 		/** @type {typeof import("../index")} */
 		// eslint-disable-next-line import/no-extraneous-dependencies -- webpack self-require, as the body does
 		require(/** @type {string} */ ("webpack")).html.syntax.EMBEDDED_LANGUAGES;
 
-	return minimizerOptions.minifySrcdoc
-		? languages.filter((language) => language !== "html")
-		: languages;
+	return languages;
 };
 
 // When several minify functions share one `minimizer-webpack-plugin` instance,