reduce memory usage for selector analysis

Author: Bart Veneman

src/__fixtures__/github-20210501.json

@@ -25997,8 +25997,8 @@
       "ratio": 0
     },
     "accessibility": {
-      "total": 56,
-      "totalUnique": 55,
+      "total": 57,
+      "totalUnique": 56,
       "unique": {
         ".breadcrumb-item[aria-current]:not([aria-current=false])": 1,
         ".breadcrumb-item[aria-current]:not([aria-current=false]):after": 1,
@@ -26051,13 +26051,14 @@
         ".pagination [aria-disabled=true]": 1,
         ".pagination [aria-disabled=true]:hover": 1,
         "body.intent-mouse [role=button]:focus": 1,
+        "body.intent-mouse [role=tabpanel][tabindex=\"0\"]:focus": 1,
         ".jump-to-suggestions-results-container [aria-selected=true] .jump-to-octicon": 1,
         ".jump-to-suggestions-results-container [aria-selected=true] .jump-to-suggestions-path": 1,
         ".jump-to-suggestions-results-container [aria-selected=true] mark": 1,
         ".jump-to-suggestions-results-container [aria-selected=true] .d-on-nav-focus": 1
       },
-      "uniquenessRatio": 0.9821428571428571,
-      "ratio": 0.018549188473004307
+      "uniquenessRatio": 0.9824561403508771,
+      "ratio": 0.01888042398145081
     },
     "keyframes": {
       "total": 24,

src/index.js

@@ -1,7 +1,7 @@
 import parse from 'css-tree/parser'
 import walk from 'css-tree/walker'
 import { isSupportsBrowserhack, isMediaBrowserhack } from './atrules/atrules.js'
-import { analyzeSpecificity, compareSpecificity } from './selectors/specificity.js'
+import { analyzeSelector, compareSpecificity } from './selectors/specificity.js'
 import { colorFunctions, colorNames } from './values/colors.js'
 import { isFontFamilyKeyword, getFamilyFromFont } from './values/font-families.js'
 import { isFontSizeKeyword, getSizeFromFont } from './values/font-sizes.js'
@@ -233,13 +233,15 @@ const analyze = (css) => {
           return this.skip
         }
 
-        const { specificity, complexity, isId, isA11y } = analyzeSpecificity(node)
+        const analysis = analyzeSelector(node)
+        const specificity = analysis.splice(0, 3)
+        const [complexity, isA11y] = analysis
 
-        if (isId) {
+        if (specificity[0] > 0) {
           ids.push(selector)
         }
 
-        if (isA11y) {
+        if (isA11y === 1) {
           a11y.push(selector)
         }
 

src/selectors/selectors.test.js

@@ -232,23 +232,25 @@ Selectors('counts Accessibility selectors', () => {
   const fixture = `
     [aria-hidden],
     img[role="presentation"],
-    .selector:not([role="tablist"]) {}
+    .selector:not([role="tablist"]),
+    body.intent-mouse·[role=tabpanel][tabindex="0"]:focus,
 
     /* false positives */
     img[loading="lazy"],
     [hidden] {}
   `
   const actual = analyze(fixture).selectors.accessibility
   const expected = {
-    total: 3,
-    totalUnique: 3,
+    total: 4,
+    totalUnique: 4,
     unique: {
       '[aria-hidden]': 1,
       'img[role="presentation"]': 1,
       '.selector:not([role="tablist"])': 1,
+      'body.intent-mouse·[role=tabpanel][tabindex="0"]:focus': 1,
     },
     uniquenessRatio: 1 / 1,
-    ratio: 3 / 5
+    ratio: 4 / 6,
   }
 
   assert.equal(actual, expected)

src/selectors/specificity.js

@@ -1,7 +1,10 @@
 import walk from 'css-tree/walker'
-import { startsWith } from '../string-utils.js'
+import { startsWith, strEquals } from '../string-utils.js'
 import { hasVendorPrefix } from '../vendor-prefix.js'
 
+const COMPLEXITY = 3
+const IS_A11Y = 4
+
 /**
  * Compare specificity A to Specificity B
  * @param {[number,number,number]} a - Specificity A
@@ -30,23 +33,19 @@ function selectorListSpecificities(selectorListAst) {
   walk(selectorListAst, {
     visit: 'Selector',
     enter(node) {
-      childSelectors.push(analyzeSpecificity(node))
+      childSelectors.push(analyzeSelector(node))
     }
   })
 
-  return childSelectors.sort((a, b) => compareSpecificity(a.specificity, b.specificity))
+  return childSelectors.sort((a, b) => compareSpecificity([a[0], a[1], a[2]], [b[0], b[1], b[2]]))
 }
 
 /**
  * Get the Specificity for the AST of a Selector Node
  * @param {import('css-tree').Selector} ast - AST Node for a Selector
- * @return {Object}
- * @property {[number,number,number]} specificity
- * @property {number} complexity
- * @property {Boolean} isId
- * @property {Boolean} isA11y
+ * @return {[number, number, number, number, number]} - Array with SpecificityA, SpecificityB, SpecificityC, complexity, isA11y
  */
-const analyzeSpecificity = (node) => {
+const analyzeSelector = (node) => {
   let A = 0
   let B = 0
   let C = 0
@@ -74,7 +73,9 @@ const analyzeSpecificity = (node) => {
           complexity++
         }
 
-        isA11y = selector.name.name === 'role' || startsWith('aria-', selector.name.name)
+        if (strEquals('role', selector.name.name) || startsWith('aria-', selector.name.name)) {
+          isA11y = true
+        }
         break
       }
       case 'PseudoElementSelector':
@@ -137,18 +138,18 @@ const analyzeSpecificity = (node) => {
             // The specificity of a :where() pseudo-class is replaced by zero,
             // but it does count towards complexity.
             if (selector.name !== 'where') {
-              const [topA, topB, topC] = selectorList[0].specificity
+              const [topA, topB, topC] = selectorList[0]
               A += topA
               B += topB
               C += topC
             }
 
             for (let i = 0; i < selectorList.length; i++) {
               const listItem = selectorList[i]
-              if (listItem.isA11y) {
+              if (listItem[IS_A11Y] === 1) {
                 isA11y = true
               }
-              complexity += listItem.complexity
+              complexity += listItem[COMPLEXITY]
             }
 
             complexity++
@@ -170,16 +171,14 @@ const analyzeSpecificity = (node) => {
     }
   })
 
-  return {
-    /** @type {[number,number,number]} */
-    specificity: [A, B, C],
+  return [
+    A, B, C,
     complexity,
-    isId: A > 0,
-    isA11y
-  }
+    isA11y ? 1 : 0,
+  ]
 }
 
 export {
-  analyzeSpecificity,
+  analyzeSelector,
   compareSpecificity,
 }