From 4698858bc0e3e82ab459ddbe524c4e5545a8b3c6 Mon Sep 17 00:00:00 2001
From: Nicholas Narsing <soren121@sorenstudios.com>
Date: Mon, 8 Apr 2024 11:38:00 -0700
Subject: [PATCH] fix(removeAttributesBySelector): update for v2, catch missing
 parameters, update docs

---
 .../remove-attributes-by-selector.mdx         |  8 +++-
 plugins/plugins-types.d.ts                    | 12 +++++-
 plugins/removeAttributesBySelector.js         | 43 +++++++++++++------
 .../removeAttributesBySelector.04.svg.txt     | 13 ++++++
 4 files changed, 60 insertions(+), 16 deletions(-)
 create mode 100644 test/plugins/removeAttributesBySelector.04.svg.txt

diff --git a/docs/03-plugins/remove-attributes-by-selector.mdx b/docs/03-plugins/remove-attributes-by-selector.mdx
index a8e7010ca..124f6e3f5 100644
--- a/docs/03-plugins/remove-attributes-by-selector.mdx
+++ b/docs/03-plugins/remove-attributes-by-selector.mdx
@@ -3,8 +3,14 @@ title: Remove Attributes by Selector
 svgo:
   pluginId: removeAttributesBySelector
   parameters:
+    selector:
+      description: A CSS selector that matches the elements to be modified.
+      default: "[fill='#00ff00']"
+    attributes:
+      description: An attribute, or array of attributes, to remove from the matched elements.
+      default: fill
     selectors:
-      description: An array of objects with two properties, <code>selector</code>, and <code>attributes</code>, which represent a CSS selector and the attributes to remove respectively.
+      description: An array of objects, each containing <code>selector</code> and <code>attributes</code> as described above. To match on more than one selector, use this parameter instead of the two above.
       default: null
 ---
 
diff --git a/plugins/plugins-types.d.ts b/plugins/plugins-types.d.ts
index b5b7ae51a..b8ed7458f 100644
--- a/plugins/plugins-types.d.ts
+++ b/plugins/plugins-types.d.ts
@@ -278,7 +278,17 @@ export type BuiltinsWithRequiredParams = {
       string | ((node: XastElement, info: PluginInfo) => string)
     >;
   };
-  removeAttributesBySelector: any;
+  removeAttributesBySelector:
+    | {
+        selector: string;
+        attributes: string | string[];
+        selectors: never;
+      }
+    | {
+        selector: never;
+        attributes: never;
+        selectors: { selector: string; attributes: string | string[] }[];
+      };
   removeAttrs: {
     elemSeparator?: string;
     preserveCurrentColor?: boolean;
diff --git a/plugins/removeAttributesBySelector.js b/plugins/removeAttributesBySelector.js
index 126eba468..ad02f4f01 100644
--- a/plugins/removeAttributesBySelector.js
+++ b/plugins/removeAttributesBySelector.js
@@ -1,9 +1,13 @@
-import { querySelectorAll } from '../lib/xast.js';
+import { matches } from '../lib/xast.js';
 
 export const name = 'removeAttributesBySelector';
 export const description =
   'removes attributes of elements that match a css selector';
 
+const ENOATTRS = `Warning: The plugin "removeAttributesBySelector" is missing parameters.
+It should have a list of "selectors", or one "selector" and one "attributes".
+Without either, the plugin is a noop.`;
+
 /**
  * Removes attributes of elements that match a css selector.
  *
@@ -74,22 +78,33 @@ export const description =
  * @type {import('./plugins-types.js').Plugin<'removeAttributesBySelector'>}
  */
 export const fn = (root, params) => {
+  if (
+    !Array.isArray(params.selectors) &&
+    (!params.selector || !params.attributes)
+  ) {
+    console.warn(ENOATTRS);
+    return null;
+  }
+
   const selectors = Array.isArray(params.selectors)
     ? params.selectors
     : [params];
-  for (const { selector, attributes } of selectors) {
-    const nodes = querySelectorAll(root, selector);
-    for (const node of nodes) {
-      if (node.type === 'element') {
-        if (Array.isArray(attributes)) {
-          for (const name of attributes) {
-            delete node.attributes[name];
+
+  return {
+    element: {
+      enter: (node) => {
+        for (const { selector, attributes } of selectors) {
+          if (matches(node, selector)) {
+            if (Array.isArray(attributes)) {
+              for (const name of attributes) {
+                delete node.attributes[name];
+              }
+            } else {
+              delete node.attributes[attributes];
+            }
           }
-        } else {
-          delete node.attributes[attributes];
         }
-      }
-    }
-  }
-  return {};
+      },
+    },
+  };
 };
diff --git a/test/plugins/removeAttributesBySelector.04.svg.txt b/test/plugins/removeAttributesBySelector.04.svg.txt
new file mode 100644
index 000000000..1a6b4ed36
--- /dev/null
+++ b/test/plugins/removeAttributesBySelector.04.svg.txt
@@ -0,0 +1,13 @@
+<svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <rect x="0" y="0" width="100" height="100" fill="#00ff00" stroke="#00ff00"/>
+</svg>
+
+@@@
+
+<svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <rect x="0" y="0" width="100" height="100" fill="#00ff00" stroke="#00ff00"/>
+</svg>
+
+@@@
+
+{}