webpack 5.111.1 → 5.112.1

package/lib/html/builtinEmbeddedRenderer.js

@@ -5,23 +5,24 @@
 
 "use strict";
 
-const { CSS_TYPE } = require("../ModuleSourceTypeConstants");
+const { SourceProcessor: CssSourceProcessor } = require("../css/syntax");
+const { CSS_TYPE } = require("../module/ModuleSourceTypeConstants");
+const { JSON_TYPE, SVG_TYPE } = require("../util/dataURL");
+const { SourceProcessor: HtmlSourceProcessor } = require("./syntax");
 
-/** @import { CssProcessOptions } from "../css/syntax" */
-/** @import { EmbeddedSourceRenderer } from "./syntax" */
+/** @import { CssPrintOptions, CssProcessOptions } from "../css/syntax-parser" */
+/** @import { EmbeddedSourceRenderer } from "./syntax-printer" */
 
 /**
  * What this minifies inline CSS with: the CSS minifier's own options, so an
  * inline declaration is held to the rules a `.css` asset is.
- * @typedef {Pick<CssProcessOptions, "environment" | "convertLengthUnits" | "rewriteCustomProperties" | "transforms" | "unusedSymbols" | "pseudoClasses">} BuiltinEmbeddedRendererOptions
+ * @typedef {Pick<CssProcessOptions, "environment" | "convertLengthUnits" | "convertApproximateColors" | "dropOverriddenDeclarations" | "rewriteCustomProperties" | "transforms" | "unusedSymbols" | "pseudoClasses"> & BuiltinSvgOptions} BuiltinEmbeddedRendererOptions
  */
 
