fix(removeHiddenElems): handle defs better

plugins/removeHiddenElems.js

@@ -15,6 +15,7 @@ const {
 } = require('../lib/xast.js');
 const { collectStylesheet, computeStyle } = require('../lib/style.js');
 const { parsePathData } = require('../lib/path.js');
+const { hasScripts } = require('../lib/svgo/tools.js');
 
 const nonRendering = elemsGroups.nonRendering;
 
@@ -74,6 +75,16 @@ exports.fn = (root, params) => {
    */
   const removedDefIds = new Set();
 
+  /**
+   * @type {Map<string, Array<{node: XastElement, parentNode: XastParent }>>}
+   */
+  const referencesById = new Map();
+
+  /**
+   * If styles are present, we can't be sure if a definition is unused or not
+   */
+  let deoptimized = false;
+
   /**
    * @param {XastChild} node
    * @param {XastParent} parentNode
@@ -104,6 +115,7 @@ exports.fn = (root, params) => {
           nonRenderedNodes.set(node, parentNode);
           return visitSkip;
         }
+
         const computedStyle = computeStyle(stylesheet, node);
         // opacity="0"
         //
@@ -123,6 +135,32 @@ exports.fn = (root, params) => {
   return {
     element: {
       enter: (node, parentNode) => {
+        if (
+          (node.name === 'style' && node.children.length !== 0) ||
+          hasScripts(node)
+        ) {
+          deoptimized = true;
+          return;
+        }
+
+        // Store uses so that they can be removed if broken
+        // and used to determine if a definition is unused
+        if (node.name == 'use') {
+          const reference = Object.keys(node.attributes).find(
+            (attr) => attr === 'href' || attr.endsWith('href')
+          );
+          const referenceValue = reference && node.attributes[reference];
+          const referenceId = referenceValue && referenceValue.slice(1);
+          if (referenceId) {
+            let refs = referencesById.get(referenceId);
+            if (!refs) {
+              refs = [];
+              referencesById.set(referenceId, refs);
+            }
+            refs.push({ node, parentNode });
+          }
+        }
+
         // Removes hidden elements
         // https://www.w3schools.com/cssref/pr_class_visibility.asp
         const computedStyle = computeStyle(stylesheet, node);
@@ -356,37 +394,35 @@ exports.fn = (root, params) => {
           removeElement(node, parentNode);
           return;
         }
-
-        if (node.name === 'use') {
-          const referencesRemovedDef = Object.entries(node.attributes).some(
-            ([attrKey, attrValue]) =>
-              (attrKey === 'href' || attrKey.endsWith(':href')) &&
-              removedDefIds.has(
-                attrValue.slice(attrValue.indexOf('#') + 1).trim()
-              )
-          );
-
-          if (referencesRemovedDef) {
-            detachNodeFromParent(node, parentNode);
+      },
+    },
+    root: {
+      exit: () => {
+        // Remove uses of deleted definitions
+        for (const id of removedDefIds) {
+          const refs = referencesById.get(id);
+          if (refs) {
+            for (const { node, parentNode } of refs) {
+              detachNodeFromParent(node, parentNode);
+            }
           }
-
-          return;
         }
 
-        if (node.name === 'svg' && parentNode.type === 'root') {
+        // Remove definitions that are unused
+        if (!deoptimized) {
           for (const [
             nonRenderedNode,
             nonRenderedParent,
           ] of nonRenderedNodes.entries()) {
+            const id = nonRenderedNode.attributes.id;
             const selector = referencesProps
-              .map(
-                (attr) => `[${attr}="url(#${nonRenderedNode.attributes.id})"]`
-              )
+              .map((attr) => `[${attr}="url(#${id})"]`)
+              .concat(`[href="#${id}"]`, `[xlink\\:href="#${id}"]`)
               .join(',');
 
             const element = querySelector(root, selector);
             if (element == null) {
-              detachNodeFromParent(node, nonRenderedParent);
+              detachNodeFromParent(nonRenderedNode, nonRenderedParent);
             }
           }
         }