html-minifier-next 3.2.1 → 4.0.2

package/package.json

@@ -6,9 +6,9 @@
   "bugs": "https://github.com/j9t/html-minifier-next/issues",
   "dependencies": {
     "change-case": "^4.1.2",
-    "clean-css": "~5.3.3",
-    "commander": "^14.0.1",
+    "commander": "^14.0.2",
     "entities": "^7.0.0",
+    "lightningcss": "^1.28.2",
     "relateurl": "^0.2.7",
     "terser": "^5.44.0"
   },
@@ -16,12 +16,12 @@
   "devDependencies": {
     "@commitlint/cli": "^20.1.0",
     "@eslint/js": "^9.37.0",
-    "@rollup/plugin-commonjs": "^28.0.8",
+    "@rollup/plugin-commonjs": "^28.0.9",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-terser": "^0.4.4",
     "eslint": "^9.37.0",
-    "rollup": "^4.52.4",
+    "rollup": "^4.52.5",
     "rollup-plugin-polyfill-node": "^0.13.0",
     "vite": "^7.1.12"
   },
@@ -78,5 +78,5 @@
     "test:watch": "node --test --watch tests/*.spec.js"
   },
   "type": "module",
-  "version": "3.2.1"
+  "version": "4.0.2"
 }

package/src/htmlminifier.js

@@ -1,4 +1,4 @@
-import CleanCSS from 'clean-css';
+import { transform as transformCSS } from 'lightningcss';
 import { decodeHTMLStrict, decodeHTML } from 'entities';
 import RelateURL from 'relateurl';
 import { minify as terser } from 'terser';
@@ -390,12 +390,8 @@ function isContentSecurityPolicy(tag, attrs) {
   }
 }
 
