feat(convertcolors): add param to convert colors to common case (#1692)

Author: JayLeininger

docs/03-plugins/convert-colors.mdx

@@ -5,14 +5,17 @@ svgo:
   defaultPlugin: true
   parameters:
     currentColor:
-      description: If to convert all instances of a color to <code>currentColor</code>. This means to inherit the active foreground color, for example in HTML5 this would be the <a href="https://developer.mozilla.org/docs/Web/CSS/color" target="_blank"><code>color</code></a> property in CSS.
+      description: If to convert all instances of a color to <code>currentcolor</code>. This means to inherit the active foreground color, for example in HTML5 this would be the <a href="https://developer.mozilla.org/docs/Web/CSS/color" target="_blank"><code>color</code></a> property in CSS.
       default: false
     names2hex:
       description: If to convert color names to the hex equivalent.
       default: true
     rgb2hex:
-      description: If to convert RGB colors to the hex equivalent, does ignores RGBA.
+      description: If to convert RGB colors to the hex equivalent, ignores RGBA.
       default: true
+    convertCase:
+      description: Convert all color values to either upper or lower case by setting this to <code>'upper'</code>  or <code>'lower'</code> respectively to improve compression. Set to <code>false</code> to disable this behavior.
+      default: 'lower'
     shorthex:
       description: If to convert 6 character hex colors to the 3 character equivalent where possible.
       default: true

docs/03-plugins/remove-attrs.mdx

@@ -10,7 +10,7 @@ svgo:
       description: The pattern syntax used by this plugin is <code>element:attribute:value</code>, this changes the delimiter from <code>:</code> to another string.
       default: ':'
     preserveCurrentColor:
-      description: If to ignore the attribute if it's set to <code>currentColor</code>.
+      description: If to ignore the attribute when it's set to <code>currentcolor</code>.
       default: false
 ---
 

plugins/convertColors.js

@@ -1,4 +1,5 @@
 import { colorsNames, colorsProps, colorsShortNames } from './_collections.js';
+import { includesUrlReference } from '../lib/svgo/tools.js';
 
 export const name = 'convertColors';
 export const description =
@@ -67,6 +68,7 @@ export const fn = (_root, params) => {
     currentColor = false,
     names2hex = true,
     rgb2hex = true,
+    convertCase = 'lower',
     shorthex = true,
     shortname = true,
   } = params;
@@ -89,7 +91,7 @@ export const fn = (_root, params) => {
                 matched = val !== 'none';
               }
               if (matched) {
-                val = 'currentColor';
+                val = 'currentcolor';
               }
             }
 
@@ -118,9 +120,17 @@ export const fn = (_root, params) => {
               }
             }
 
+            if (convertCase && !includesUrlReference(val)) {
+              if (convertCase === 'lower') {
+                val = val.toLowerCase();
+              } else if (convertCase === 'upper') {
+                val = val.toUpperCase();
+              }
+            }
+
             // convert long hex to short hex
             if (shorthex) {
-              let match = val.match(regHEX);
+              let match = regHEX.exec(val);
               if (match != null) {
                 val = '#' + match[0][1] + match[0][3] + match[0][5];
               }

plugins/plugins-types.d.ts

@@ -29,6 +29,7 @@ type DefaultPlugins = {
     currentColor?: boolean | string | RegExp;
     names2hex?: boolean;
     rgb2hex?: boolean;
+    convertCase?: false | 'lower' | 'upper';
     shorthex?: boolean;
     shortname?: boolean;
   };

plugins/removeAttrs.js

@@ -122,14 +122,11 @@ export const fn = (root, params) => {
           if (list[0].test(node.name)) {
             // loop attributes
             for (const [name, value] of Object.entries(node.attributes)) {
+              const isCurrentColor = value.toLowerCase() === 'currentcolor';
               const isFillCurrentColor =
-                preserveCurrentColor &&
-                name == 'fill' &&
-                value == 'currentColor';
+                preserveCurrentColor && name == 'fill' && isCurrentColor;
               const isStrokeCurrentColor =
-                preserveCurrentColor &&
-                name == 'stroke' &&
-                value == 'currentColor';
+                preserveCurrentColor && name == 'stroke' && isCurrentColor;
               if (
                 !isFillCurrentColor &&
                 !isStrokeCurrentColor &&

test/coa/testSvg/test.1.svg

@@ -12,6 +12,6 @@
     <g color="#000"/>
     <g color="#000"/>
     <path fill="#404040"/>
-    <path fill="#DCDDDE"/>
-    <path fill="#0064FF"/>
+    <path fill="#dcddde"/>
+    <path fill="#0064ff"/>
 </svg>

test/coa/testSvg/test.svg

@@ -11,15 +11,15 @@
 @@@
 
 <svg xmlns="http://www.w3.org/2000/svg">
-    <g color="currentColor"/>
-    <g color="currentColor"/>
+    <g color="currentcolor"/>
+    <g color="currentcolor"/>
     <g color="none"/>
-    <path fill="currentColor"/>
-    <path fill="currentColor"/>
-    <path fill="currentColor"/>
+    <path fill="currentcolor"/>
+    <path fill="currentcolor"/>
+    <path fill="currentcolor"/>
     <path fill="none"/>
 </svg>
 
 @@@
 
-{ "currentColor": true }
+{ "currentColor": true }

test/plugins/convertColors.01.svg.txt

@@ -0,0 +1,23 @@
+Do not touch the casing of URL references in color attributes.
+
+===
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150">
+    <linearGradient id="Aa">
+        <stop stop-color="ReD" offset="5%"/>
+    </linearGradient>
+    <text x="0" y="32" fill="gold">uwu</text>
+    <text x="0" y="64" fill="GOLD">owo</text>
+    <text x="0" y="96" fill="url(#Aa)">eue</text>
+</svg>
+
+@@@
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150">
+    <linearGradient id="Aa">
+        <stop stop-color="red" offset="5%"/>
+    </linearGradient>
+    <text x="0" y="32" fill="gold">uwu</text>
+    <text x="0" y="64" fill="gold">owo</text>
+    <text x="0" y="96" fill="url(#Aa)">eue</text>
+</svg>