Reduce LOC for color analysis

* Loop over the color regexes instead of going over them one by
  one manually
* Fix broken test where `whitesmoke` wasn't recognised as color
* Add extra test to make sure that colors of different types
  are found in a single value

src/analyzer/values/colors.js

@@ -16,37 +16,16 @@ module.exports = declarations => {
       return
     }
 
-    // COLOR NAMES
-    const nameRegex = utils.color.regex.name
-    let keywordMatches = nameRegex.exec(value)
-    while (keywordMatches) {
-      _all.push(keywordMatches[0])
-      keywordMatches = nameRegex.exec(value)
-    }
-
-    // HEX(A)
-    const hexRegex = utils.color.regex.hex
-    let hexMatches = hexRegex.exec(value)
-    while (hexMatches) {
-      _all.push(hexMatches[0])
-      hexMatches = hexRegex.exec(value)
-    }
-
-    // RGB(A)
-    const rgbRegex = utils.color.regex.rgb
-    let rgbMatches = rgbRegex.exec(value)
-    while (rgbMatches) {
-      _all.push(rgbMatches[0])
-      rgbMatches = rgbRegex.exec(value)
-    }
-
-    // HSL(A)
-    const hslRegex = utils.color.regex.hsl
-    let hslMatches = hslRegex.exec(value)
-    while (hslMatches) {
-      _all.push(hslMatches[0])
-      hslMatches = hslRegex.exec(value)
-    }
+    // Try all regexes for hsl(a), rgb(a) and hex(a)
+    Object.keys(utils.color.regex).forEach(reg => {
+      const regex = utils.color.regex[reg]
+      let matches = regex.exec(value)
+
+      while (matches) {
+        _all.push(matches[0])
+        matches = regex.exec(value)
+      }
+    })
   })
 
   const all = _all

src/utils/css.js

@@ -28,8 +28,10 @@ module.exports.color = {
   ],
 
   // Source: https://github.com/tiaanduplessis/colors-regex/blob/master/index.js
+  // Colornames are reversed to make sure that 'white' is matched before
+  // 'whitesmoke' etc.
   regex: {
-    name: new RegExp(`${colorNameDelimiter}(${Object.keys(colorNames).join('|')})${colorNameDelimiter}`, 'gi'),
+    name: new RegExp(`${colorNameDelimiter}(${Object.keys(colorNames).reverse().join('|')})${colorNameDelimiter}`, 'gi'),
     hex: /#([a-f0-9]{8}|[a-f0-9]{6}|[a-f0-9]{4}|[a-f0-9]{3})\b/gi,
     rgb: /rgba\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3}),\s*(\d*(?:\.\d+)?)\)|rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)/gi,
     hsl: /hsl\(\s*(\d+)\s*,\s*(\d*(?:\.\d+)?%)\s*,\s*(\d*(?:\.\d+)?%)\)|hsla\((\d+),\s*([\d.]+)%,\s*([\d.]+)%,\s*(\d*(?:\.\d+)?)\)/gi

test/analyzer/values/input.css

@@ -28,6 +28,7 @@
 .color13 { color: #0000ff00; }
 .color14 { background: rgba(2,2,2,.2) }
 .color15 { background: hsl(100, 10%, 20%) }
+.color16 { background: linear-gradient(to right, hsl(360, 100%, 100%), rgb(255, 255, 255), #fff, white) }
 .color-false { background-image: url('icon-blue.png'), url('blue-icon.png'), url('blue_icon.png'), url('icon_blue.png'); }
 .color-false { white-space: nowrap; }
 .color-false { color: inherit; color: initial; color: auto; background: none; color: currentColor; color: transparent; }

test/analyzer/values/output.json

@@ -1,5 +1,5 @@
 {
-  "total": 65,
+  "total": 66,
   "fontfamilies": {
     "total": 18,
     "totalUnique": 12,
@@ -43,27 +43,31 @@
       "-o-linear-gradient(transparent, transparent)",
       "-webkit-gradient(transparent, transparent)"
     ],
-    "share": 0.06153846153846154
+    "share": 0.06060606060606061
   },
   "colors": {
-    "total": 18,
-    "totalUnique": 15,
+    "total": 22,
+    "totalUnique": 19,
     "unique": [
       "#0000ff00",
       "#aaa",
       "#aff034",
+      "#fff",
       "Aqua",
       "hsl(100, 10%, 20%)",
       "hsl(100, 20%, 30%)",
+      "hsl(360, 100%, 100%)",
       "hsla(100, 20%, 30%, 0.5)",
       "purple",
       "red",
       "rgb(100, 200, 10)",
+      "rgb(255, 255, 255)",
       "rgba(100, 200, 10, .5)",
       "rgba(100, 200, 10, 0.5)",
       "rgba(2,2,2,.2)",
       "tomato",
-      "white"
+      "white",
+      "whitesmoke"
     ]
   }
 }