Seperate walking Values from Declarations (#229)

Author: bartveneman

src/index.js

@@ -222,69 +222,43 @@ const analyze = (css) => {
         }
         break
       }
-      case 'Declaration': {
-        totalDeclarations++
-
-        const declaration = stringifyNode(node)
-        if (declarationsCache[declaration]) {
-          declarationsCache[declaration]++
-        } else {
-          declarationsCache[declaration] = 1
-        }
-
-        if (node.important) {
-          importantDeclarations++
-
-          if (this.atrule && endsWith('keyframes', this.atrule.name)) {
-            importantsInKeyframes++
-          }
-        }
+      case 'Value': {
+        values.push(node)
 
-        const { value, property } = node
-
-        properties.push(property)
-        values.push(value)
-
-        if (hasVendorPrefix(property)) {
-          propertyVendorPrefixes.push(property)
-        } else if (isHack(property)) {
-          propertyHacks.push(property)
-        } else if (isCustom(property)) {
-          customProperties.push(property)
-        }
+        const property = this.declaration.property
 
         // Process properties first that don't have colors,
         // so we can avoid further walking them;
         if (isProperty('z-index', property)) {
-          zindex.push(value)
+          zindex.push(node)
           return this.skip
         } else if (isProperty('font', property)) {
-          fontValues.push(value)
+          fontValues.push(node)
           break
         } else if (isProperty('font-size', property)) {
-          fontSizeValues.push(stringifyNode(value))
+          fontSizeValues.push(stringifyNode(node))
           break
         } else if (isProperty('font-family', property)) {
-          fontFamilyValues.push(stringifyNode(value))
+          fontFamilyValues.push(stringifyNode(node))
           break
         } else if (isProperty('transition', property) || isProperty('animation', property)) {
-          animations.push(value.children)
+          animations.push(node.children)
           break
         } else if (isProperty('animation-duration', property) || isProperty('transition-duration', property)) {
-          durations.push(stringifyNode(value))
+          durations.push(stringifyNode(node))
           break
         } else if (isProperty('transition-timing-function', property) || isProperty('animation-timing-function', property)) {
-          timingFunctions.push(stringifyNode(value))
+          timingFunctions.push(stringifyNode(node))
           break
         } else if (isProperty('text-shadow', property)) {
-          textShadows.push(value)
+          textShadows.push(node)
           // no break here: potentially contains colors
         } else if (isProperty('box-shadow', property)) {
-          boxShadows.push(value)
+          boxShadows.push(node)
           // no break here: potentially contains colors
         }
 
-        walk(value, function (valueNode) {
+        walk(node, function (valueNode) {
           switch (valueNode.type) {
             case 'Hash': {
               colors.push('#' + valueNode.value, property)
@@ -305,6 +279,10 @@ const analyze = (css) => {
               return this.skip
             }
             case 'Function': {
+              // Don't walk var() multiple times
+              if (strEquals('var', valueNode.name)) {
+                return this.skip
+              }
               if (colorFunctions[valueNode.name.toLowerCase()]) {
                 colors.push(stringifyNode(valueNode), property)
               }
@@ -313,6 +291,38 @@ const analyze = (css) => {
             }
           }
         })
+        break
+      }
+      case 'Declaration': {
+        totalDeclarations++
+
+        const declaration = stringifyNode(node)
+        if (declarationsCache[declaration]) {
+          declarationsCache[declaration]++
+        } else {
+          declarationsCache[declaration] = 1
+        }
+
+        if (node.important) {
+          importantDeclarations++
+
+          if (this.atrule && endsWith('keyframes', this.atrule.name)) {
+            importantsInKeyframes++
+          }
+        }
+
+        const { property } = node
+
+        properties.push(property)
+
+        if (hasVendorPrefix(property)) {
+          propertyVendorPrefixes.push(property)
+        } else if (isHack(property)) {
+          propertyHacks.push(property)
+        } else if (isCustom(property)) {
+          customProperties.push(property)
+        }
+        break
       }
     }
   })

src/values/colors.test.js

@@ -695,6 +695,68 @@ Colors.skip('ignores color names that are not actual colors', () => {
   assert.equal(actual, expected)
 })
 
+Colors('finds colors in var() as fallback values', () => {
+  const fixture = `
+    test {
+      --main: #aaa;
+      color: var(--main, #eee);
+
+      /* from github */
+      box-shadow: 0 3px 12px var(--color-fade-black-15), 0 0 1px rgba(27, 31, 35, .2);
+      text-shadow: 0 0 var(--main, var(--sec, #000));
+    }
+  `
+  const result = analyze(fixture)
+  const actual = result.values.colors
+  const expected = {
+    total: 4,
+    totalUnique: 4,
+    unique: {
+      '#aaa': 1,
+      '#eee': 1,
+      'rgba(27, 31, 35, .2)': 1,
+      '#000': 1,
+    },
+    uniquenessRatio: 4 / 4,
+    itemsPerContext: {
+      '--main': {
+        total: 1,
+        totalUnique: 1,
+        unique: {
+          '#aaa': 1,
+        },
+        uniquenessRatio: 1,
+      },
+      'color': {
+        total: 1,
+        totalUnique: 1,
+        unique: {
+          '#eee': 1,
+        },
+        uniquenessRatio: 1,
+      },
+      'box-shadow': {
+        total: 1,
+        totalUnique: 1,
+        unique: {
+          'rgba(27, 31, 35, .2)': 1,
+        },
+        uniquenessRatio: 1,
+      },
+      'text-shadow': {
+        total: 1,
+        totalUnique: 1,
+        unique: {
+          '#000': 1,
+        },
+        uniquenessRatio: 1,
+      },
+    },
+  }
+
+  assert.equal(actual, expected)
+})
+
 Colors('ignores CSS keywords', () => {
   const fixture = `
     testColorKeywords {