Report fully transparent colors as aliases (#65)

`rgba(0,0,0,0)` is visually the same as `rgba(255,255,255,0)`, so let's report them as aliases

Closes #63

Author: bartveneman

src/analyzer/values/colors.js

@@ -68,14 +68,14 @@ const addShortestNotation = color => {
 }
 
 const addAliases = (acc, curr) => {
-  if (!acc[curr.key]) {
-    acc[curr.key] = {
+  if (!acc[curr.normalized]) {
+    acc[curr.normalized] = {
       aliases: []
     }
   }
 
-  acc[curr.key] = {
-    aliases: [...acc[curr.key].aliases, curr]
+  acc[curr.normalized] = {
+    aliases: [...acc[curr.normalized].aliases, curr]
   }
 
   return acc
@@ -96,10 +96,11 @@ const normalizeColors = color => {
   // Avoid using TinyColor's toHslString() because it rounds
   // the numbers and incorrectly reports aliases
   const {h, s, l, a} = tinycolor(color.value).toHsl()
+  const normalized = a === 0 ? 0 : `h${h}s${s}l${l}a${a}`
 
   return {
     ...color,
-    key: `h${h}s${s}l${l}a${a}`
+    normalized
   }
 }
 
@@ -108,7 +109,7 @@ const rmTmpProps = color => {
   return {
     ...color,
     aliases: color.aliases.map(alias => {
-      const {key, ...restAlias} = alias
+      const {normalized, ...restAlias} = alias
       return restAlias
     })
   }

test/analyzer/values/input.css

@@ -26,7 +26,7 @@
 .color-hex {
   color: #aff034;
   border: 1px solid #aaa;
-  color: #0000ff00; /* Including opacity */
+  color: #0000ffaa; /* Including opacity */
 }
 .color-rgb {
   color: rgb(100, 200, 10);
@@ -59,12 +59,16 @@
   color: #000;
   color: #000000;
   color: black;
-  color: black; /* duplicate */
+  color: black;
   color: rgb(0,0,0);
   color: rgba(0,0,0,1);
   color: hsl(0,0,0);
   color: hsla(0,0,0,1);
 
+  /* Fully transparent aliases */
+  color: rgba(0,0,0,0);
+  color: hsla(0,0%,0%,0);
+
   /* Almost duplicates */
   color: #d9d9d9;
   color: #dadada;

test/analyzer/values/output.json

@@ -1,5 +1,5 @@
 {
-  "total": 90,
+  "total": 92,
   "fontfamilies": {
     "total": 18,
     "totalUnique": 12,
@@ -121,11 +121,11 @@
         "count": 1
       }
     ],
-    "share": 0.044444444444444446
+    "share": 0.043478260869565216
   },
   "colors": {
-    "total": 36,
-    "totalUnique": 34,
+    "total": 38,
+    "totalUnique": 36,
     "unique": [
       {
         "value": "tomato",
@@ -136,11 +136,11 @@
         "count": 1
       },
       {
-        "value": "rgb(100, 200, 10)",
+        "value": "rgba(100, 200, 10, 0.5)",
         "count": 1
       },
       {
-        "value": "rgba(100, 200, 10, 0.5)",
+        "value": "rgb(100, 200, 10)",
         "count": 1
       },
       {
@@ -164,25 +164,29 @@
         "count": 1
       },
       {
-        "value": "hsl(270, 60%, 70%)",
+        "value": "#0000ffaa",
         "count": 1
       },
       {
-        "value": "hsl(270,60%,70%)",
+        "value": "hsl(270 60% 70%)",
         "count": 1
       },
       {
-        "value": "hsl(270 60% 70%)",
+        "value": "hsl(270, 60%, 70%)",
         "count": 1
       },
       {
-        "value": "hsl(270 60% 50% / 15%)",
+        "value": "hsl(270,60%,70%)",
         "count": 1
       },
       {
         "value": "hsl(270 60% 50% / .15)",
         "count": 1
       },
+      {
+        "value": "hsl(270 60% 50% / 15%)",
+        "count": 1
+      },
       {
         "value": "hsl(270, 60%, 50%, .15)",
         "count": 1
@@ -260,11 +264,29 @@
         "count": 1
       },
       {
-        "value": "#0000ff00",
+        "value": "rgba(0,0,0,0)",
+        "count": 1
+      },
+      {
+        "value": "hsla(0,0%,0%,0)",
         "count": 1
       }
     ],
     "duplicates": [
+      {
+        "count": 2,
+        "value": "rgba(0,0,0,0)",
+        "aliases": [
+          {
+            "value": "rgba(0,0,0,0)",
+            "count": 1
+          },
+          {
+            "value": "hsla(0,0%,0%,0)",
+            "count": 1
+          }
+        ]
+      },
       {
         "value": "rgba(100, 200, 10, .5)",
         "count": 2,
@@ -280,34 +302,34 @@
         ]
       },
       {
-        "value": "hsl(270,60%,70%)",
+        "value": "hsl(270 60% 70%)",
         "count": 3,
         "aliases": [
           {
             "count": 1,
-            "value": "hsl(270, 60%, 70%)"
+            "value": "hsl(270 60% 70%)"
           },
           {
             "count": 1,
-            "value": "hsl(270,60%,70%)"
+            "value": "hsl(270, 60%, 70%)"
           },
           {
             "count": 1,
-            "value": "hsl(270 60% 70%)"
+            "value": "hsl(270,60%,70%)"
           }
         ]
       },
       {
-        "value": "hsl(270 60% 50% / 15%)",
+        "value": "hsl(270 60% 50% / .15)",
         "count": 4,
         "aliases": [
           {
             "count": 1,
-            "value": "hsl(270 60% 50% / 15%)"
+            "value": "hsl(270 60% 50% / .15)"
           },
           {
             "count": 1,
-            "value": "hsl(270 60% 50% / .15)"
+            "value": "hsl(270 60% 50% / 15%)"
           },
           {
             "count": 1,