fix: move css cache onto container to allow parallel runs (#252)

siimsams · web-flow · commit 0ee615f4357f · 2026-04-03T14:49:19.000+01:00
diff --git a/packages/beasties/src/dom.ts b/packages/beasties/src/dom.ts
@@ -26,12 +26,9 @@ import { DomUtils, parseDocument } from 'htmlparser2'
 
 type ParsedDocument = ReturnType<typeof parseDocument>
 
-let classCache: null | Set<string> = null
-let idCache: null | Set<string> = null
-
-function buildCache(container: Node | HTMLDocument) {
-  classCache = new Set()
-  idCache = new Set()
+function buildCache(container: Node) {
+  container._classCache = new Set()
+  container._idCache = new Set()
   const queue = [container]
 
   while (queue.length) {
@@ -40,17 +37,17 @@ function buildCache(container: Node | HTMLDocument) {
     if (node.hasAttribute?.('class')) {
       const classList = node.getAttribute('class').trim().split(' ')
       classList.forEach((cls) => {
-        classCache!.add(cls)
+        container._classCache!.add(cls)
       })
     }
 
     if (node.hasAttribute?.('id')) {
       const id = node.getAttribute('id').trim()
-      idCache.add(id)
+      container._idCache!.add(id)
     }
 
     if ('children' in node) {
-      queue.push(...node.children.filter(child => child.type === 'tag'))
+      queue.push(...(node as NodeWithChildren).children.filter(child => child.type === 'tag'))
     }
   }
 }
@@ -112,6 +109,8 @@ declare module 'domhandler' {
     $$name?: string
     $$reduce?: boolean
     $$links?: ChildNode[]
+    _classCache?: Set<string>
+    _idCache?: Set<string>
   }
 }
 
@@ -346,23 +345,23 @@ function extendDocument(document: ParsedDocument): asserts document is HTMLDocum
 // so that it's disposed with it.
 const selectorTokensCache = new Map<string, null | AttributeSelector[]>()
 
-function cachedQuerySelector(sel: string, node: Node | Node[]) {
+function cachedQuerySelector(sel: string, node: Node) {
   let selectorTokens = selectorTokensCache.get(sel)
   if (selectorTokens === undefined) {
     selectorTokens = parseRelevantSelectors(sel)
     selectorTokensCache.set(sel, selectorTokens)
   }
 
-  if (selectorTokens) {
+  if (selectorTokens && node._classCache && node._idCache) {
     for (const token of selectorTokens) {
-      // Check if the selector is a class selector
-      if (token.name === 'class') {
-        return classCache!.has(token.value)
+      if (token.name === 'class' && !node._classCache.has(token.value)) {
+        return false
       }
-      if (token.name === 'id') {
-        return idCache!.has(token.value)
+      if (token.name === 'id' && !node._idCache.has(token.value)) {
+        return false
       }
     }
+    return true
   }
 
   return !!selectOne(sel, node)
@@ -375,7 +374,7 @@ function parseRelevantSelectors(sel: string): AttributeSelector[] | null {
   for (let i = 0; i < tokens.length; i++) {
     const tokenGroup = tokens[i]
     if (tokenGroup?.length !== 1) {
-      continue
+      return null
     }
 
     const token = tokenGroup[0]
diff --git a/packages/beasties/test/beasties.test.ts b/packages/beasties/test/beasties.test.ts
@@ -1062,4 +1062,28 @@ describe('beasties', () => {
     // Clean up temporary directory
     fs.rmSync(tmpDir, { recursive: true })
   })
+
+  it('should not share class/id caches between concurrent process() calls', async () => {
+    const tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'beasties-concurrent-'))
+    fs.mkdirSync(path.join(tmpDir, 'static'), { recursive: true })
+    fs.writeFileSync(path.join(tmpDir, 'static', 'style.css'), '.foo{color:red}#bar{color:blue}#missing{color:green}')
+
+    const html1 = '<html><head><link rel="stylesheet" href="/static/style.css"></head><body><div class="foo" id="bar">hello</div></body></html>'
+    const html2 = '<html><head></head><body><p>no css</p></body></html>'
+
+    const b1 = new Beasties({ path: tmpDir, logLevel: 'silent' })
+    const b2 = new Beasties({ path: tmpDir, logLevel: 'silent' })
+
+    const [result1] = await Promise.all([
+      b1.process(html1),
+      b2.process(html2),
+    ])
+
+    expect(result1).toContain('<style>')
+    expect(result1).toContain('.foo{color:red}')
+    expect(result1).toContain('#bar{color:blue}')
+    expect(result1).not.toContain('#missing{color:green}')
+
+    fs.rmSync(tmpDir, { recursive: true })
+  })
 })
diff --git a/packages/beasties/test/dom.test.ts b/packages/beasties/test/dom.test.ts
@@ -0,0 +1,70 @@
+import { describe, expect, it } from 'vitest'
+import { createDocument } from '../src/dom'
+
+describe('dom', () => {
+  describe('exists() selector cache', () => {
+    it('falls through to DOM query when selector has a complex group', () => {
+      const doc = createDocument(`
+        <html>
+          <body>
+            <div class="parent"><span class="child">text</span></div>
+          </body>
+        </html>
+      `)
+      const container = doc.beastiesContainer
+
+      /*
+       ".parent .child" (descendant combinator) can't be resolved by the
+       selector cache, so exists() must fall through to a full DOM query.
+       The comma means OR, so the result is true because ".parent .child" matches.
+      */
+      expect(container.exists('.nonexistent, .parent .child')).toBe(true)
+    })
+
+    it('gives consistent results regardless of selector order', () => {
+      const doc = createDocument(`
+        <html>
+          <body>
+            <div class="present">text</div>
+          </body>
+        </html>
+      `)
+      const container = doc.beastiesContainer
+
+      /*
+        CSS comma means OR — both selectors are logically equivalent,
+        so exists() must return the same result regardless of order.
+      */
+      expect(container.exists('.present, .absent'))
+        .toBe(container.exists('.absent, .present'))
+    })
+
+    it('returns true for simple class selector that exists', () => {
+      const doc = createDocument(`
+        <html><body><div class="hero">text</div></body></html>
+      `)
+      expect(doc.beastiesContainer.exists('.hero')).toBe(true)
+    })
+
+    it('returns false for simple class selector that does not exist', () => {
+      const doc = createDocument(`
+        <html><body><div class="hero">text</div></body></html>
+      `)
+      expect(doc.beastiesContainer.exists('.missing')).toBe(false)
+    })
+
+    it('returns true for simple id selector that exists', () => {
+      const doc = createDocument(`
+        <html><body><div id="main">text</div></body></html>
+      `)
+      expect(doc.beastiesContainer.exists('#main')).toBe(true)
+    })
+
+    it('returns false for simple id selector that does not exist', () => {
+      const doc = createDocument(`
+        <html><body><div id="main">text</div></body></html>
+      `)
+      expect(doc.beastiesContainer.exists('#nope')).toBe(false)
+    })
+  })
+})
