avoid getting property basenames if we can (#226)

Author: bartveneman

benchmark/readme.md

@@ -24,13 +24,13 @@ Trello.com              (312 kB):  13.15 ops/sec
 ====================================================================
 File                    | Size   |  total | parse | Analyze        |
 ====================================================================
-Bol.com                 | 468 kB |  328ms | 205ms |  122ms (37.2%) |
-Bootstrap 5.0.0         | 195 kB |  142ms | 102ms |   40ms (28.2%) |
-CSS-Tricks              | 195 kB |  113ms |  60ms |   53ms (46.9%) |
-Facebook.com            | 268 kB |  132ms |  69ms |   62ms (47.0%) |
-GitHub.com              | 514 kB |  203ms | 114ms |   87ms (42.9%) |
-Gazelle.nl              | 972 kB |  366ms | 228ms |  134ms (36.6%) |
-Lego.com                | 246 kB |   86ms |  38ms |   48ms (55.8%) |
-Smashing Magazine.com   | 1.1 MB |  428ms | 219ms |  208ms (48.6%) |
-Trello.com              | 312 kB |  131ms |  72ms |   59ms (45.0%) |
+Bol.com                 | 468 kB |  328ms | 207ms |  120ms (36.6%) |
+Bootstrap 5.0.0         | 195 kB |  120ms |  80ms |   39ms (32.5%) |
+CSS-Tricks              | 195 kB |   96ms |  64ms |   32ms (33.3%) |
+Facebook.com            | 268 kB |  134ms |  78ms |   56ms (41.8%) |
+GitHub.com              | 514 kB |  172ms |  91ms |   79ms (45.9%) |
+Gazelle.nl              | 972 kB |  363ms | 225ms |  134ms (36.9%) |
+Lego.com                | 246 kB |   77ms |  40ms |   36ms (46.8%) |
+Smashing Magazine.com   | 1.1 MB |  350ms | 210ms |  139ms (39.7%) |
+Trello.com              | 312 kB |   92ms |  52ms |   40ms (43.5%) |
 ```

benchmark/run.js

@@ -2,15 +2,15 @@ import byteSize from './format-filesize.js'
 import { analyze as analyzeCss } from '../dist/analyzer.modern.js'
 import * as fs from 'fs'
 const files = [
-  ['bol-com-20190617', 'Bol.com', 127],
+  ['bol-com-20190617', 'Bol.com', 117],
   ['bootstrap-5.0.0', 'Bootstrap 5.0.0', 49],
   ['css-tricks-20190319', 'CSS-Tricks', 50],
-  ['facebook-20190319', 'Facebook.com', 75],
+  ['facebook-20190319', 'Facebook.com', 71],
   ['github-20210501', 'GitHub.com', 95],
-  ['gazelle-20210905', 'Gazelle.nl', 325],
-  ['lego-20190617', 'Lego.com', 62],
-  ['smashing-magazine-20190319', 'Smashing Magazine.com', 300],
-  ['trello-20190617', 'Trello.com', 86]
+  ['gazelle-20210905', 'Gazelle.nl', 312],
+  ['lego-20190617', 'Lego.com', 59],
+  ['smashing-magazine-20190319', 'Smashing Magazine.com', 285],
+  ['trello-20190617', 'Trello.com', 80]
 ]
 
 let maxLen = -1
@@ -35,7 +35,7 @@ files.forEach(([filename, name, expectedDuration]) => {
   ])
 })
 
-const RUN_COUNT = 20
+const RUN_COUNT = 25
 
 suite.forEach(([name, fn, expectedDuration]) => {
   const start = new Date()
@@ -47,6 +47,6 @@ suite.forEach(([name, fn, expectedDuration]) => {
   console.log(
     name,
     `${duration}ms`.padStart(6, ' '),
-    `(${overtime >= 0 ? '-' : '+'}${Math.abs(overtime)}ms ${Math.round(Math.abs(overtime) / duration * 100)}%)`
+    `(${overtime >= 0 ? '-' : '+'}${Math.abs(overtime)}ms ${Math.round(Math.abs(overtime) / duration * 100)}%)`,
   )
 })

src/index.js

@@ -239,63 +239,63 @@ const analyze = (css) => {
         }
 
         const { value, property } = node
-        const fullProperty = getProperty(property)
 
         properties.push(property)
+        values.push(value)
 
-        if (fullProperty.vendor) {
+        // Process properties first that don't have colors,
+        // so we can avoid further walking them;
+        // They're also typically not vendor prefixed,
+        if (property === 'z-index') {
+          zindex.push(value)
+          return this.skip
+        }
+        if (property === 'font') {
+          fontValues.push(value)
+          break
+        }
+        if (property === 'font-size') {
+          fontSizeValues.push(stringifyNode(value))
+          break
+        }
+        if (property === 'font-family') {
+          fontFamilyValues.push(stringifyNode(value))
+          break
+        }
+
+        const {
+          vendor: isVendor,
+          hack: isHack,
+          custom: isCustom,
+          basename,
+        } = getProperty(property)
+
+        if (isVendor) {
           propertyVendorPrefixes.push(property)
         }
-        if (fullProperty.hack) {
+        if (isHack) {
           propertyHacks.push(property)
         }
-        if (fullProperty.custom) {
+        if (isCustom) {
           customProperties.push(property)
         }
 
-        values.push(value)
+        if (basename === 'transition' || basename === 'animation') {
+          animations.push(value.children)
+          break
+        } else if (basename === 'animation-duration' || basename === 'transition-duration') {
+          durations.push(stringifyNode(value))
+          break
+        } else if (basename === 'transition-timing-function' || basename === 'animation-timing-function') {
+          timingFunctions.push(stringifyNode(value))
+          break
+        }
 
-        switch (fullProperty.basename) {
-          case 'z-index': {
-            zindex.push(value)
-            break
-          }
-          case 'text-shadow': {
-            textShadows.push(value)
-            break
-          }
-          case 'box-shadow': {
-            boxShadows.push(value)
-            break
-          }
-          case 'font': {
-            fontValues.push(value)
-            break
-          }
-          case 'font-family': {
-            fontFamilyValues.push(stringifyNode(value))
-            // Prevent analyzer to find color names in this property
-            return this.skip
-          }
-          case 'font-size': {
-            fontSizeValues.push(stringifyNode(value))
-            break
-          }
-          case 'transition':
-          case 'animation': {
-            animations.push(value.children)
-            break
-          }
-          case 'animation-duration':
-          case 'transition-duration': {
-            durations.push(stringifyNode(value))
-            break
-          }
-          case 'transition-timing-function':
-          case 'animation-timing-function': {
-            timingFunctions.push(stringifyNode(value))
-            break
-          }
+        // These properties potentially contain colors
+        if (basename === 'text-shadow') {
+          textShadows.push(value)
+        } else if (basename === 'box-shadow') {
+          boxShadows.push(value)
         }
 
         walk(value, function (valueNode) {