@invisibleloop/pulse 0.18.0 → 0.18.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@invisibleloop/pulse",
-  "version": "0.18.0",
+  "version": "0.18.1",
   "type": "module",
   "description": "AI-first frontend framework. The spec is the source of truth.",
   "license": "MIT",

package/public/.pulse-ui-version

@@ -1 +1 @@
-0.18.0
+0.18.1

package/scripts/css-purge.js

@@ -35,6 +35,21 @@ export function extractUsedClasses(htmlContents, jsContents, safelist = []) {
     }
   }
 
+  // classList method arguments are class names BY DEFINITION — collect them even
+  // without a hyphen. The generic string scan above requires a hyphen to avoid
+  // swallowing every English word, which silently missed runtime state classes
+  // (classList.add('open'), .toggle('active')) and purged their compound rules
+  // (`.docs-sidebar.open`) from production CSS while dev looked fine.
+  for (const js of jsContents) {
+    const re = /classList\s*\.\s*(?:add|remove|toggle|replace)\s*\(\s*((?:['"][^'"]+['"]\s*,?\s*)+)/g
+    let m
+    while ((m = re.exec(js)) !== null) {
+      for (const [, cls] of m[1].matchAll(/['"]([^'"]+)['"]/g)) {
+        if (/^[a-zA-Z][a-zA-Z0-9_-]*$/.test(cls)) used.add(cls)
+      }
+    }
+  }
+
   // Apply safelist from pulse.config.js — css.safelist accepts strings or RegExp.
   // String entries are added directly; RegExp entries are matched against all
   // class names defined in the CSS (resolved later in purgeCss via selectorUsed

package/scripts/css-purge.test.js

@@ -92,3 +92,40 @@ test('minifyCss: calc() expressions keep their operator spacing', () => {
   const out = minifyCss(`.x { width: calc(100% - 2rem); }`)
   assert.ok(out.includes('calc(100% - 2rem)'), `calc broken: ${out}`)
 })
+
+// ---------------------------------------------------------------------------
+// Runtime state classes — classList arguments
+// ---------------------------------------------------------------------------
+// Regression: the JS string scan only keeps hyphenated names (to avoid keeping
+// every English word), so runtime state classes like classList.add('open') were
+// never collected — and selectorUsed checks the rightmost class token, so
+// `.docs-sidebar.open { … }` was purged from production CSS. The mobile docs
+// hamburger toggled the class, but the rule that slides the sidebar in was gone.
+
+test('classList method arguments are collected regardless of hyphens', () => {
+  const used = extractUsedClasses([], [
+    `sidebar.classList.add('open')`,
+    `overlay.classList.remove("visible")`,
+    `el.classList.toggle('active', isOn)`,
+    `el.classList.replace('open', 'closed')`,
+  ])
+  for (const cls of ['open', 'visible', 'active', 'closed']) {
+    assert.ok(used.has(cls), `Expected classList arg "${cls}" to be collected`)
+  }
+})
+
+test('multiple classList arguments in one call are all collected', () => {
+  const used = extractUsedClasses([], [`el.classList.add('one', 'two-x', 'three')`])
+  for (const cls of ['one', 'two-x', 'three']) assert.ok(used.has(cls), cls)
+})
+
+test('runtime-toggled compound rule survives the purge', () => {
+  const css = `.docs-sidebar { transform: translateX(-100%); }\n.docs-sidebar.open { transform: translateX(0); }\n.unused { color: red; }`
+  const used = extractUsedClasses(
+    [`<aside class="docs-sidebar">`],
+    [`document.querySelector('.docs-sidebar').classList.add('open')`]
+  )
+  const out = purgeCss(css, used)
+  assert.ok(out.includes('.docs-sidebar.open'), `Compound state rule was purged: ${out}`)
+  assert.ok(!out.includes('.unused'), 'Unused rule should still be purged')
+})