From 3108a8159c40f80b93e33b42febbb727297c1e95 Mon Sep 17 00:00:00 2001
From: Antonio Salvati <salvan13@gmail.com>
Date: Tue, 11 Jun 2024 17:31:13 +0200
Subject: [PATCH 1/9] added ignoreElement to convertColors plugin

---
 docs/03-plugins/convertColors.mdx     |  3 +++
 plugins/convertColors.js              | 15 ++++++++++++
 plugins/plugins-types.d.ts            |  1 +
 test/plugins/convertColors.06.svg.txt | 35 +++++++++++++++++++++++++++
 4 files changed, 54 insertions(+)
 create mode 100644 test/plugins/convertColors.06.svg.txt

diff --git a/docs/03-plugins/convertColors.mdx b/docs/03-plugins/convertColors.mdx
index f0a0b00f1..1ff0fd90e 100644
--- a/docs/03-plugins/convertColors.mdx
+++ b/docs/03-plugins/convertColors.mdx
@@ -22,6 +22,9 @@ svgo:
     shortname:
       description: If to convert hex colors to the color name, if the color name is shorter then the hex equivalent.
       default: true
+    ignoreElements:
+      description: If to ignore all the element names contained in the provided array. eg: `["mask"]`. also ignore element's children.
+      default: []
 ---
 
 Converts color references to the shortest equivalent.
diff --git a/plugins/convertColors.js b/plugins/convertColors.js
index aa9c8fa77..094cf588f 100644
--- a/plugins/convertColors.js
+++ b/plugins/convertColors.js
@@ -1,5 +1,10 @@
 import { colorsNames, colorsProps, colorsShortNames } from './_collections.js';
 import { includesUrlReference } from '../lib/svgo/tools.js';
+import { visitSkip } from '../lib/xast.js';
+
+/**
+ * @typedef {import('../lib/types.js').XastNode} XastNode
+ */
 
 export const name = 'convertColors';
 export const description =
@@ -39,6 +44,12 @@ const convertRgbToHex = ([r, g, b]) => {
   return '#' + hexNumber.toString(16).slice(1).toUpperCase();
 };
 
