seperate analysis for complexity and isA11y

Author: Bart Veneman

benchmark/run.js

@@ -2,16 +2,16 @@ 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', 135],
+  ['bol-com-20190617', 'Bol.com', 144],
   ['bootstrap-5.0.0', 'Bootstrap 5.0.0', 55],
-  ['cnn-20220403', 'CNN', 445],
-  ['css-tricks-20190319', 'CSS-Tricks', 59],
-  ['facebook-20190319', 'Facebook.com', 79],
-  ['github-20210501', 'GitHub.com', 98],
-  ['gazelle-20210905', 'Gazelle.nl', 345],
-  ['lego-20190617', 'Lego.com', 66],
-  ['smashing-magazine-20190319', 'Smashing Magazine.com', 335],
-  ['trello-20190617', 'Trello.com', 93],
+  ['cnn-20220403', 'CNN', 460],
+  ['css-tricks-20190319', 'CSS-Tricks', 60],
+  ['facebook-20190319', 'Facebook.com', 84],
+  ['github-20210501', 'GitHub.com', 103],
+  ['gazelle-20210905', 'Gazelle.nl', 350],
+  ['lego-20190617', 'Lego.com', 67],
+  ['smashing-magazine-20190319', 'Smashing Magazine.com', 355],
+  ['trello-20190617', 'Trello.com', 95],
 ]
 
 let maxLen = -1
@@ -38,13 +38,20 @@ files.forEach(([filename, name, expectedDuration]) => {
 })
 
 const RUN_COUNT = 25
