html-minifier 5.0.2 → 5.0.3

package/src/lib/attributes.js

@@ -7,6 +7,7 @@ import {
   RE_CAN_REMOVE_ATTR_QUOTES,
   RE_AMP_REFERENCE_ATTR,
   RE_CR,
+  RE_ATTR_SELECTOR,
   RE_BASE_ELEMENT,
   RE_ATTR_WS_CHECK,
   RE_ATTR_WS_COLLAPSE,
@@ -29,7 +30,8 @@ import {
   collapsibleValues,
   srcsetElements,
   RE_EMPTY_ATTRIBUTE,
-  RE_STYLE_ELEMENT
+  RE_STYLE_ELEMENT,
+  RE_STYLE_TAG
 } from './constants.js';
 import { trimWhitespace, collapseWhitespaceAll } from './whitespace.js';
 import { shouldMinifyInnerHTML } from './options.js';
@@ -197,6 +199,54 @@ function isTargetSelfRedundant(attrValue, options) {
   return !state || !(state.hasBase ??= RE_BASE_ELEMENT.test(state.source));
 }
 
+/**
+ * The attribute names `style` elements in `source` select on, in lowercase
+ * @param {string} source
+ * @returns {Set<string>}
+ */
+function findSelectedAttributes(source) {
+  /** @type {Set<string>} */
+  const names = new Set();
+  if (!RE_STYLE_ELEMENT.test(source)) {
+    return names;
+  }
+  const addSelected = (/** @type {number} */ start, /** @type {number} */ end) => {
+    for (const selector of source.slice(start, end).toLowerCase().matchAll(RE_ATTR_SELECTOR)) {
+      names.add(/** @type {string} */ (selector[1]));
+    }
+  };
+  // Scanned rather than matched, as a lazy pattern is quadratic on `style` tags left open
+  let start = -1;
+  RE_STYLE_TAG.lastIndex = 0;
+  for (let match = RE_STYLE_TAG.exec(source); match; match = RE_STYLE_TAG.exec(source)) {
+    if (match[0][1] !== '/') {
+      if (start === -1) start = match.index;
+    } else if (start !== -1) {
+      addSelected(start, match.index);
+      start = -1;
+    }
+  }
+  // Browsers apply a `style` element the document ends in, but not one that is script text,
+  // with a script’s end tag after it (without, `<script` before it is text of some other kind)
+  if (start !== -1) {
+    const before = source.slice(0, start).toLowerCase();
+    if (before.lastIndexOf('<script') <= before.lastIndexOf('</script') || !source.slice(start).toLowerCase().includes('</script')) {
+      addSelected(start, source.length);
+    }
+  }
+  return names;
+}
+
+/**
+ * Whether a style sheet of the document selects on the attribute, which removing it would break
+ * @param {string} attrName
+ * @param {ProcessedOptions} options
+ */
+function isAttributeSelected(attrName, options) {
+  const state = options.baseState;
+  return state !== undefined && (state.selectedAttrs ??= findSelectedAttributes(state.source)).has(attrName.toLowerCase());
+}
+
 /**
  * @param {string} tag - In lowercase
  * @param {string} attrName - In lowercase
@@ -268,7 +318,18 @@ function isAttributeRedundant(tag, attrName, attrValue, attrs, options) {
     : undefined;
   const tagDefault = tagAttrDefaults && Object.hasOwn(tagAttrDefaults, attrName) ? tagAttrDefaults[attrName] : undefined;
 
-  const isLegacyAttr = (tag === 'script' && (attrName === 'language' || attrName === 'charset')) || (tag === 'a' && attrName === 'name');
+  // As written, for browsers match fragments case-sensitively and without trimming
+  if (tag === 'a' && attrName === 'name') {
+    const id = attrs.find(attr => attr.name.toLowerCase() === 'id');
+    const idValue = id?.value ?? '';
+    // With `decodeEntities`, the name is decoded by now, the ID isn’t
+    if (id === undefined || (options.decodeEntities && idValue.indexOf('&') !== -1)) {
+      return false;
+    }
+    return options.collapseAttributeWhitespace ? collapseAttributeValue(idValue) === collapseAttributeValue(attrValue) : idValue === attrValue;
+  }
+
+  const isLegacyAttr = tag === 'script' && (attrName === 'language' || attrName === 'charset');
 
   // Without a default for this very attribute, nor a legacy rule, the value cannot be redundant
   if (generalDefault === undefined && tagDefault === undefined && !isLegacyAttr) {
@@ -284,9 +345,6 @@ function isAttributeRedundant(tag, attrName, attrValue, attrs, options) {
   if (tag === 'script' && attrName === 'charset' && !attributesInclude(attrs, 'src')) {
     return true;
   }
-  if (tag === 'a' && attrName === 'name' && attributesInclude(attrs, 'id')) {
-    return true;
-  }
   if (tag === 'ol' && attrName === 'start' && attributesInclude(attrs, 'reversed')) {
     return false;
   }
@@ -658,6 +716,15 @@ const collapseAttributeWhitespaceExempt = new Set(['pattern', 'placeholder', 'ti
 // `value` whitespace matters only on form-submission and machine-readable elements
 const valueWhitespaceExemptElements = new Set(['button', 'data', 'input', 'option', 'param']);
 
+/**
+ * @param {string} value
+ * @returns {string}
+ */
+function collapseAttributeValue(value) {
+  // Fast path: Only process if whitespace exists (avoids regex overhead on clean values)
+  return RE_ATTR_WS_CHECK.test(value) ? trimWhitespace(value).replace(RE_ATTR_WS_COLLAPSE, ' ') : value;
+}
+
 /**
  * Drop repeated names from a whitespace-separated class list, keeping the first of each.
  * @param {string} value
@@ -690,10 +757,7 @@ function cleanAttributeValue(tag, attrName, attrValue, options, attrs, minifyHTM
   // Special spaces (no-break space, hair space, etc.) stay, for consistency
   // with `collapseWhitespace`
   if (options.collapseAttributeWhitespace && !collapseAttributeWhitespaceExempt.has(attrName) && !(attrName === 'value' && valueWhitespaceExemptElements.has(tag)) && !isEventAttr) {
-    // Fast path: Only process if whitespace exists (avoids regex overhead on clean values)
-    if (RE_ATTR_WS_CHECK.test(attrValue)) {
-      attrValue = trimWhitespace(attrValue).replace(RE_ATTR_WS_COLLAPSE, ' ');
-    }
+    attrValue = collapseAttributeValue(attrValue);
   }
 
   if (isEventAttr) {
@@ -1016,12 +1080,12 @@ function normalizeAttr(attr, attrs, tag, tagOut, options, minifyHTML, markers) {
  * @param {string[]} [markers] - What custom fragment and `htmlmin:ignore` placeholders hold
  */
 function normalizeAttrContinue(attrName, attrNameOut, attrValue, attr, attrs, tag, tagOut, options, minifyHTML, markers) {
-  if ((options.removeRedundantAttributes &&
+  if (((options.removeRedundantAttributes &&
        isAttributeRedundant(tag, attrName, attrValue ?? '', attrs, options)) ||
       (options.removeDefaultTypeAttributes && attrName === 'type' && (
         ((tag === 'style' || tag === 'link') && isStyleLinkTypeAttribute(attrValue)) ||
         (tag === 'script' && isScriptTypeAttribute(attrValue) && !keepScriptTypeAttribute(attrValue))
-      ))) {
+      ))) && !isAttributeSelected(attrName, options)) {
     return;
   }
 
@@ -1048,7 +1112,8 @@ function normalizeAttrContinue(attrName, attrNameOut, attrValue, attr, attrs, ta
  */
 function normalizeAttrFinish(attrName, attrNameOut, attrValue, attr, tag, tagOut, options) {
   if (options.removeEmptyAttributes &&
-      canDeleteEmptyAttribute(tag, attrName, attrValue, options, tagOut, attrNameOut)) {
+      canDeleteEmptyAttribute(tag, attrName, attrValue, options, tagOut, attrNameOut) &&
+      !isAttributeSelected(attrName, options)) {
     return;
   }
 

package/src/lib/constants.js

@@ -48,10 +48,17 @@ const RE_HTML_ENCODING = /^(text\/html|application\/xhtml\+xml)$/i;
 // identifier precedes it, anything but `>` sets quirks mode
 // https://html.spec.whatwg.org/multipage/parsing.html#doctype-state
 const RE_DOCTYPE = /^<!doctype[ \n\r\t\f]*([^ \n\r\t\f>]+)[ \n\r\t\f]*(?:public[ \n\r\t\f]*("[^">]*"|'[^'>]*')[ \n\r\t\f]*("[^">]*"|'[^'>]*')?|system[ \n\r\t\f]*("[^">]*"|'[^'>]*'))?([^]*)$/i;
+// A doctype’s quoted identifiers (captured) and what lies between them
+const RE_DOCTYPE_SEGMENT = /("[^"]*(?:"|$)|'[^']*(?:'|$))|[^"']+/g;
 const RE_ATTR_WS_CHECK = /[ \n\r\t\f]/;
 const RE_ATTR_WS_COLLAPSE = /[ \n\r\t\f]+/g;
 const RE_WS_CHAR = /\s/;
 const RE_STYLE_ELEMENT = /<style[\s/>]/i;
+const RE_STYLE_TAG = /<\/?style/gi;
+// Text that a space after would collapse into (a no-break space does not take it in)
+const RE_ENDS_COLLAPSIBLE = /(?:^|[ \n\r\t\f])$/;
+// An attribute selector’s name, namespace prefix aside, in lowercased CSS
+const RE_ATTR_SELECTOR = /\[\s*(?:[\w-]*\|)?([\w:-]+)\s*[\]=~|^$*]/g;
 const RE_EMPTY_ATTRIBUTE = new RegExp(
   '^(?:class|id|style|title|lang|dir|on(?:focus|blur|change|click|dblclick|mouse(' +
   '?:down|up|over|move|out)|key(?:press|down|up)))$');
@@ -62,11 +69,11 @@ const RE_EMPTY_ATTRIBUTE = new RegExp(
 const inlineElementsToKeepWhitespaceAround = new Set(['a', 'abbr', 'acronym', 'audio', 'b', 'bdi', 'bdo', 'big', 'button', 'canvas', 'cite', 'code', 'data', 'del', 'dfn', 'em', 'embed', 'font', 'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'label', 'map', 'mark', 'math', 'meter', 'nobr', 'object', 'output', 'picture', 'progress', 'q', 'rb', 'rp', 'rt', 'rtc', 'ruby', 's', 'samp', 'select', 'selectedcontent', 'slot', 'small', 'span', 'strike', 'strong', 'sub', 'sup', 'svg', 'textarea', 'textpath', 'time', 'tspan', 'tt', 'u', 'var', 'video', 'wbr']);
 
 // Non-empty elements that will maintain whitespace within them
-const inlineElementsToKeepWhitespaceWithin = new Set(['a', 'abbr', 'acronym', 'b', 'big', 'data', 'del', 'em', 'font', 'i', 'ins', 'kbd', 'map', 'mark', 'nobr', 's', 'samp', 'slot', 'small', 'span', 'strike', 'strong', 'sub', 'sup', 'textpath', 'time', 'tspan', 'tt', 'u', 'var']);
+const inlineElementsToKeepWhitespaceWithin = new Set(['a', 'abbr', 'acronym', 'b', 'bdi', 'bdo', 'big', 'cite', 'code', 'data', 'del', 'dfn', 'em', 'font', 'i', 'ins', 'kbd', 'label', 'map', 'mark', 'nobr', 'q', 'ruby', 's', 'samp', 'slot', 'small', 'span', 'strike', 'strong', 'sub', 'sup', 'textpath', 'time', 'tspan', 'tt', 'u', 'var']);
 
 // Text-level elements that keep whitespace between them and other elements under
 // `collapseInlineTagWhitespace`
-const inlineElementsToKeepWhitespaceBetween = new Set([...inlineElementsToKeepWhitespaceWithin, 'bdi', 'bdo', 'cite', 'code', 'dfn', 'label', 'math', 'q', 'ruby']);
+const inlineElementsToKeepWhitespaceBetween = new Set([...inlineElementsToKeepWhitespaceWithin, 'math']);
 
 // Phrasing elements that don’t render, whose neighbors decide on the whitespace around them
 const inlineElementsTransparent = new Set(['area', 'datalist', 'link', 'meta', 'noscript', 'script', 'style', 'template']);
@@ -296,7 +303,7 @@ const optionalStartTags = new Set(['html', 'head', 'body', 'colgroup', 'tbody'])
 
 const optionalEndTags = new Set(['html', 'head', 'body', 'li', 'dt', 'dd', 'p', 'rb', 'rt', 'rtc', 'rp', 'optgroup', 'option', 'colgroup', 'caption', 'thead', 'tbody', 'tfoot', 'tr', 'td', 'th']);
 
-const headerElements = new Set(['meta', 'link', 'script', 'style', 'template', 'noscript']);
+const headerElements = new Set(['base', 'basefont', 'bgsound', 'link', 'meta', 'noframes', 'noscript', 'script', 'style', 'template', 'title']);
 
 const descriptionElements = new Set(['dt', 'dd']);
 
@@ -432,16 +439,20 @@ export {
   RE_LINE_BREAK_CR,
   RE_LEGACY_ENTITIES,
   RE_ESCAPE_LT,
+  RE_ATTR_SELECTOR,
+  RE_ENDS_COLLAPSIBLE,
   RE_BASE_ELEMENT,
   RE_ESCAPE_LT_RAW_TEXT,
   RE_XML_ESCAPE_TEXT,
   RE_XML_ESCAPE_ATTR,
   RE_HTML_ENCODING,
   RE_DOCTYPE,
+  RE_DOCTYPE_SEGMENT,
   RE_ATTR_WS_CHECK,
   RE_ATTR_WS_COLLAPSE,
   RE_WS_CHAR,
   RE_STYLE_ELEMENT,
+  RE_STYLE_TAG,
   RE_EMPTY_ATTRIBUTE,
 
   // Inline element sets

package/src/lib/elements.js

@@ -124,9 +124,16 @@ function canRemoveElement(tag, attrs) {
   }
 
   switch (tag) {
+    // Without a `frameset`, browsers render what follows it
     case 'canvas':
+    case 'frameset':
     case 'textarea':
       return false;
+    // Browsers create them anyway, but not with their attributes
+    case 'body':
+    case 'head':
+    case 'html':
+      return attrs.length === 0;
     case 'audio':
     case 'script':
     case 'video':

package/src/lib/options.js

@@ -51,7 +51,7 @@ import { optionDefinitions, optionDefaults } from './option-definitions.js';
  *   removeUnusedCSS: {safelist: Array<string | RegExp>, scripts: boolean} | null,
  *   cssContext?: CSSContext,
  *   documentState?: {hasMathML: boolean},
- *   baseState?: {hasBase: boolean | undefined, source: string},
+ *   baseState?: {hasBase: boolean | undefined, selectedAttrs?: Set<string>, source: string},
  *   parallelJS?: boolean,
  *   nameParent?: (name: string) => string,
  *   namesAsWritten?: boolean,
@@ -519,14 +519,15 @@ const processOptions = (inputOptions, { getLightningCSS, getTerser, getSwc, getS
             const outputCSS = unwrapCSS(result.code.toString(), type);
 
             // Where Lightning CSS emptied template syntax (`<?php ?>`, `{{ }}`: `<` or `>` without
-            // `CDATA`) or custom-fragment UIDs (long lowercase alphanumeric runs), keep the
-            // original; CDATA sections, entities, and other invalid CSS may go
+            // `CDATA`), custom-fragment UIDs (long lowercase alphanumeric runs), or a media query
+            // (an invalid one matches nothing, an empty one everything), keep the original;
+            // CDATA sections, entities, and other invalid CSS may go
             const isCDATA = text.includes('<![CDATA[');
             const uidPattern = /[a-z0-9]{10,}/; // UIDs are long alphanumeric strings
             const hasUID = uidPattern.test(text) && !isCDATA; // Exclude CDATA from UID detection
             const looksLikeTemplate = (text.includes('<') || text.includes('>')) && !isCDATA;
 
-            const css = (text.trim() && !outputCSS.trim() && (looksLikeTemplate || hasUID)) ? text : outputCSS;
+            const css = (text.trim() && !outputCSS.trim() && (type === 'media' || looksLikeTemplate || hasUID)) ? text : outputCSS;
             return /** @type {CSSResult} */ ({ css, warnings });
           });
           report(resolved.warnings);