+/**
+ * @type {(ignoredNodes: string[], node: XastNode) => boolean}
+ */
+const isIgnored = (ignoredElements, node) =>
+  node && node.type === 'element' && ignoredElements.includes(node.name);
+
 /**
  * Convert different colors formats in element attributes to hex.
  *
@@ -71,11 +82,15 @@ export const fn = (_root, params) => {
     convertCase = 'lower',
     shorthex = true,
     shortname = true,
+    ignoreElements = [],
   } = params;
 
   return {
     element: {
       enter: (node) => {
+        if (currentColor && isIgnored(ignoreElements, node)) {
+          return visitSkip;
+        }
         for (const [name, value] of Object.entries(node.attributes)) {
           if (colorsProps.has(name)) {
             let val = value;
diff --git a/plugins/plugins-types.d.ts b/plugins/plugins-types.d.ts
index bdd5de8ba..3df12cded 100644
--- a/plugins/plugins-types.d.ts
+++ b/plugins/plugins-types.d.ts
@@ -32,6 +32,7 @@ type DefaultPlugins = {
     convertCase?: false | 'lower' | 'upper';
     shorthex?: boolean;
     shortname?: boolean;
+    ignoreElements?: string[];
   };
   convertEllipseToCircle: void;
   convertPathData: {
diff --git a/test/plugins/convertColors.06.svg.txt b/test/plugins/convertColors.06.svg.txt
new file mode 100644
index 000000000..44fa29de3
--- /dev/null
+++ b/test/plugins/convertColors.06.svg.txt
@@ -0,0 +1,35 @@
+Do not touch the mask color attributes.
+
+===
+
+<svg xmlns="http://www.w3.org/2000/svg">
+    <mask id="mask1" fill="white" />
+    <mask id="mask2">
+        <path fill="white"/>
+    </mask>
+    <mask id="mask3">
+        <g>
+            <path fill="white"/>
+            <path stroke="black"/>
+        </g>
+    </mask>
+</svg>
+
+@@@
+
+<svg xmlns="http://www.w3.org/2000/svg">
+    <mask id="mask1" fill="white"/>
+    <mask id="mask2">
+        <path fill="white"/>
+    </mask>
+    <mask id="mask3">
+        <g>
+            <path fill="white"/>
+            <path stroke="black"/>
+        </g>
+    </mask>
+</svg>
+
+@@@
+
+{ "currentColor": true, "ignoreElements": ["mask"] }

From 098f9a4f3853c8f21373595fe1525e13e48db9e1 Mon Sep 17 00:00:00 2001
From: Antonio Salvati <salvan13@gmail.com>
Date: Tue, 11 Jun 2024 17:48:39 +0200
Subject: [PATCH 2/9] improve test

---
 test/plugins/convertColors.06.svg.txt | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/test/plugins/convertColors.06.svg.txt b/test/plugins/convertColors.06.svg.txt
index 44fa29de3..87da2ca68 100644
--- a/test/plugins/convertColors.06.svg.txt
+++ b/test/plugins/convertColors.06.svg.txt
@@ -3,6 +3,7 @@ Do not touch the mask color attributes.
 ===
 
 <svg xmlns="http://www.w3.org/2000/svg">
+    <path fill="white"/>
     <mask id="mask1" fill="white" />
     <mask id="mask2">
         <path fill="white"/>
@@ -18,6 +19,7 @@ Do not touch the mask color attributes.
 @@@
 
 <svg xmlns="http://www.w3.org/2000/svg">
+    <path fill="currentcolor"/>
     <mask id="mask1" fill="white"/>
     <mask id="mask2">
         <path fill="white"/>

From c114eb3eea3620c9f3fd3af8458c1ea7cb8c94c4 Mon Sep 17 00:00:00 2001
From: Antonio Salvati <salvan13@gmail.com>
Date: Wed, 12 Jun 2024 08:51:53 +0200
Subject: [PATCH 3/9] improve code

---
 plugins/convertColors.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/plugins/convertColors.js b/plugins/convertColors.js
index 094cf588f..63bf21115 100644
--- a/plugins/convertColors.js
+++ b/plugins/convertColors.js
@@ -48,7 +48,7 @@ const convertRgbToHex = ([r, g, b]) => {
  * @type {(ignoredNodes: string[], node: XastNode) => boolean}
  */
 const isIgnored = (ignoredElements, node) =>
-  node && node.type === 'element' && ignoredElements.includes(node.name);
+  node && node.type === 'element' && ignoredElements && ignoredElements.includes(node.name);
 
 /**
  * Convert different colors formats in element attributes to hex.
@@ -88,7 +88,7 @@ export const fn = (_root, params) => {
   return {
     element: {
       enter: (node) => {
-        if (currentColor && isIgnored(ignoreElements, node)) {
+        if (isIgnored(ignoreElements, node)) {
           return visitSkip;
         }
         for (const [name, value] of Object.entries(node.attributes)) {

From e75ba9b047a1f2be5efbb21867eaabcaceeb8636 Mon Sep 17 00:00:00 2001
From: Antonio Salvati <salvan13@gmail.com>
Date: Wed, 12 Jun 2024 08:54:47 +0200
Subject: [PATCH 4/9] improve test description

---
 test/plugins/convertColors.06.svg.txt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/plugins/convertColors.06.svg.txt b/test/plugins/convertColors.06.svg.txt
index 87da2ca68..6a346b673 100644
--- a/test/plugins/convertColors.06.svg.txt
+++ b/test/plugins/convertColors.06.svg.txt
@@ -1,4 +1,4 @@
-Do not touch the mask color attributes.
+Do not touch the ignored elements color attributes.
 
 ===
 

From 729e8b5d63d50d8461fcbac4d8cc6adf72998317 Mon Sep 17 00:00:00 2001
From: Antonio Salvati <salvan13@gmail.com>
Date: Fri, 14 Jun 2024 09:08:25 +0200
Subject: [PATCH 5/9] ignore currentColor in 'mask' elements

---
 docs/03-plugins/convertColors.mdx     |  3 ---
 plugins/convertColors.js              | 21 +++++++++++++--------
 plugins/plugins-types.d.ts            |  1 -
 test/plugins/convertColors.06.svg.txt | 14 ++++++++------
 4 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/docs/03-plugins/convertColors.mdx b/docs/03-plugins/convertColors.mdx
index 1ff0fd90e..f0a0b00f1 100644
--- a/docs/03-plugins/convertColors.mdx
+++ b/docs/03-plugins/convertColors.mdx
@@ -22,9 +22,6 @@ svgo:
     shortname:
       description: If to convert hex colors to the color name, if the color name is shorter then the hex equivalent.
       default: true
-    ignoreElements:
-      description: If to ignore all the element names contained in the provided array. eg: `["mask"]`. also ignore element's children.
-      default: []
 ---
 
 Converts color references to the shortest equivalent.
diff --git a/plugins/convertColors.js b/plugins/convertColors.js
index 63bf21115..6817a292f 100644
--- a/plugins/convertColors.js
+++ b/plugins/convertColors.js
@@ -1,6 +1,5 @@
 import { colorsNames, colorsProps, colorsShortNames } from './_collections.js';
 import { includesUrlReference } from '../lib/svgo/tools.js';
-import { visitSkip } from '../lib/xast.js';
 
 /**
  * @typedef {import('../lib/types.js').XastNode} XastNode
@@ -45,10 +44,10 @@ const convertRgbToHex = ([r, g, b]) => {
 };
 
 /**
- * @type {(ignoredNodes: string[], node: XastNode) => boolean}
+ * @type {(node: XastNode) => boolean}
  */