+let memStart = process.memoryUsage().heapUsed
+let memMin = Infinity
+let memMax = 0
+
+function formatMem(mem) {
+  return `${Math.ceil(mem / 1024 / 1024)} MB`
+}
 
 suite.forEach(([name, fn, expectedDuration, size]) => {
-  const start = new Date()
+  const start = performance.now()
   for (let i = 0; i < RUN_COUNT; i++) {
     fn();
   }
-  const duration = Math.floor((new Date() - start) / RUN_COUNT)
+  const duration = Math.floor((performance.now() - start) / RUN_COUNT)
   const overtime = expectedDuration - duration
   const bytesPerSecond = Math.floor(1000 / duration * size)
   console.log(
@@ -53,6 +60,14 @@ suite.forEach(([name, fn, expectedDuration, size]) => {
     `(${overtime >= 0 ? '-' : '+'}${Math.abs(overtime)}ms ${Math.round(Math.abs(overtime) / duration * 100)}%)`.padStart(10),
     `${byteSize(bytesPerSecond)}/s`.padStart(9)
   )
+  const mem = process.memoryUsage().heapUsed
+  if (mem < memMin) memMin = mem
+  if (mem > memMax) memMax = mem
 })
 
-console.log(`Memory used: ${Math.ceil(process.memoryUsage().heapUsed / 1024 / 1024)}MB`)
+console.log({
+  memStart: formatMem(memStart),
+  memMin: formatMem(memMin),
+  memMax: formatMem(memMax),
+  memRange: formatMem(memMax - memMin),
+})

src/index.js

@@ -2,7 +2,7 @@ import parse from 'css-tree/parser'
 import walk from 'css-tree/walker'
 import { calculate } from '@bramus/specificity/core'
 import { isSupportsBrowserhack, isMediaBrowserhack } from './atrules/atrules.js'
-import { analyzeSelector, compareSpecificity } from './selectors/specificity.js'
+import { getComplexity, isAccessibility, compareSpecificity } from './selectors/utils.js'
 import { colorFunctions, colorNames } from './values/colors.js'
 import { isFontFamilyKeyword, getFamilyFromFont } from './values/font-families.js'
 import { isFontSizeKeyword, getSizeFromFont } from './values/font-sizes.js'
@@ -217,18 +217,17 @@ const analyze = (css) => {
 
         const [{ value: specificityObj }] = calculate(node)
         const specificity = [specificityObj.a, specificityObj.b, specificityObj.c]
-        const [complexity, isA11y] = analyzeSelector(node)
 
         if (specificity[0] > 0) {
           ids.push(selector)
         }
 
-        if (isA11y === 1) {
+        if (isAccessibility(node)) {
           a11y.push(selector)
         }
 
         uniqueSelectors.add(selector)
-        selectorComplexities.push(complexity)
+        selectorComplexities.push(getComplexity(node))
         uniqueSpecificities.push(specificity)
 
         if (maxSpecificity === undefined) {

src/selectors/specificity.js

@@ -0,0 +1,131 @@
+import walk from 'css-tree/walker'
+import { startsWith, strEquals } from '../string-utils.js'
+import { hasVendorPrefix } from '../vendor-prefix.js'
+
+/**
+ * Compare specificity A to Specificity B
+ * @param {[number,number,number]} a - Specificity A
+ * @param {[number,number,number]} b - Specificity B
+ * @returns {number} sortIndex - 0 when a==b, 1 when a<b, -1 when a>b
+ */
+export function compareSpecificity(a, b) {
+  if (a[0] === b[0]) {
+    if (a[1] === b[1]) {
+      return b[2] - a[2]
+    }
+
+    return b[1] - a[1]
+  }
+
+  return b[0] - a[0]
+}
+
+/**
+ *
+ * @param {import('css-tree').SelectorList} selectorListAst
+ * @returns {Selector[]} Analyzed selectors in the selectorList
+ */
+function analyzeList(selectorListAst, cb) {
+  const childSelectors = []
+  walk(selectorListAst, {
+    visit: 'Selector',
+    enter: function (node) {
+      childSelectors.push(cb(node))
+    }
+  })
+
+  return childSelectors
+}
+
+function isPseudoFunction(name) {
+  return (
+    strEquals(name, 'not')
+    || strEquals(name, 'nth-child')
+    || strEquals(name, 'nth-last-child')
+    || strEquals(name, 'where')
+    || strEquals(name, 'is')
+    || strEquals(name, 'has')
+    || strEquals(name, 'matches')
+    || strEquals(name, '-webkit-any')
+    || strEquals(name, '-moz-any')
+  )
+}
+
+export function isAccessibility(selector) {
+  let isA11y = false
+
+  walk(selector, function (node) {
+    if (node.type == 'AttributeSelector') {
+      if (strEquals('role', node.name.name) || startsWith('aria-', node.name.name)) {
+        isA11y = true
+        return this.break
+      }
+    } else if (node.type == 'PseudoClassSelector') {
+      if (isPseudoFunction(node.name)) {
+        const list = analyzeList(node, isAccessibility)
+
+        // Bail out for empty/non-existent :nth-child() params
+        if (list.length === 0) return
+
+        if (list.some(b => b == true)) {
+          isA11y = true
+          return this.skip
+        }
+
+        return this.skip
+      }
+    }
+  })
+
+  return isA11y;
+}
+
+/**
+ * Get the Complexity for the AST of a Selector Node
+ * @param {import('css-tree').Selector} ast - AST Node for a Selector
+ * @return {number} - The numeric complexity of the Selector
+ */
+export function getComplexity(selector) {
+  let complexity = 0
+
+  walk(selector, function (node) {
+    if (node.type == 'Selector' || node.type == 'Nth') return
+
+    complexity++
+
+    if (node.type == 'IdSelector'
+      || node.type == 'ClassSelector'
+      || node.type == 'PseudoElementSelector'
+      || node.type == 'TypeSelector'
+      || node.type == 'PseudoClassSelector'
+    ) {
+      if (hasVendorPrefix(node.name)) {
+        complexity++
+      }
+    }
+
+    if (node.type == 'AttributeSelector') {
+      if (Boolean(node.value)) {
+        complexity++
+      }
+      if (hasVendorPrefix(node.name.name)) {
+        complexity++
+      }
+      return this.skip
+    }
+
+    if (node.type == 'PseudoClassSelector') {
+      if (isPseudoFunction(node.name)) {
+        const selectorList = analyzeList(node, getComplexity)
+
+        // Bail out for empty/non-existent :nth-child() params
+        if (selectorList.length === 0) return
+
+        selectorList.forEach(c => complexity += c)
+        return this.skip
+      }
+    }
+  })
+
+  return complexity
+}