Fixes false positives on colors that are almost duplicates

Author: bartveneman

src/analyzer/values/colors.js

@@ -69,13 +69,11 @@ const addShortestNotation = color => {
 const addAliases = (acc, curr) => {
   if (!acc[curr.key]) {
     acc[curr.key] = {
-      key: curr.key,
       aliases: []
     }
   }
 
   acc[curr.key] = {
-    ...acc[curr.key],
     aliases: [...acc[curr.key].aliases, curr]
   }
 
@@ -93,17 +91,21 @@ const validateColor = color => {
 
 const normalizeColors = color => {
   // Add a normalized value
+
+  // Avoid using TinyColor's toHslString() because it rounds
+  // the numbers and incorrectly reports aliases
+  const {h, s, l, a} = tinycolor(color.value).toHsl()
+
   return {
     ...color,
-    key: tinycolor(color.value).toHslString()
+    key: `h${h}s${s}l${l}a${a}`
   }
 }
 
 const rmTmpProps = color => {
   // Remove temporary props that were needed for analysis
-  const {key, ...restColor} = color
   return {
-    ...restColor,
+    ...color,
     aliases: color.aliases.map(alias => {
       const {key, ...restAlias} = alias
       return restAlias

test/analyzer/values/input.css

@@ -68,6 +68,10 @@
   color: rgba(0,0,0,1);
   color: hsl(0,0,0);
   color: hsla(0,0,0,1);
+
+  /* Almost duplicates */
+  color: #d9d9d9;
+  color: #dadada;
 }
 .color-keyword {
   outline: 1px solid tomato;

test/analyzer/values/output.json

@@ -1,5 +1,5 @@
 {
-  "total": 91,
+  "total": 93,
   "fontfamilies": {
     "total": 18,
     "totalUnique": 12,
@@ -121,11 +121,11 @@
         "count": 1
       }
     ],
-    "share": 0.04395604395604396
+    "share": 0.043010752688172046
   },
   "colors": {
-    "total": 37,
-    "totalUnique": 35,
+    "total": 39,
+    "totalUnique": 37,
     "unique": [
       {
         "value": "#000",
@@ -147,6 +147,14 @@
         "value": "#aff034",
         "count": 1
       },
+      {
+        "value": "#d9d9d9",
+        "count": 1
+      },
+      {
+        "value": "#dadada",
+        "count": 1
+      },
       {
         "value": "#fff",
         "count": 1