fix(reusePaths): reuse defs tag if exists and remove redundant nodes (#…

…1785)

plugins/reusePaths.js

@@ -1,5 +1,7 @@
 'use strict';
 
+const { detachNodeFromParent, querySelectorAll } = require('../lib/xast');
+
 /**
  * @typedef {import('../lib/types').XastElement} XastElement
  * @typedef {import('../lib/types').XastParent} XastParent
@@ -26,9 +28,18 @@ exports.fn = () => {
    */
   const paths = new Map();
 
+  /**
+   * Reference to the first defs element that is a direct child of the svg
+   * element if one exists.
+   *
+   * @type {XastElement}
+   * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs
+   */
+  let svgDefs;
+
   return {
     element: {
-      enter: (node) => {
+      enter: (node, parentNode) => {
         if (node.name === 'path' && node.attributes.d != null) {
           const d = node.attributes.d;
           const fill = node.attributes.fill || '';
@@ -41,24 +52,38 @@ exports.fn = () => {
           }
           list.push(node);
         }
+
+        if (
+          svgDefs == null &&
+          node.name === 'defs' &&
+          parentNode.type === 'element' &&
+          parentNode.name === 'svg'
+        ) {
+          svgDefs = node;
+        }
       },
 
       exit: (node, parentNode) => {
         if (node.name === 'svg' && parentNode.type === 'root') {
           /**
            * @type {XastElement}
            */
-          const defsTag = {
-            type: 'element',
-            name: 'defs',
-            attributes: {},
-            children: [],
-          };
-          // TODO remove legacy parentNode in v4
-          Object.defineProperty(defsTag, 'parentNode', {
-            writable: true,
-            value: node,
-          });
+          let defsTag = svgDefs;
+
+          if (defsTag == null) {
+            defsTag = {
+              type: 'element',
+              name: 'defs',
+              attributes: {},
+              children: [],
+            };
+            // TODO remove legacy parentNode in v4
+            Object.defineProperty(defsTag, 'parentNode', {
+              writable: true,
+              value: node,
+            });
+          }
+
           let index = 0;
           for (const list of paths.values()) {
             if (list.length > 1) {
@@ -90,19 +115,52 @@ exports.fn = () => {
               defsTag.children.push(reusablePath);
               // convert paths to <use>
               for (const pathNode of list) {
-                pathNode.name = 'use';
-                pathNode.attributes['xlink:href'] = '#' + id;
                 delete pathNode.attributes.d;
                 delete pathNode.attributes.stroke;
                 delete pathNode.attributes.fill;
+
+                if (
+                  defsTag.children.includes(pathNode) &&
+                  pathNode.children.length === 0
+                ) {
+                  if (Object.keys(pathNode.attributes).length === 0) {
+                    detachNodeFromParent(pathNode, defsTag);
+                    continue;
+                  }
+
+                  if (
+                    Object.keys(pathNode.attributes).length === 1 &&
+                    pathNode.attributes.id != null
+                  ) {
+                    detachNodeFromParent(pathNode, defsTag);
+                    const selector = `[xlink\\:href=#${pathNode.attributes.id}], [href=#${pathNode.attributes.id}]`;
+                    for (const child of querySelectorAll(node, selector)) {
+                      if (child.type !== 'element') {
+                        continue;
+                      }
+                      for (const name of ['href', 'xlink:href']) {
+                        if (child.attributes[name] != null) {
+                          child.attributes[name] = '#' + id;
+                        }
+                      }
+                    }
+                    continue;
+                  }
+                }
+
+                pathNode.name = 'use';
+                pathNode.attributes['xlink:href'] = '#' + id;
               }
             }
           }
           if (defsTag.children.length !== 0) {
             if (node.attributes['xmlns:xlink'] == null) {
               node.attributes['xmlns:xlink'] = 'http://www.w3.org/1999/xlink';
             }
-            node.children.unshift(defsTag);
+
+            if (svgDefs == null) {
+              node.children.unshift(defsTag);
+            }
           }
         }
       },