-const isIgnored = (ignoredElements, node) =>
-  node && node.type === 'element' && ignoredElements && ignoredElements.includes(node.name);
+const isMask = (node) =>
+  node && node.type === 'element' && node.name === 'mask';
 
 /**
  * Convert different colors formats in element attributes to hex.
@@ -82,21 +81,22 @@ export const fn = (_root, params) => {
     convertCase = 'lower',
     shorthex = true,
     shortname = true,
-    ignoreElements = [],
   } = params;
 
+  let maskCounter = 0;
+
   return {
     element: {
       enter: (node) => {
-        if (isIgnored(ignoreElements, node)) {
-          return visitSkip;
+        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;
@@ -163,6 +163,11 @@ export const fn = (_root, params) => {
           }
         }
       },
+      exit: (node) => {
+        if (isMask(node)) {
+          maskCounter--;
+        }
+      },
     },
   };
 };
diff --git a/plugins/plugins-types.d.ts b/plugins/plugins-types.d.ts
index 3df12cded..bdd5de8ba 100644
--- a/plugins/plugins-types.d.ts
+++ b/plugins/plugins-types.d.ts
@@ -32,7 +32,6 @@ type DefaultPlugins = {
     convertCase?: false | 'lower' | 'upper';
     shorthex?: boolean;
     shortname?: boolean;
-    ignoreElements?: string[];
   };
   convertEllipseToCircle: void;
   convertPathData: {
diff --git a/test/plugins/convertColors.06.svg.txt b/test/plugins/convertColors.06.svg.txt
index 6a346b673..f73744334 100644
--- a/test/plugins/convertColors.06.svg.txt
+++ b/test/plugins/convertColors.06.svg.txt
@@ -1,4 +1,4 @@
-Do not touch the ignored elements color attributes.
+Do not apply currentColor to masks.
 
 ===
 
@@ -14,24 +14,26 @@ Do not touch the ignored elements color attributes.
             <path stroke="black"/>
         </g>
     </mask>
+    <path fill="red"/>
 </svg>
 
 @@@
 
 <svg xmlns="http://www.w3.org/2000/svg">
     <path fill="currentcolor"/>
-    <mask id="mask1" fill="white"/>
+    <mask id="mask1" fill="#fff"/>
     <mask id="mask2">
-        <path fill="white"/>
+        <path fill="#fff"/>
     </mask>
     <mask id="mask3">
         <g>
-            <path fill="white"/>
-            <path stroke="black"/>
+            <path fill="#fff"/>
+            <path stroke="#000"/>
         </g>
     </mask>
+    <path fill="currentcolor"/>
 </svg>
 
 @@@
 
-{ "currentColor": true, "ignoreElements": ["mask"] }
+{ "currentColor": true }

From a783542540d5c065443c86e4b28ff36891566e00 Mon Sep 17 00:00:00 2001
From: Antonio Salvati <salvan13@gmail.com>
Date: Fri, 14 Jun 2024 09:25:42 +0200
Subject: [PATCH 6/9] update convertColors mask test

---
 test/plugins/convertColors.06.svg.txt | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/test/plugins/convertColors.06.svg.txt b/test/plugins/convertColors.06.svg.txt
index f73744334..5c5c607de 100644
--- a/test/plugins/convertColors.06.svg.txt
+++ b/test/plugins/convertColors.06.svg.txt
@@ -6,13 +6,14 @@ Do not apply currentColor to masks.
     <path fill="white"/>
     <mask id="mask1" fill="white" />
     <mask id="mask2">
-        <path fill="white"/>
+        <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>
@@ -23,13 +24,14 @@ Do not apply currentColor to masks.
     <path fill="currentcolor"/>
     <mask id="mask1" fill="#fff"/>
     <mask id="mask2">
-        <path fill="#fff"/>
+        <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>

From c343b07829727b8f413ac09a562b6a84a81f25be Mon Sep 17 00:00:00 2001
From: Antonio Salvati <salvan13@gmail.com>
Date: Fri, 14 Jun 2024 11:07:09 +0200
Subject: [PATCH 7/9] use XastElement instead of XastNode

Co-authored-by: Seth Falco <seth@falco.fun>
---
 plugins/convertColors.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/plugins/convertColors.js b/plugins/convertColors.js
index 6817a292f..045b88146 100644
--- a/plugins/convertColors.js
+++ b/plugins/convertColors.js
@@ -44,10 +44,9 @@ const convertRgbToHex = ([r, g, b]) => {
 };
 
 /**
- * @type {(node: XastNode) => boolean}
+ * @type {(node: XastElement) => boolean}
  */