-function ignoreCSS(id) {
-  return '/* clean-css ignore:start */' + id + '/* clean-css ignore:end */';
-}
-
-// Wrap CSS declarations for CleanCSS > 3.x
-// See https://github.com/jakubpawlowicz/clean-css/issues/418
+// Wrap CSS declarations for inline styles and media queries
+// This ensures proper context for CSS minification
 function wrapCSS(text, type) {
   switch (type) {
     case 'inline':
@@ -458,7 +454,7 @@ const topLevelTags = new Set(['html', 'head', 'body']);
 const compactTags = new Set(['html', 'body']);
 const looseTags = new Set(['head', 'colgroup', 'caption']);
 const trailingTags = new Set(['dt', 'thead']);
-const htmlTags = new Set(['a', 'abbr', 'acronym', 'address', 'applet', 'area', 'article', 'aside', 'audio', 'b', 'base', 'basefont', 'bdi', 'bdo', 'bgsound', 'big', 'blink', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'center', 'cite', 'code', 'col', 'colgroup', 'command', 'content', 'data', 'datalist', 'dd', 'del', 'details', 'dfn', 'dialog', 'dir', 'div', 'dl', 'dt', 'element', 'em', 'embed', 'fieldset', 'figcaption', 'figure', 'font', 'footer', 'form', 'frame', 'frameset', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'iframe', 'image', 'img', 'input', 'ins', 'isindex', 'kbd', 'keygen', 'label', 'legend', 'li', 'link', 'listing', 'main', 'map', 'mark', 'marquee', 'menu', 'menuitem', 'meta', 'meter', 'multicol', 'nav', 'nobr', 'noembed', 'noframes', 'noscript', 'object', 'ol', 'optgroup', 'option', 'output', 'p', 'param', 'picture', 'plaintext', 'pre', 'progress', 'q', 'rb', 'rp', 'rt', 'rtc', 'ruby', 's', 'samp', 'script', 'section', 'select', 'shadow', 'small', 'source', 'spacer', 'span', 'strike', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'template', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'tt', 'u', 'ul', 'var', 'video', 'wbr', 'xmp']);
+const htmlTags = new Set(['a', 'abbr', 'acronym', 'address', 'applet', 'area', 'article', 'aside', 'audio', 'b', 'base', 'basefont', 'bdi', 'bdo', 'bgsound', 'big', 'blink', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'center', 'cite', 'code', 'col', 'colgroup', 'command', 'content', 'data', 'datalist', 'dd', 'del', 'details', 'dfn', 'dialog', 'dir', 'div', 'dl', 'dt', 'element', 'em', 'embed', 'fieldset', 'figcaption', 'figure', 'font', 'footer', 'form', 'frame', 'frameset', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'iframe', 'image', 'img', 'input', 'ins', 'isindex', 'kbd', 'keygen', 'label', 'legend', 'li', 'link', 'listing', 'main', 'map', 'mark', 'marquee', 'menu', 'menuitem', 'meta', 'meter', 'multicol', 'nav', 'nobr', 'noembed', 'noframes', 'noscript', 'object', 'ol', 'optgroup', 'option', 'output', 'p', 'param', 'picture', 'plaintext', 'pre', 'progress', 'q', 'rb', 'rp', 'rt', 'rtc', 'ruby', 's', 'samp', 'script', 'search', 'section', 'select', 'selectedcontent', 'shadow', 'small', 'source', 'spacer', 'span', 'strike', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'template', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'tt', 'u', 'ul', 'var', 'video', 'wbr', 'xmp']);
 
 function canRemoveParentTag(optionalStartTag, tag) {
   switch (optionalStartTag) {
@@ -727,7 +723,7 @@ const processOptions = (inputOptions) => {
         return;
       }
 
-      const cleanCssOptions = typeof option === 'object' ? option : {};
+      const lightningCssOptions = typeof option === 'object' ? option : {};
 
       options.minifyCSS = async function (text, type) {
         text = await replaceAsync(
@@ -748,17 +744,38 @@ const processOptions = (inputOptions) => {
 
         const inputCSS = wrapCSS(text, type);
 
-        return new Promise((resolve) => {
-          new CleanCSS(cleanCssOptions).minify(inputCSS, (_err, output) => {
-            if (output.errors.length > 0) {
-              output.errors.forEach(options.log);
-              resolve(text);
-            }
-
-            const outputCSS = unwrapCSS(output.styles, type);
-            resolve(outputCSS);
+        try {
+          const result = transformCSS({
+            filename: 'input.css',
+            code: Buffer.from(inputCSS),
+            minify: true,
+            errorRecovery: true,
+            ...lightningCssOptions
           });
-        });
+
+          const outputCSS = unwrapCSS(result.code.toString(), type);
+
+          // If Lightning CSS removed significant content that looks like template syntax or UIDs, return original
+          // This preserves:
+          // 1. Template code like `<?php ?>`, `<%= %>`, `{{ }}`, etc. (contain `<` or `>` but not `CDATA`)
+          // 2. UIDs representing custom fragments (only lowercase letters and digits, no spaces)
+          // CDATA sections, HTML entities, and other invalid CSS are allowed to be removed
+          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;
+
+          // Preserve if output is empty and input had template syntax or UIDs
+          // This catches cases where Lightning CSS removed content that should be preserved
+          if (text.trim() && !outputCSS.trim() && (looksLikeTemplate || hasUID)) {
+            return text;
+          }
+
+          return outputCSS;
+        } catch (err) {
+          options.log && options.log(err);
+          return text;
+        }
       };
     } else if (key === 'minifyJS' && typeof option !== 'function') {
       if (!option) {
@@ -996,23 +1013,7 @@ async function minifyHTML(value, options, partialMarkup) {
                 return chunks[1] + uidAttr + index + uidAttr + chunks[2];
               });
 
-              const ids = [];
-              new CleanCSS().minify(wrapCSS(text, type)).warnings.forEach(function (warning) {
-                const match = uidPattern.exec(warning);
-                if (match) {
-                  const id = uidAttr + match[2] + uidAttr;
-                  text = text.replace(id, ignoreCSS(id));
-                  ids.push(id);
-                }
-              });
-
-              return fn(text, type).then(chunk => {
-                ids.forEach(function (id) {
-                  chunk = chunk.replace(ignoreCSS(id), id);
-                });
-
-                return chunk;
-              });
+              return fn(text, type);
             };
           })(options.minifyCSS);
         }

package/src/htmlparser.js

@@ -58,7 +58,7 @@ let IS_REGEX_CAPTURING_BROKEN = false;
 const empty = new CaseInsensitiveSet(['area', 'base', 'basefont', 'br', 'col', 'embed', 'frame', 'hr', 'img', 'input', 'isindex', 'keygen', 'link', 'meta', 'param', 'source', 'track', 'wbr']);
 
 // Inline elements
-const inline = new CaseInsensitiveSet(['a', 'abbr', 'acronym', 'applet', 'b', 'basefont', 'bdo', 'big', 'br', 'button', 'cite', 'code', 'del', 'dfn', 'em', 'font', 'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'label', 'map', 'noscript', 'object', 'q', 's', 'samp', 'script', 'select', 'small', 'span', 'strike', 'strong', 'sub', 'sup', 'svg', 'textarea', 'tt', 'u', 'var']);
+const inline = new CaseInsensitiveSet(['a', 'abbr', 'acronym', 'applet', 'b', 'basefont', 'bdo', 'big', 'br', 'button', 'cite', 'code', 'del', 'dfn', 'em', 'font', 'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'label', 'map', 'noscript', 'object', 'q', 's', 'samp', 'script', 'select', 'selectedcontent', 'small', 'span', 'strike', 'strong', 'sub', 'sup', 'svg', 'textarea', 'tt', 'u', 'var']);
 
 // Elements that you can, intentionally, leave open
 // (and which close themselves)