Merge pull request #208 from j9t/fix/element-removal-and-duplicate-attrs

Fix empty element removal (when having `id`) and duplicate-attribute handling

Author: j9t

CHANGELOG.md

@@ -4,6 +4,13 @@ As of version 2.0.0, all notable changes to HTML Minifier Next (HMN) are documen
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and the project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [5.0.3] - 2026-02-04
+
+### Fixed
+
+* Fixed empty elements with `id` attributes being incorrectly removed when `removeEmptyElements` was enabled (elements with IDs must be preserved as they serve as navigation targets, JavaScript selectors, and accessibility landmarks)
+* Fixed duplicate attributes being preserved in output (per HTML spec, when an attribute appears multiple times, [only the first occurrence is kept](https://html.spec.whatwg.org/multipage/parsing.html#attribute-name-state); duplicates are now removed during minification)
+
 ## [5.0.2] - 2026-02-03
 
 ### Fixed

README.md

@@ -403,38 +403,38 @@ How does HTML Minifier Next compare to other minifiers? (All minification with t
 | Site | Original Size (KB) | [HTML Minifier Next](https://github.com/j9t/html-minifier-next) ([config](https://github.com/j9t/html-minifier-next/blob/main/benchmarks/html-minifier.json))<br>[![npm last update](https://img.shields.io/npm/last-update/html-minifier-next)](https://socket.dev/npm/package/html-minifier-next) | [htmlnano](https://github.com/posthtml/htmlnano)<br>[![npm last update](https://img.shields.io/npm/last-update/htmlnano)](https://socket.dev/npm/package/htmlnano) | [@swc/html](https://github.com/swc-project/swc)<br>[![npm last update](https://img.shields.io/npm/last-update/@swc/html)](https://socket.dev/npm/package/@swc/html) | [minify-html](https://github.com/wilsonzlin/minify-html)<br>[![npm last update](https://img.shields.io/npm/last-update/@minify-html/node)](https://socket.dev/npm/package/@minify-html/node) | [minimize](https://github.com/Swaagie/minimize)<br>[![npm last update](https://img.shields.io/npm/last-update/minimize)](https://socket.dev/npm/package/minimize) | [html­com­pressor.­com](https://htmlcompressor.com/) |
 | --- | --- | --- | --- | --- | --- | --- | --- |
 | [A List Apart](https://alistapart.com/) | 63 | **53** | 55 | 56 | 55 | 58 | 56 |
-| [Apple](https://www.apple.com/) | 236 | **197** | 209 | 212 | 213 | 215 | 215 |
-| [BBC](https://www.bbc.co.uk/) | 647 | **601** | 607 | 608 | 609 | 642 | n/a |
-| [CERN](https://home.cern/) | 150 | **82** | 90 | 90 | 90 | 92 | 95 |
+| [Apple](https://www.apple.com/) | 236 | **198** | 209 | 212 | 213 | 215 | 215 |
+| [BBC](https://www.bbc.co.uk/) | 651 | **605** | 611 | 612 | 613 | 646 | n/a |
+| [CERN](https://home.cern/) | 150 | **80** | 90 | 90 | 90 | 92 | 95 |
 | [CSS-Tricks](https://css-tricks.com/) | 155 | 127 | **121** | 136 | 137 | 141 | 138 |
-| [ECMAScript](https://tc39.es/ecma262/) | 7261 | **6411** | 6583 | 6465 | 6589 | 6637 | n/a |
+| [ECMAScript](https://tc39.es/ecma262/) | 7261 | **6447** | 6583 | 6465 | 6589 | 6637 | n/a |
 | [EDRi](https://edri.org/) | 80 | **68** | 69 | 69 | 71 | 74 | 72 |
-| [EFF](https://www.eff.org/) | 54 | **45** | 48 | 47 | 48 | 49 | 49 |
+| [EFF](https://www.eff.org/) | 54 | **45** | 49 | 47 | 48 | 49 | 49 |
 | [European Alternatives](https://european-alternatives.eu/) | 48 | **30** | 32 | 32 | 32 | 32 | 32 |
-| [FAZ](https://www.faz.net/aktuell/) | 1545 | 1412 | **1385** | 1471 | 1482 | 1492 | n/a |
+| [FAZ](https://www.faz.net/aktuell/) | 1519 | 1389 | **1364** | 1446 | 1457 | 1467 | n/a |
 | [French Tech](https://lafrenchtech.gouv.fr/) | 153 | **122** | 126 | 126 | 126 | 132 | 127 |
-| [Frontend Dogma](https://frontenddogma.com/) | 227 | **219** | 240 | 225 | 227 | 246 | 227 |
+| [Frontend Dogma](https://frontenddogma.com/) | 227 | **219** | 240 | 225 | 227 | 246 | 226 |
 | [Google](https://www.google.com/) | 18 | **16** | **16** | **16** | 17 | 18 | 18 |
-| [Ground News](https://ground.news/) | 1513 | **1371** | 1394 | 1418 | 1424 | 1499 | n/a |
+| [Ground News](https://ground.news/) | 1465 | **1328** | 1350 | 1372 | 1377 | 1453 | n/a |
 | [HTML Living Standard](https://html.spec.whatwg.org/multipage/) | 149 | 148 | 153 | **147** | 149 | 155 | 149 |
 | [Igalia](https://www.igalia.com/) | 49 | **34** | 36 | 36 | 36 | 37 | 37 |
-| [Leanpub](https://leanpub.com/) | 243 | **226** | 229 | 228 | 229 | 239 | 240 |
+| [Leanpub](https://leanpub.com/) | 241 | **224** | 226 | 226 | 227 | 236 | 238 |
 | [Mastodon](https://mastodon.social/explore) | 38 | 35 | **32** | 35 | 36 | 37 | 37 |
-| [MDN](https://developer.mozilla.org/en-US/) | 109 | **62** | 64 | 65 | 65 | 68 | 68 |
+| [MDN](https://developer.mozilla.org/en-US/) | 109 | **63** | 64 | 65 | 65 | 68 | 68 |
 | [Middle East Eye](https://www.middleeasteye.net/) | 220 | **194** | 200 | 198 | 198 | 199 | 200 |
 | [Mistral AI](https://mistral.ai/) | 343 | **307** | **307** | 310 | 311 | 340 | n/a |
 | [Mozilla](https://www.mozilla.org/) | 47 | **32** | 35 | 35 | 35 | 36 | 36 |
 | [Nielsen Norman Group](https://www.nngroup.com/) | 97 | 73 | **59** | 78 | 80 | 81 | 81 |
-| [SitePoint](https://www.sitepoint.com/) | 495 | 456 | **431** | 468 | 473 | 491 | n/a |
+| [SitePoint](https://www.sitepoint.com/) | 494 | 456 | **431** | 468 | 473 | 491 | n/a |
 | [Startup-Verband](https://startupverband.de/) | 43 | **30** | 31 | **30** | 31 | 31 | 31 |
 | [TetraLogical](https://tetralogical.com/) | 59 | 52 | **49** | 51 | 53 | 53 | 53 |
 | [TPGi](https://www.tpgi.com/) | 173 | **157** | 159 | 163 | 164 | 170 | 170 |
 | [United Nations](https://www.un.org/en/) | 151 | **113** | 121 | 125 | 124 | 130 | 123 |
-| [Vivaldi](https://vivaldi.com/) | 93 | **75** | n/a | 79 | 81 | 84 | 82 |
+| [Vivaldi](https://vivaldi.com/) | 93 | **76** | n/a | 79 | 81 | 84 | 82 |
 | [W3C](https://www.w3.org/) | 50 | **36** | 39 | 38 | 38 | 41 | 39 |
-| **Average processing time** |  | 77 ms (30/30) | 149 ms (29/30) | 49 ms (30/30) | **17 ms (30/30)** | 330 ms (30/30) | 1513 ms (24/30) |
+| **Average processing time** |  | 83 ms (30/30) | 165 ms (29/30) | 47 ms (30/30) | **13 ms (30/30)** | 283 ms (30/30) | 1254 ms (24/30) |
 
-(Last updated: Feb 3, 2026)
+(Last updated: Feb 4, 2026)
 <!-- End auto-generated -->
 
 Notes: Minimize does not minify CSS and JS. [HTML Minifier Terser](https://github.com/terser/html-minifier-terser) is currently not included due to issues around whitespace collapsing and removal of code using modern CSS features, issues which appeared to distort the data.

package-lock.json

@@ -94,5 +94,5 @@
   },
   "type": "module",
   "types": "./dist/types/htmlminifier.d.ts",
-  "version": "5.0.2"
+  "version": "5.0.3"
 }

package.json

@@ -38,7 +38,8 @@ import {
   isExecutableScript,
   isStyleElement,
   normalizeAttr,
-  buildAttr
+  buildAttr,
+  deduplicateAttributes
 } from './lib/attributes.js';
 
 import {
@@ -1125,6 +1126,11 @@ async function minifyHTML(value, options, partialMarkup) {
 
       buffer.push(openTag);
 
+      // Remove duplicate attributes (per HTML spec, first occurrence wins)
+      // Duplicate attributes result in invalid HTML
+      // https://html.spec.whatwg.org/multipage/parsing.html#attribute-name-state
+      deduplicateAttributes(attrs, options.caseSensitive);
+
       if (options.sortAttributes) {
         options.sortAttributes(tag, attrs);
       }

src/htmlminifier.js

@@ -65,6 +65,36 @@ function attributesInclude(attributes, attribute) {
   return false;
 }
 
+/**
+ * Remove duplicate attributes from an attribute list.
+ * Per HTML spec, when an attribute appears multiple times, the first occurrence wins.
+ * Duplicate attributes result in invalid HTML, so we keep only the first.
+ * @param {Array} attrs - Array of attribute objects with `name` property
+ * @param {boolean} caseSensitive - Whether to compare names case-sensitively (for XML/SVG)
+ * @returns {Array} Deduplicated attribute array (modifies in place and returns)
+ */
+function deduplicateAttributes(attrs, caseSensitive) {
+  if (attrs.length < 2) {
+    return attrs;
+  }
+
+  const seen = new Set();
+  let writeIndex = 0;
+
+  for (let i = 0; i < attrs.length; i++) {
+    const attr = attrs[i];
+    const key = caseSensitive ? attr.name : attr.name.toLowerCase();
+
+    if (!seen.has(key)) {
+      seen.add(key);
+      attrs[writeIndex++] = attr;
+    }
+  }
+
+  attrs.length = writeIndex;
+  return attrs;
+}
+
 function isAttributeRedundant(tag, attrName, attrValue, attrs) {
   // Fast-path: Check if this element–attribute combination can possibly be redundant
   // before doing expensive string operations
@@ -604,5 +634,6 @@ export {
   // Cleaners
   cleanAttributeValue,
   normalizeAttr,
-  buildAttr
+  buildAttr,
+  deduplicateAttributes
 };

src/lib/attributes.js

@@ -80,6 +80,16 @@ function canRemovePrecedingTag(optionalEndTag, tag) {
 // Element removal logic
 
 function canRemoveElement(tag, attrs) {
+  // Elements with `id` attribute must never be removed—they serve as:
+  // - Navigation targets (skip links, URL fragments)
+  // - JavaScript selector targets (`getElementById`, `querySelector`)
+  // - CSS targets (`:target` pseudo-class, ID selectors)
+  // - Accessibility landmarks (ARIA references)
+  // - Portal mount points (React portals, etc.)
+  if (hasAttrName('id', attrs)) {
+    return false;
+  }
+
   switch (tag) {
     case 'textarea':
       return false;

src/lib/elements.js

@@ -180,6 +180,32 @@ describe('HTML', () => {
     assert.strictEqual(await minify('<input title="bar"       id="boo"    value="hello world">'), '<input title="bar" id="boo" value="hello world">');
   });
 
+  test('Deduplicate attributes', async () => {
+    // Per HTML spec, when duplicate attributes are present, the first occurrence wins
+    // Duplicate attributes result in invalid HTML, so we deduplicate them
+
+    // Simple duplicate attribute
+    assert.strictEqual(await minify('<html data-color-mode="auto" data-color-mode="light"></html>'), '<html data-color-mode="auto"></html>');
+
+    // Multiple duplicates of same attribute
+    assert.strictEqual(await minify('<div class="a" id="x" class="b" class="c"></div>'), '<div class="a" id="x"></div>');
+
+    // Different attributes, some duplicated
+    assert.strictEqual(await minify('<p title="first" class="a" title="second"></p>'), '<p title="first" class="a"></p>');
+
+    // Duplicate data attributes (common in GitHub-style HTML)
+    assert.strictEqual(await minify('<html data-dark-theme="dark" data-dark-theme="dark_dimmed"></html>'), '<html data-dark-theme="dark"></html>');
+
+    // No duplicates—should pass through unchanged
+    assert.strictEqual(await minify('<div id="x" class="y" title="z"></div>'), '<div id="x" class="y" title="z"></div>');
+
+    // Case-insensitive deduplication in HTML mode
+    assert.strictEqual(await minify('<div Class="a" CLASS="b" class="c"></div>'), '<div class="a"></div>');
+
+    // Case-sensitive deduplication in SVG mode
+    assert.strictEqual(await minify('<svg viewBox="0 0 100 100" viewBox="0 0 200 200"></svg>'), '<svg viewBox="0 0 100 100"></svg>');
+  });
+
   test('Space normalization around text', async () => {
     let input, output;
     input = '   <p>blah</p>\n\n\n   ';
@@ -1699,6 +1725,25 @@ describe('HTML', () => {
     assert.strictEqual(await minify(input, { removeEmptyElements: true }), input);
     output = '<div>Empty<!-- NOT --></div>';
     assert.strictEqual(await minify(input, { collapseWhitespace: true, removeEmptyElements: true }), output);
+
+    // Elements with `id` attribute must not be removed
+    input = '<div id="start-of-content"></div>';
+    assert.strictEqual(await minify(input, { removeEmptyElements: true }), input);
+
+    input = '<div id="__primerPortalRoot__"></div>';
+    assert.strictEqual(await minify(input, { removeEmptyElements: true }), input);
+
+    input = '<ul id="query-builder-results" data-action="combobox-commit"></ul>';
+    assert.strictEqual(await minify(input, { removeEmptyElements: true }), input);
+
+    // Element with `id` and other attributes
+    input = '<span id="target" class="highlight" aria-hidden="true"></span>';
+    assert.strictEqual(await minify(input, { removeEmptyElements: true }), input);
+
+    // Multiple elements, only those without `id` should be removed
+    input = '<div id="keep"></div><span></span><p id="also-keep"></p>';
+    output = '<div id="keep"></div><p id="also-keep"></p>';
+    assert.strictEqual(await minify(input, { removeEmptyElements: true }), output);
   });
 
   test('`removeEmptyElementsExcept`', async () => {