fix: convertColors plugin ignore currentColor in 'mask' elements (svg…

…#2032)
SethFalco · Jun 14, 2024 · e73d13a · e73d13a
1 parent 8d777dd
commit e73d13a
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 1 deletion.
diff --git a/plugins/convertColors.js b/plugins/convertColors.js
@@ -73,15 +73,20 @@ export const fn = (_root, params) => {
     shortname = true,
   } = params;
 
+  let maskCounter = 0;
+
   return {
     element: {
       enter: (node) => {
+        if (node.name === 'mask') {
+          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 +153,11 @@ export const fn = (_root, params) => {
           }
         }
       },
+      exit: (node) => {
+        if (node.name === 'mask') {
+          maskCounter--;
+        }
+      },
     },
   };
 };
diff --git a/test/plugins/convertColors.06.svg.txt b/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 }