-const isMask = (node) =>
-  node && node.type === 'element' && node.name === 'mask';
+const isMask = (node) => node.name === 'mask'
 
 /**
  * Convert different colors formats in element attributes to hex.

From a59e28b5251b0f2178b9de22ec0fcf444c5c100b Mon Sep 17 00:00:00 2001
From: Antonio Salvati <salvan13@gmail.com>
Date: Fri, 14 Jun 2024 11:10:15 +0200
Subject: [PATCH 8/9] inline mask condition

---
 plugins/convertColors.js | 13 ++-----------
 1 file changed, 2 insertions(+), 11 deletions(-)

diff --git a/plugins/convertColors.js b/plugins/convertColors.js
index 045b88146..fe539c4e1 100644
--- a/plugins/convertColors.js
+++ b/plugins/convertColors.js
@@ -1,10 +1,6 @@
 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';
@@ -43,11 +39,6 @@ const convertRgbToHex = ([r, g, b]) => {
   return '#' + hexNumber.toString(16).slice(1).toUpperCase();
 };
 
-/**
- * @type {(node: XastElement) => boolean}
- */
-const isMask = (node) => node.name === 'mask'
-
 /**
  * Convert different colors formats in element attributes to hex.
  *
@@ -87,7 +78,7 @@ export const fn = (_root, params) => {
   return {
     element: {
       enter: (node) => {
-        if (isMask(node)) {
+        if (node.name === "mask") {
           maskCounter++;
         }
         for (const [name, value] of Object.entries(node.attributes)) {
@@ -163,7 +154,7 @@ export const fn = (_root, params) => {
         }
       },
       exit: (node) => {
-        if (isMask(node)) {
+        if (node.name === "mask") {
           maskCounter--;
         }
       },

From 553d7651a6f45ab72afbf24103a70f006eee5255 Mon Sep 17 00:00:00 2001
From: Antonio Salvati <salvan13@gmail.com>
Date: Fri, 14 Jun 2024 11:13:50 +0200
Subject: [PATCH 9/9] lint fix

---
 plugins/convertColors.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/plugins/convertColors.js b/plugins/convertColors.js
index fe539c4e1..6c7fdfd0b 100644
--- a/plugins/convertColors.js
+++ b/plugins/convertColors.js
@@ -78,7 +78,7 @@ export const fn = (_root, params) => {
   return {
     element: {
       enter: (node) => {
-        if (node.name === "mask") {
+        if (node.name === 'mask') {
           maskCounter++;
         }
         for (const [name, value] of Object.entries(node.attributes)) {
@@ -154,7 +154,7 @@ export const fn = (_root, params) => {
         }
       },
       exit: (node) => {
-        if (node.name === "mask") {
+        if (node.name === 'mask') {
           maskCounter--;
         }
       },