feat: convertColors plugin ignore currentColor in 'mask' elements

plugins/convertColors.js

@@ -1,6 +1,10 @@
 import { colorsNames, colorsProps, colorsShortNames } from './_collections.js';
 import { includesUrlReference } from '../lib/svgo/tools.js';
 
+/**
+ * @typedef {import('../lib/types.js').XastNode} XastNode
+ */
+
 export const name = 'convertColors';
 export const description =
   'converts colors: rgb() to #rrggbb and #rrggbb to #rgb';
@@ -39,6 +43,12 @@ const convertRgbToHex = ([r, g, b]) => {
   return '#' + hexNumber.toString(16).slice(1).toUpperCase();
 };
 
+/**
+ * @type {(node: XastNode) => boolean}
+ */
+const isMask = (node) =>
+  node && node.type === 'element' && node.name === 'mask';
+
 /**
  * Convert different colors formats in element attributes to hex.
  *
@@ -73,15 +83,20 @@ export const fn = (_root, params) => {
     shortname = true,
   } = params;
 
+  let maskCounter = 0;
+
   return {
     element: {
       enter: (node) => {
+        if (isMask(node)) {
+          maskCounter++;
+        }
         for (const [name, value] of Object.entries(node.attributes)) {
           if (colorsProps.has(name)) {
             let val = value;
 
             // convert colors to currentColor
-            if (currentColor) {
+            if (currentColor && maskCounter === 0) {
               let matched;
               if (typeof currentColor === 'string') {
                 matched = val === currentColor;
@@ -148,6 +163,11 @@ export const fn = (_root, params) => {
           }
         }
       },
+      exit: (node) => {
+        if (isMask(node)) {
+          maskCounter--;
+        }
+      },
     },
   };
 };

test/plugins/convertColors.06.svg.txt

@@ -0,0 +1,41 @@
+Do not apply currentColor to masks.
+
+===
+
+<svg xmlns="http://www.w3.org/2000/svg">
+    <path fill="white"/>
+    <mask id="mask1" fill="white" />
+    <mask id="mask2">
+        <path fill="rgba(255,255,255,0.75)"/>
+    </mask>
+    <mask id="mask3">
+        <g>
+            <path fill="white"/>
+            <path stroke="black"/>
+        </g>
+        <mask id="inner-mask" fill="rgba(0,0,0,.5)"></mask>
+    </mask>
+    <path fill="red"/>
+</svg>
+
+@@@
+
+<svg xmlns="http://www.w3.org/2000/svg">
+    <path fill="currentcolor"/>
+    <mask id="mask1" fill="#fff"/>
+    <mask id="mask2">
+        <path fill="rgba(255,255,255,0.75)"/>
+    </mask>
+    <mask id="mask3">
+        <g>
+            <path fill="#fff"/>
+            <path stroke="#000"/>
+        </g>
+        <mask id="inner-mask" fill="rgba(0,0,0,.5)"/>
+    </mask>
+    <path fill="currentcolor"/>
+</svg>
+
+@@@
+
+{ "currentColor": true }