-// Both are loaded on first render rather than at module load: a document that
-// embeds no CSS and no JSON pays for neither.
-/** @type {typeof import("../css/syntax") | undefined} */
-let _cssSyntax;
-/** @type {typeof import("./syntax") | undefined} */
-let _htmlSyntax;
+/**
+ * @typedef {object} BuiltinSvgOptions
+ * @property {boolean=} svg minify an SVG `data:` URL as the `.svg` assets are, wherever that is shorter (default false)
+ */
 
 /**
  * Strip the whitespace between a JSON body's tokens, every literal copied byte
@@ -63,36 +64,58 @@ const stripJsonWhitespace = (json) => {
 
 /**
  * The renderer webpack ships for what a document embeds: its own CSS minifier
- * for a `<style>` or `style=""` and `stripJsonWhitespace` for JSON, declining
- * every other language. A caller passes it where it has no renderer of its own,
- * or behind one for the languages that one declines — the HTML printer minifies
- * none of this itself.
- * @param {BuiltinEmbeddedRendererOptions=} options the CSS minifier's options, so an inline declaration is minified as the `.css` assets are
+ * for a `<style>` or `style=""`, `stripJsonWhitespace` for JSON and, with `svg`,
+ * the XML minifier for an SVG `data:` URL, declining every other language. A
+ * caller passes it where it has no renderer of its own, or behind one for the
+ * languages that one declines — the HTML printer minifies none of this itself.
+ * @param {BuiltinEmbeddedRendererOptions=} options the CSS minifier's options, so an inline declaration is minified as the `.css` assets are, and `svg`, whether an SVG `data:` URL is minified as the `.svg` assets are
  * @returns {EmbeddedSourceRenderer} the renderer
  */
 const builtinEmbeddedRenderer = (options = {}) => {
-	const { BLOCK_CONTENTS, JSON_TYPE } =
-		_htmlSyntax || (_htmlSyntax = require("./syntax"));
-	const sheet = { mode: /** @type {"minify"} */ ("minify"), ...options };
-	const block = { ...sheet, as: BLOCK_CONTENTS };
+	const { svg } = options;
+	// Built on first CSS render, so reading `options` (a lazy `transforms`
+	// included) waits until the CSS minifier loads.
+	/** @typedef {CssPrintOptions & { mode: "minify", as?: CssProcessOptions["as"] }} SheetOptions */
+	/** @type {SheetOptions | undefined} */
+	let sheet;
+	/** @type {SheetOptions | undefined} */
+	let block;
 	// A `style=""` repeats across a document far more often than it varies.
 	/** @type {Map<string, string>} */
 	const blocks = new Map();
-	return (source, info) => {
+	/** @type {EmbeddedSourceRenderer} */
+	const render = (source, info) => {
 		if (info.type === JSON_TYPE) return stripJsonWhitespace(source);
+		// Only a whole `.svg` document: an inline `<svg>` subtree is HTML's to print.
+		if (info.type === SVG_TYPE) {
+			return svg && info.as === undefined ? renderSvg(source) : undefined;
+		}
 		if (info.type !== CSS_TYPE) return undefined;
-		const isBlock = info.as === BLOCK_CONTENTS;
+		const isBlock = info.as === "block-contents";
 		if (isBlock) {
 			const memoized = blocks.get(source);
 			if (memoized !== undefined) return memoized;
 		}
-		const { SourceProcessor } =
-			_cssSyntax || (_cssSyntax = require("../css/syntax"));
 		let code;
 		try {
-			code = new SourceProcessor().process(
+			if (sheet === undefined) {
+				const { svg: _svg, ...cssOptions } = options;
+				sheet = {
+					mode: /** @type {"minify"} */ ("minify"),
+					...cssOptions,
+					// A stylesheet's own `url(data:image/svg+xml,…)`, which `renderSvg` answers.
+					renderEmbeddedSource: svg
+						? /** @type {EmbeddedSourceRenderer} */ (
+								(source, info) =>
+									info.type === SVG_TYPE ? renderSvg(source) : undefined
+							)
+						: undefined
+				};
+				block = { ...sheet, as: "block-contents" };
+			}
+			code = new CssSourceProcessor().process(
 				source,
-				isBlock ? block : sheet
+				/** @type {SheetOptions} */ (isBlock ? block : sheet)
 			).code;
 		} catch (_err) {
 			// Text the minifier cannot read is left as written, by declining.
@@ -101,6 +124,28 @@ const builtinEmbeddedRenderer = (options = {}) => {
 		if (isBlock) blocks.set(source, code);
 		return code;
 	};
+	/**
+	 * Minify an SVG document as the `.svg` assets are.
+	 * @param {string} source an SVG document a `data:` URL holds
+	 * @returns {string | undefined} it minified, or undefined where that is no shorter or it is not XML
+	 */
+	const renderSvg = (source) => {
+		let code;
+		try {
+			// `'` around an attribute, since the URL usually sits in `"` quotes.
+			code = new HtmlSourceProcessor().process(source, {
+				xml: true,
+				mode: "minify",
+				xmlQuote: "'",
+				renderEmbeddedSource: render
+			}).code;
+		} catch (_err) {
+			// Not well-formed, or offered while an HTML parse is running.
+			return undefined;
+		}
+		return code.length < source.length ? code : undefined;
+	};
+	return render;
 };
 
 module.exports.builtinEmbeddedRenderer = builtinEmbeddedRenderer;

package/lib/html/data.js

@@ -1588,7 +1588,7 @@ const QUIRKY_EXACT = new Set([
 ]);
 
 /**
- * Elements whose text children serialize literally, no escaping. `textarea` / `title` are escapable, so they are not here.
+ * Elements whose text children serialize literally, no escaping. `textarea` / `title` are escapable, so they are not here. `noscript` holds text only as a printed document is parsed, with scripting on.
  * @type {Set<string>}
  */
 const LITERAL_TEXT_PARENTS = new Set([
@@ -1598,6 +1598,7 @@ const LITERAL_TEXT_PARENTS = new Set([
 	"iframe",
 	"noembed",
 	"noframes",
+	"noscript",
 	"plaintext"
 ]);
 
@@ -1869,28 +1870,49 @@ const ENUMERATED_KEYWORDS = Object.assign(Object.create(null), {
 const INVALID_VALUE_DEFAULT_DIFFERS = new Set(["track kind"]);
 
 /**
- * Elements `removeEmptyElements` never drops: with no children and no attributes each is still doing its job, so an empty one is not a leftover.
+ * Elements `removeEmptyElements` may drop: with no children and no attributes each renders nothing and is read by nothing; every other element, a custom one included, is kept.
  * @type {Set<string>}
  */
-const EMPTY_ELEMENT_KEPT = new Set([
-	"canvas",
-	"dialog",
-	"meter",
-	"output",
-	"progress",
-	"slot",
-	"template",
-	"textarea",
-	"caption",
-	"col",
-	"colgroup",
-	"table",
-	"tbody",
-	"td",
-	"tfoot",
-	"th",
-	"thead",
-	"tr"
+const EMPTY_ELEMENT_DROPPED = new Set([
+	"a",
+	"abbr",
+	"address",
+	"article",
+	"aside",
+	"b",
+	"bdi",
+	"bdo",
+	"cite",
+	"code",
+	"data",
+	"del",
+	"dfn",
+	"div",
+	"em",
+	"footer",
+	"head",
+	"header",
+	"i",
+	"ins",
+	"kbd",
+	"label",
+	"main",
+	"mark",
+	"nav",
+	"s",
+	"samp",
+	"script",
+	"section",
+	"small",
+	"span",
+	"strong",
+	"style",
+	"sub",
+	"sup",
+	"time",
+	"title",
+	"u",
+	"var"
 ]);
 
 /**
@@ -1991,7 +2013,7 @@ module.exports.CLEAR_TABLE_BODY = CLEAR_TABLE_BODY;
 module.exports.CLEAR_TABLE_ROW = CLEAR_TABLE_ROW;
 module.exports.COMMA_LIST_ATTRIBUTES = COMMA_LIST_ATTRIBUTES;
 module.exports.DOM_TOKEN_LIST_ATTRIBUTES = DOM_TOKEN_LIST_ATTRIBUTES;
-module.exports.EMPTY_ELEMENT_KEPT = EMPTY_ELEMENT_KEPT;
+module.exports.EMPTY_ELEMENT_DROPPED = EMPTY_ELEMENT_DROPPED;
 module.exports.EMPTY_METADATA_ELEMENTS = EMPTY_METADATA_ELEMENTS;
 module.exports.EMPTY_REMOVABLE_ATTRIBUTES = EMPTY_REMOVABLE_ATTRIBUTES;
 module.exports.ENUMERATED_ATTRIBUTE_NAMES = ENUMERATED_ATTRIBUTE_NAMES;

package/lib/html/htmlMinify.js

@@ -5,8 +5,8 @@
 
 "use strict";
 
-/** @import { HtmlPrintOptions } from "../html/syntax" */
-/** @import { CssEnvironment } from "../css/syntax" */
+/** @import { HtmlPrintOptions, HtmlTransformOptions } from "../html/syntax-printer" */
+/** @import { CssEnvironment, CssTransformOptions } from "../css/syntax-parser" */
 
 /**
  * What a renderer made of one embedded body: the minified text, and anything it
@@ -19,6 +19,10 @@
  * @typedef {(source: string, info: { type: string, hostType: string, as?: string }) => Promise<string | EmbeddedSourceResult | undefined> | string | EmbeddedSourceResult | undefined} AsyncEmbeddedSourceRenderer
  */
 /** @import { RawSourceMap } from "webpack-sources" */
+/** @import { DeferredEmbeddedSource } from "../util/dataURL" */
+/** @import { HtmlPath } from "./syntax-parser" */
+/** @typedef {import("../util/extractComments").PluginExtractComments} ExtractCommentsOption */
+/** @typedef {import("../../declarations/WebpackOptions").OptimizationMinimizeExtractComments} MinimizeExtractComments */
 
 /**
  * A `minify` function for `minimizer-webpack-plugin` (passed as its `minify`
@@ -35,24 +39,26 @@
  * re-resolves in the worker — via the installed package, or the dev self-link.
  * @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"> & { 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
+ * @param {Omit<HtmlPrintOptions, "renderEmbeddedSource" | "deferEmbeddedSource"> & { environment?: CssEnvironment, css?: { convertLengthUnits?: boolean, convertApproximateColors?: boolean, dropOverriddenDeclarations?: boolean, rewriteCustomProperties?: boolean, unusedSymbols?: string[], pseudoClasses?: { [name: string]: string } } & CssTransformOptions, minifyConditionalComments?: boolean, extractComments?: MinimizeExtractComments, renderEmbeddedSource?: AsyncEmbeddedSourceRenderer, svg?: boolean } & HtmlTransformOptions=} 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, SVG `data:` URLs among them when `svg` is set
+ * @param {ExtractCommentsOption=} extractComments the plugin's `extractComments`, read where `minimize.html.extractComments` is not set
+ * @returns {Promise<{ code: string, extractedComments?: string[], warnings?: (Error | string)[], errors?: (Error | string)[] }>} the minified HTML, the comments taken out of it, and what a renderer reported over what it embeds
  */
-const htmlMinify = async (input, sourceMap, minimizerOptions = {}) => {
+const htmlMinify = async (
+	input,
+	sourceMap,
+	minimizerOptions = {},
+	extractComments = undefined
+) => {
 	const webpack = /** @type {typeof import("../index")} */ (
 		// eslint-disable-next-line import/no-extraneous-dependencies -- webpack self-require, re-resolved inside the worker
 		require(/** @type {string} */ ("webpack"))
 	);
 
-	const {
-		askEmbeddedRenderer,
-		builtinEmbeddedRenderer,
-		collectEmbeddedDiagnostics,
-		embeddedText,
-		SourceProcessor,
-		NodeType,
-		pickTransforms
-	} = webpack.html.syntax;
+	const { SourceProcessor, parser } = webpack.html.syntax;
+	const { NodeType, pickTransforms } = parser;
+	const { builtinEmbeddedRenderer } = webpack.html;
+	const { askEmbeddedRenderer, collectEmbeddedDiagnostics, embeddedText } =
+		webpack.util.dataURL;
 	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");
@@ -71,7 +77,8 @@ const htmlMinify = async (input, sourceMap, minimizerOptions = {}) => {
 		sortAttributes,
 		sortTokenLists,
 		removeImpliedTags,
-		renderEmbeddedSource
+		renderEmbeddedSource,
+		svg
 	} = minimizerOptions;
 	// 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
@@ -83,10 +90,16 @@ const htmlMinify = async (input, sourceMap, minimizerOptions = {}) => {
 	const builtin = builtinEmbeddedRenderer({
 		environment,
 		convertLengthUnits: css.convertLengthUnits,
+		convertApproximateColors: css.convertApproximateColors,
+		dropOverriddenDeclarations: css.dropOverriddenDeclarations,
 		rewriteCustomProperties: css.rewriteCustomProperties,
 		unusedSymbols: css.unusedSymbols,
 		pseudoClasses: css.pseudoClasses,
-		transforms: webpack.css.syntax.pickTransforms(css)
+		// Picked on first CSS render, which loads the CSS parser anyway.
+		get transforms() {
+			return webpack.css.syntax.parser.pickTransforms(css);
+		},
+		svg
 	});
 	// One set of options, handed to the document pass and to each conditional
 	// comment's body below.
@@ -111,7 +124,7 @@ const htmlMinify = async (input, sourceMap, minimizerOptions = {}) => {
 	// itself, for the languages webpack ships a minifier for.
 	const renderer = async (
 		/** @type {string} */ source,
-		/** @type {EXPECTED_ANY} */ hole
+		/** @type {DeferredEmbeddedSource} */ hole
 	) => {
 		if (renderEmbeddedSource !== undefined) {
 			const answered = embeddedText(
@@ -129,20 +142,27 @@ const htmlMinify = async (input, sourceMap, minimizerOptions = {}) => {
 	};
 	/**
 	 * @param {string} text a whole document
+	 * @param {typeof printOptions} options the print's options
 	 * @returns {Promise<string>} the same document, printed
 	 */
-	const printDocument = async (text) => {
+	const printDocument = async (text, options) => {
 		// 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)) {
+		// a nested document needs the async pass — an `<iframe srcdoc>` or a
+		// `data:` URL naming HTML, or SVG with `svg`; with none spelled, none is there.
+		if (
+			renderEmbeddedSource === undefined &&
+			!(svg ? /srcdoc|data:[^,]*(?:html|svg)/i : /srcdoc|data:[^,]*html/i).test(
+				text
+			)
+		) {
 			return new SourceProcessor().process(text, {
-				...printOptions,
+				...options,
 				renderEmbeddedSource: builtin
 			}).code;
 		}
 		return (
 			await new SourceProcessor().processAsync(text, {
-				...printOptions,
+				...options,
 				renderEmbeddedSource: renderer
 			})
 		).code;
@@ -155,9 +175,10 @@ const htmlMinify = async (input, sourceMap, minimizerOptions = {}) => {
 	// so each nested document is finished before it is spliced in.
 	/**
 	 * @param {string} text a whole document
+	 * @param {typeof printOptions=} options the print's options, the asset's own for the outermost document
 	 * @returns {Promise<string>} the same document, minified
 	 */
-	const minifyDocument = async (text) => {
+	const minifyDocument = async (text, options = printOptions) => {
 		// 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;
@@ -169,7 +190,7 @@ const htmlMinify = async (input, sourceMap, minimizerOptions = {}) => {
 		if (wantsConditional) {
 			/** @type {{ start: number, end: number, value: string }[]} */
 			const found = [];
-			/** @type {{ [type: number]: (path: EXPECTED_ANY) => void }} */
+			/** @type {{ [type: number]: (path: HtmlPath) => void }} */
 			const visitors = {};
 
 			visitors[NodeType.Comment] = (path) => {
@@ -185,8 +206,9 @@ const htmlMinify = async (input, sourceMap, minimizerOptions = {}) => {
 					return;
 				}
 
-				const start = path.start() + opened + 2;
-				const end = path.start() + closes;
+				const [commentStart] = path.range();
+				const start = commentStart + opened + 2;
+				const end = commentStart + closes;
 
 				found.push({
 					start,
@@ -209,17 +231,53 @@ const htmlMinify = async (input, sourceMap, minimizerOptions = {}) => {
 		// `process` parses once, and with `mode: "minify"` its walk also prints the
 		// safely minified serialization — no second parse. No `source` is named, so no
 		// map is built: the HTML serialize is token-coarse and only the code is used.
-		return printDocument(source);
+		return printDocument(source, options);
+	};
+	// Only the asset's own document gives comments up: a nested one keeps them,
+	// as an inline `<style>` does, and its places are not the asset's.
+	const extraction = webpack.util.extractComments.extractComments(
+		minimizerOptions.extractComments === undefined
+			? extractComments
+			: minimizerOptions.extractComments,
+		printOptions.transforms === undefined
+			? undefined
+			: printOptions.transforms.comments,
+		{
+			open: "<!--",
+			close: "-->",
+			// Every comment the HTML minifier reaches here is inert.
+			some: () => false,
+			unstated: () => false
+		}
+	);
+	const result = {
+		code: await minifyDocument(
+			code,
+			extraction === undefined
+				? printOptions
+				: {
+						...printOptions,
+						transforms: {
+							...printOptions.transforms,
+							comments: /** @type {(comment: string) => boolean} */ (
+								extraction.comments
+							)
+						}
+					}
+		)
 	};
-	const result = { code: await minifyDocument(code) };
+	const answer =
+		extraction === undefined || extraction.extracted.length === 0
+			? result
+			: { ...result, extractedComments: extraction.extracted };
 
 	return reported.length === 0
-		? result
-		: { ...result, ...collectEmbeddedDiagnostics(reported) };
+		? answer
+		: { ...answer, ...collectEmbeddedDiagnostics(reported) };
 };
 
 // Worker-safe (see the body's in-worker `require`), so it may run in the shared
-// worker-thread pool alongside terser.
+// worker-thread pool alongside jsMinify.
 htmlMinify.supportsWorkerThreads = () => true;
 
 /**
@@ -236,23 +294,38 @@ htmlMinify.getTypes = () => ["html"];
  * `<iframe srcdoc>` holds, and every `style=""` as the block's contents it is.
  * @returns {string[]} the languages
  */
-htmlMinify.getEmbeddedTypes = () => {
-	/** @type {string[]} */
-	const languages =
-		/** @type {typeof import("../index")} */
+htmlMinify.getEmbeddedTypes = () => [
+	// A copy of the shared list, as `cssMinify` makes one. Read from there and
+	// not off the parser, which the minimizer would then load — 1.9 MB — to
+	// answer this for a build holding no HTML at all.
+	.../** @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 languages;
-};
+		require(/** @type {string} */ ("webpack"))
+	).util.dataURL.EMBEDDED_LANGUAGES
+];
 
 // Sharing one `minimizer-webpack-plugin` instance, each asset reaches only the
-// minify functions whose `filter` accepts it. This claims HTML, so terser and
+// minify functions whose `filter` accepts it. This claims HTML, so jsMinify and
 // cssMinify coexist with it in one worker pool.
 /**
  * @param {string} name asset filename
  * @returns {boolean} true for HTML assets
  */
-htmlMinify.filter = (name) => /\.html(\?.*)?$/i.test(name);
+htmlMinify.filter = (name) => /^[^?#]*\.html(?:[?#].*)?$/i.test(name);
+
+/**
+ * The comment the minimizer plugin writes its `extractComments` banner as: a
+ * `/*!` line would be text in the document.
+ * @param {string} banner the banner's text
+ * @returns {string} the banner as an HTML comment
+ */
+htmlMinify.formatBanner = (banner) => `<!-- ${banner} -->`;
+
+/**
+ * Where the minimizer plugin puts its `extractComments` banner: at the end, so
+ * the doctype stays first for an engine that reads anything before it oddly.
+ * @returns {"end"} the position
+ */
+htmlMinify.getBannerPosition = () => /** @type {const} */ ("end");
 
 module.exports = htmlMinify;