fix(removeAttributesBySelector): update for v2 API, better docs, add parameter types

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
 ---
 

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;

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 {};
+      },
+    },
+  };
 };

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>
+
+@@@
+
+{}