htmlnano 2.0.3 → 2.0.4

package/docs/package.json

@@ -13,10 +13,10 @@
     "write-heading-ids": "docusaurus write-heading-ids"
   },
   "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.4",
-    "@docusaurus/preset-classic": "2.0.0-beta.4",
+    "@docusaurus/core": "2.2.0",
+    "@docusaurus/preset-classic": "2.2.0",
     "@mdx-js/react": "^1.6.21",
-    "@svgr/webpack": "^5.5.0",
+    "@svgr/webpack": "^6.5.1",
     "clsx": "^1.1.1",
     "file-loader": "^6.2.0",
     "prism-react-renderer": "^1.2.1",

package/lib/helpers.js

@@ -42,7 +42,8 @@ function isEventHandler(attributeName) {
 }
 function optionalRequire(moduleName) {
   try {
-    return require(moduleName);
+    const module = require(moduleName);
+    return module.default || module;
   } catch (e) {
     if (e.code === 'MODULE_NOT_FOUND') {
       return null;

package/lib/htmlnano.js

@@ -18,8 +18,11 @@ const presets = {
   max: _max.default
 };
 function loadConfig(options, preset, configPath) {
-  var _options;
-  if (!((_options = options) !== null && _options !== void 0 && _options.skipConfigLoading)) {
+  let {
+    skipConfigLoading = false,
+    ...rest
+  } = options || {};
+  if (!skipConfigLoading) {
     const explorer = (0, _cosmiconfig.cosmiconfigSync)(_package.default.name);
     const rc = configPath ? explorer.load(configPath) : explorer.search();
     if (rc) {
@@ -33,11 +36,11 @@ function loadConfig(options, preset, configPath) {
         delete rc.config.preset;
       }
       if (!options) {
-        options = rc.config;
+        rest = rc.config;
       }
     }
   }
-  return [options || {}, preset || _safe.default];
+  return [rest || {}, preset || _safe.default];
 }
 const optionalDependencies = {
   minifyCss: ['cssnano', 'postcss'],

package/lib/modules/mergeScripts.js

@@ -12,7 +12,9 @@ function mergeScripts(tree) {
     tag: 'script'
   }, node => {
     const nodeAttrs = node.attrs || {};
-    if (nodeAttrs.src) {
+    if ('src' in nodeAttrs
+    // Skip SRI, reasons are documented in "minifyJs" module
+    || 'integrity' in nodeAttrs) {
       scriptSrcIndex++;
       return node;
     }

package/lib/modules/mergeStyles.js

@@ -14,7 +14,9 @@ function mergeStyles(tree) {
     const nodeAttrs = node.attrs || {};
     // Skip <style scoped></style>
     // https://developer.mozilla.org/en/docs/Web/HTML/Element/style
-    if (nodeAttrs.scoped !== undefined) {
+    //
+    // Also skip SRI, reasons are documented in "minifyJs" module
+    if ('scoped' in nodeAttrs || 'integrity' in nodeAttrs) {
       return node;
     }
     if ((0, _helpers.isAmpBoilerplate)(node)) {

package/lib/modules/minifyCss.js

@@ -21,6 +21,10 @@ function minifyCss(tree, options, cssnanoOptions) {
   }
   let promises = [];
   tree.walk(node => {
+    // Skip SRI, reasons are documented in "minifyJs" module
+    if (node.attrs && 'integrity' in node.attrs) {
+      return node;
+    }
     if ((0, _helpers.isStyleNode)(node)) {
       promises.push(processStyleNode(node, cssnanoOptions));
     } else if (node.attrs && node.attrs.style) {

package/lib/modules/minifyJs.js

@@ -13,8 +13,24 @@ function minifyJs(tree, options, terserOptions) {
   if (!terser) return tree;
   let promises = [];
   tree.walk(node => {
+    const nodeAttrs = node.attrs || {};
+
+    /**
+     * Skip SRI
+     *
+     * If the input <script /> has an SRI attribute, it means that the original <script /> could be trusted,
+     * and should not be altered anymore.
+     *
+     * htmlnano is exactly an MITM that SRI is designed to protect from. If htmlnano or its dependencies get
+     * compromised and introduces malicious code, then it is up to the original SRI to protect the end user.
+     *
+     * So htmlnano will simply skip <script /> that has SRI.
+     * If developers do trust htmlnano, they should generate SRI after htmlnano modify the <script />.
+     */
+    if ('integrity' in nodeAttrs) {
+      return node;
+    }
     if (node.tag && node.tag === 'script') {
-      const nodeAttrs = node.attrs || {};
       const mimeType = nodeAttrs.type || 'text/javascript';
       if (_removeRedundantAttributes.redundantScriptTypes.has(mimeType) || mimeType === 'module') {
         promises.push(processScriptNode(node, terserOptions));

package/lib/modules/minifyJson.js

@@ -7,6 +7,10 @@ exports.onContent = onContent;
 const rNodeAttrsTypeJson = /(\/|\+)json/;
 function onContent() {
   return (content, node) => {
+    // Skip SRI, reasons are documented in "minifyJs" module
+    if (node.attrs && 'integrity' in node.attrs) {
+      return content;
+    }
     if (node.attrs && node.attrs.type && rNodeAttrsTypeJson.test(node.attrs.type)) {
       try {
         // cast minified JSON to an array

package/lib/modules/minifySvg.js

@@ -17,22 +17,22 @@ function minifySvg(tree, options, svgoOptions = {}) {
       closingSingleTag: 'slash',
       quoteAllAttributes: true
     });
-    const result = svgo.optimize(svgStr, svgoOptions);
-    if (result.error) {
+    try {
+      const result = svgo.optimize(svgStr, svgoOptions);
+      node.tag = false;
+      node.attrs = {};
+      // result.data is a string, we need to cast it to an array
+      node.content = [result.data];
+      return node;
+    } catch (error) {
       console.error('htmlnano fails to minify the svg:');
-      console.error(result.error);
-      if (result.modernError) {
-        console.error(result.modernError);
+      console.error(error);
+      if (error.name === 'SvgoParserError') {
+        console.error(error.toString());
       }
-
       // We return the node as-is
       return node;
     }
-    node.tag = false;
-    node.attrs = {};
-    // result.data is a string, we need to cast it to an array
-    node.content = [result.data];
-    return node;
   });
   return tree;
 }

package/lib/modules/normalizeAttributeValues.js

@@ -63,11 +63,6 @@ const invalidValueDefault = {
     default: 'metadata',
     valid: ['subtitles', 'captions', 'descriptions', 'chapters', 'metadata']
   },
-  autocomplete: {
-    tag: null,
-    default: 'on',
-    valid: ['on', 'off']
-  },
   type: {
     tag: ['button'],
     default: 'submit',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "htmlnano",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "Modular HTML minifier, built on top of the PostHTML",
   "main": "index.js",
   "types": "index.d.ts",
@@ -34,7 +34,7 @@
     ]
   },
   "dependencies": {
-    "cosmiconfig": "^7.0.1",
+    "cosmiconfig": "^8.0.0",
     "posthtml": "^0.16.5",
     "timsort": "^0.3.0"
   },
@@ -44,26 +44,26 @@
     "@babel/eslint-parser": "^7.17.0",
     "@babel/preset-env": "^7.15.6",
     "@babel/register": "^7.15.3",
-    "cssnano": "^5.1.12",
+    "cssnano": "^6.0.0",
     "eslint": "^8.12.0",
-    "expect": "^27.2.0",
+    "expect": "^29.0.0",
     "mocha": "^10.1.0",
     "postcss": "^8.3.11",
     "purgecss": "^5.0.0",
     "relateurl": "^0.2.7",
-    "rimraf": "^3.0.2",
+    "rimraf": "^5.0.0",
     "srcset": "4.0.0",
-    "svgo": "^2.8.0",
+    "svgo": "^3.0.2",
     "terser": "^5.10.0",
     "uncss": "^0.17.3"
   },
   "peerDependencies": {
-    "cssnano": "^5.0.11",
+    "cssnano": "^6.0.0",
     "postcss": "^8.3.11",
     "purgecss": "^5.0.0",
     "relateurl": "^0.2.7",
     "srcset": "4.0.0",
-    "svgo": "^2.8.0",
+    "svgo": "^3.0.2",
     "terser": "^5.10.0",
     "uncss": "^0.17.3"
   },

package/test.js

@@ -0,0 +1,48 @@
+const htmlnano = require('.');
+// const posthtml = require('posthtml');
+const safePreset = require('./lib/presets/safe');
+// const options = {
+    // minifySvg: false,
+    // minifyJs: false,
+// };
+// // posthtml, posthtml-render, and posthtml-parse options
+// const postHtmlOptions = {
+//     sync: true, // https://github.com/posthtml/posthtml#usage
+//     lowerCaseTags: true, // https://github.com/posthtml/posthtml-parser#options
+//     quoteAllAttributes: false, // https://github.com/posthtml/posthtml-render#options
+// };
+
+// const html = `
+// <!doctype html>
+// <html lang="en">
+// <head>
+//   <meta charset="utf-8">
+//   <title></title>
+//   <script class="fob">alert(1)</script>
+//   <script>alert(2)</script>
+// </head>
+// <body>
+//     <script>alert(3)</script>
+//     <script>alert(4)</script>
+// </body>
+// </html>
+// `;
+
+const options = {
+    minifySvg: safePreset.minifySvg,
+};
+const html = `
+<input type="text" class="form-control" name="testInput" autofocus="" autocomplete="off" id="testId"><a id="testId" href="#" class="testClass"></a><img width="20" src="../images/image.png" height="40" alt="image" class="cls" id="id2">
+`;
+
+htmlnano
+    // "preset" arg might be skipped (see "Presets" section below for more info)
+    // "postHtmlOptions" arg might be skipped
+    .process(html)
+    .then(function (result) {
+        // result.html is minified
+        console.log(result.html);
+    })
+    .catch(function (err) {
+        console.error(err);
+    });