@invisibleloop/pulse 0.17.1 → 0.17.3

package/examples/public/pulse-ui.css

@@ -150,6 +150,20 @@ html, body {
   color:      var(--ui-text);
 }
 
+/* ghost-light — use on dark section backgrounds (e.g. navy hero, section--dark).
+   Renders with light/white text and a subtle light border so it remains legible
+   regardless of whether the surrounding theme is light or dark.               */
+.ui-btn--ghost-light {
+  background:   transparent;
+  color:        rgba(255, 255, 255, 0.9);
+  border:       1px solid rgba(255, 255, 255, 0.35);
+}
+.ui-btn--ghost-light:hover:not(.ui-btn--disabled):not([disabled]) {
+  background:   rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.65);
+  color:        #ffffff;
+}
+
 .ui-btn--danger {
   background: var(--ui-red-dim);
   color:      var(--ui-red);
@@ -682,6 +696,36 @@ html, body {
 .ui-section--alt   { background: var(--ui-surface,   var(--surface,   #111116)); }
 .ui-section--dark  { background: var(--ui-surface-2, var(--surface-2, #18181f)); }
 
+/* In light theme, --ui-surface-2 resolves to a light grey — not "dark".
+   Override so section--dark always renders a genuinely dark background that
+   contrasts with the page, regardless of the active theme.                  */
+[data-theme="light"] .ui-section--dark,
+.ui-theme-light .ui-section--dark {
+  background:  var(--ui-dark-bg,  #1a1a2e);
+  color:       var(--ui-dark-text, #e2e2ea);
+}
+/* Ensure text children inherit the light colour in the dark section */
+[data-theme="light"] .ui-section--dark .ui-section-title,
+[data-theme="light"] .ui-section--dark .ui-section-eyebrow,
+[data-theme="light"] .ui-section--dark .ui-section-subtitle,
+.ui-theme-light .ui-section--dark .ui-section-title,
+.ui-theme-light .ui-section--dark .ui-section-eyebrow,
+.ui-theme-light .ui-section--dark .ui-section-subtitle {
+  color: inherit;
+}
+/* Ghost button inside a dark section on a light-theme page */
+[data-theme="light"] .ui-section--dark .ui-btn--ghost,
+.ui-theme-light .ui-section--dark .ui-btn--ghost {
+  color:        var(--ui-dark-text, #e2e2ea);
+  border-color: rgba(226, 226, 234, 0.35);
+}
+[data-theme="light"] .ui-section--dark .ui-btn--ghost:hover:not(.ui-btn--disabled):not([disabled]),
+.ui-theme-light .ui-section--dark .ui-btn--ghost:hover:not(.ui-btn--disabled):not([disabled]) {
+  background:   rgba(226, 226, 234, 0.1);
+  border-color: rgba(226, 226, 234, 0.65);
+  color:        var(--ui-dark-text, #e2e2ea);
+}
+
 /* diagonal — tapered bottom edge; follow with a section that starts flush */
 .ui-section--diagonal {
   background: var(--ui-surface, var(--surface, #111116));
@@ -3987,8 +4031,14 @@ fieldset[disabled] .ui-rating-stars .ui-rating-star:hover ~ .ui-rating-star { co
 }
 
 .ui-drop-cap-letter {
-  font-weight: 700;
-  color:       var(--ui-text);
+  /* line-height ~cap height keeps the float box hugging the glyph so the cap
+     top-aligns with the first text line — a relative line-height makes serif
+     caps float below the opening line. Component sets font-size inline. */
+  float:        left;
+  font-weight:  700;
+  line-height:  0.82;
+  margin-right: 0.1em;
+  color:        var(--ui-text);
 }
 
 /* Colophon — minimal footer for editorial pages */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@invisibleloop/pulse",
-  "version": "0.17.1",
+  "version": "0.17.3",
   "type": "module",
   "description": "AI-first frontend framework. The spec is the source of truth.",
   "license": "MIT",
@@ -57,7 +57,7 @@
   "scripts": {
     "dev": "node --watch src/cli/dev.js",
     "build": "node scripts/build.js",
-    "test": "node src/spec/schema.test.js && node src/runtime/runtime.test.js && node src/runtime/navigate.test.js && node src/runtime/morph.test.js && node src/runtime/ssr.test.js && node src/runtime/image.test.js && node src/server/server.test.js && node src/cli/cli.test.js && node src/ui/ui.test.js && node src/testing/testing.test.js && node src/store/store.test.js && node src/md/md.test.js && node scripts/strip-server.test.js && node src/mcp/mcp.test.js",
+    "test": "node src/spec/schema.test.js && node src/runtime/runtime.test.js && node src/runtime/navigate.test.js && node src/runtime/morph.test.js && node src/runtime/ssr.test.js && node src/runtime/image.test.js && node src/server/server.test.js && node src/cli/cli.test.js && node src/ui/ui.test.js && node src/testing/testing.test.js && node src/store/store.test.js && node src/md/md.test.js && node scripts/strip-server.test.js && node scripts/css-purge.test.js && node src/mcp/mcp.test.js",
     "typecheck": "tsc --noEmit",
     "docs": "node --watch src/cli/dev.js --root docs --port 4000",
     "docs:start": "node docs/server.js"

package/public/.pulse-ui-version

@@ -1 +1 @@
-0.17.1
+0.17.3

package/public/pulse-ui.css

@@ -4031,8 +4031,14 @@ fieldset[disabled] .ui-rating-stars .ui-rating-star:hover ~ .ui-rating-star { co
 }
 
 .ui-drop-cap-letter {
-  font-weight: 700;
-  color:       var(--ui-text);
+  /* line-height ~cap height keeps the float box hugging the glyph so the cap
+     top-aligns with the first text line — a relative line-height makes serif
+     caps float below the opening line. Component sets font-size inline. */
+  float:        left;
+  font-weight:  700;
+  line-height:  0.82;
+  margin-right: 0.1em;
+  color:        var(--ui-text);
 }
 
 /* Colophon — minimal footer for editorial pages */

package/scripts/build.js

@@ -20,6 +20,7 @@ import { createHash } from 'crypto'
 import { discoverPages } from '../src/cli/discover.js'
 import { renderToString } from '../src/runtime/ssr.js'
 import { c, header, table, ok, fail, info, warn, elapsed, icon } from '../src/cli/fmt.js'
+import { extractUsedClasses, purgeCss, minifyCss } from './css-purge.js'
 
 // ---------------------------------------------------------------------------
 // Server-only property stripping
@@ -783,207 +784,3 @@ async function purgeCssStep(pages, manifest, root, outDir) {
   fs.writeFileSync(path.join(outDir, 'manifest.json'), JSON.stringify(manifest, null, 2))
   return cssStats
 }
-
-// ---------------------------------------------------------------------------
-// CSS class extractor
-// ---------------------------------------------------------------------------
-
-function extractUsedClasses(htmlContents, jsContents, safelist = []) {
-  const used = new Set()
-
-  // Extract from class="..." in both rendered HTML and JS template literals
-  for (const content of [...htmlContents, ...jsContents]) {
-    const re = /class(?:Name)?=["']([^"'\n]+)["']/g
-    let m
-    while ((m = re.exec(content)) !== null) {
-      for (const cls of m[1].trim().split(/\s+/)) {
-        if (cls) used.add(cls)
-      }
-    }
-  }
-
-  // Scan JS source for quoted strings that look like CSS class names (contain hyphens)
-  // Catches conditionally-applied classes like 'ui-btn--disabled' in ternaries
-  for (const js of jsContents) {
-    const re = /['"`]((?:[a-zA-Z][a-zA-Z0-9]*-[a-zA-Z0-9-]*)(?:\s+[a-zA-Z][a-zA-Z0-9-]*)*)['"`]/g
-    let m
-    while ((m = re.exec(js)) !== null) {
-      for (const cls of m[1].trim().split(/\s+/)) {
-        if (cls && cls.includes('-')) 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
-  // because we don't have the CSS text here). To handle RegExp, we mark them as
-  // a sentinel that selectorUsed checks separately.
-  for (const entry of safelist) {
-    if (typeof entry === 'string') {
-      used.add(entry)
-    }
-    // RegExp entries are stored on the Set as a symbol property for selectorUsed to check
-  }
-  if (safelist.some(e => e instanceof RegExp)) {
-    used._safelistPatterns = safelist.filter(e => e instanceof RegExp)
-  }
-
-  return used
-}
-
-// ---------------------------------------------------------------------------
-// CSS purger — strips unused rules, preserves @media / :root / element rules
-// ---------------------------------------------------------------------------
-
-/**
- * Parse CSS text into top-level blocks using a bracket-depth counter.
- * Returns [{ type, selector?, prelude?, inner?, raw }]
- */
-function parseCssBlocks(css) {
-  const blocks = []
-  let i = 0
-  const len = css.length
-
-  while (i < len) {
-    // Skip whitespace
-    while (i < len && /\s/.test(css[i])) i++
-    if (i >= len) break
-
-    // Skip block comments
-    if (css[i] === '/' && css[i + 1] === '*') {
-      const end = css.indexOf('*/', i + 2)
-      i = end === -1 ? len : end + 2
-      continue
-    }
-
-    const start = i
-    let depth = 0
-
-    while (i < len) {
-      // Skip inline comments
-      if (css[i] === '/' && css[i + 1] === '*') {
-        const end = css.indexOf('*/', i + 2)
-        i = end === -1 ? len : end + 2
-        continue
-      }
-      if (css[i] === '{') { depth++; i++; continue }
-      if (css[i] === '}') { depth--; i++; if (depth === 0) break; continue }
-      if (css[i] === ';' && depth === 0) { i++; break }
-      i++
-    }
-
-    const raw = css.slice(start, i).trim()
-    if (!raw) continue
-
-    if (raw.startsWith('@')) {
-      const braceIdx = raw.indexOf('{')
-      if (braceIdx === -1) {
-        blocks.push({ type: 'at-simple', raw })
-      } else {
-        const prelude = raw.slice(0, braceIdx).trim()
-        const inner   = raw.slice(braceIdx + 1, raw.lastIndexOf('}')).trim()
-        blocks.push({ type: 'at-block', prelude, inner, raw })
-      }
-    } else {
-      const braceIdx = raw.indexOf('{')
-      if (braceIdx !== -1) {
-        blocks.push({ type: 'rule', selector: raw.slice(0, braceIdx).trim(), raw })
-      }
-    }
-  }
-
-  return blocks
-}
-
-/**
- * Return true if any selector in the rule should be kept.
- *
- * Matching strategy: check the *rightmost* class token in the selector (the
- * subject of the rule). A rule like `.parent .child` should survive only when
- * `.child` is used — keeping it whenever `.parent` is used would retain dead
- * rules whose actual target class was never referenced.
- *
- * Pseudo-classes/elements and attribute selectors are stripped before checking
- * so `.btn:hover` is treated as `.btn`, `.btn--active::before` as `.btn--active`.
- *
- * Element-only selectors (`a`, `*`, `:root`) and rules that contain no class
- * tokens at all are always kept.
- */
-function selectorUsed(selector, usedClasses) {
-  const selectors = selector.split(',').map(s => s.trim())
-
-  for (const sel of selectors) {
-    // Strip pseudo-classes/elements and attribute selectors to find the base
-    const base = sel
-      .replace(/::?[a-z-]+(\([^)]*\))?/gi, '')
-      .replace(/\[[^\]]*\]/g, '')
-      .trim()
-
-    // Keep element-only selectors — no class tokens present
-    if (!base.includes('.')) return true
-
-    // Extract all class tokens and check the rightmost one (the rule subject).
-    // Using the rightmost class correctly handles descendant selectors:
-    //   .nav .link  → subject is .link
-    //   .btn--active → subject is .btn--active
-    const classes = [...base.matchAll(/\.([a-zA-Z][a-zA-Z0-9_-]*)/g)].map(m => m[1])
-    if (classes.length === 0) return true
-    const subject = classes[classes.length - 1]
-    if (usedClasses.has(subject)) return true
-
-    // Check RegExp safelist patterns if any were provided
-    const patterns = usedClasses._safelistPatterns
-    if (patterns && patterns.some(re => re.test(subject))) return true
-  }
-
-  return false
-}
-
-/**
- * Purge unused CSS rules from a CSS string.
- * Recursively processes @media and @supports blocks.
- */
-function minifyCss(css) {
-  return css
-    .replace(/\/\*[\s\S]*?\*\//g, '')   // strip comments
-    .replace(/\s+/g, ' ')               // collapse whitespace
-    // Remove spaces around safe punctuation — NOT + or - (would break calc() expressions)
-    .replace(/\s*([{}:;,>~])\s*/g, '$1')
-    .replace(/;}/g, '}')                // remove trailing semicolons
-    .trim()
-}
-
-function purgeCss(cssText, usedClasses) {
-  const blocks = parseCssBlocks(cssText)
-  const kept   = []
-
-  for (const block of blocks) {
-    if (block.type === 'at-simple') {
-      kept.push(block.raw)
-    } else if (block.type === 'at-block') {
-      const p = block.prelude.toLowerCase()
-      if (/^@(?:keyframes|font-face|charset)/.test(p)) {
-        kept.push(block.raw)
-      } else if (/^@(?:media|supports)/.test(p)) {
-        const innerPurged = purgeCss(block.inner, usedClasses)
-        if (innerPurged.trim()) kept.push(`${block.prelude} {\n${innerPurged}\n}`)
-      } else if (/^@layer/.test(p)) {
-        // Always preserve empty @layer declarations — they establish cascade order
-        // and removing them silently changes specificity even when no rules remain.
-        const innerPurged = purgeCss(block.inner, usedClasses)
-        if (innerPurged.trim()) {
-          kept.push(`${block.prelude} {\n${innerPurged}\n}`)
-        } else {
-          kept.push(`${block.prelude} {}`)
-        }
-      } else {
-        kept.push(block.raw) // unknown at-blocks — keep to be safe
-      }
-    } else if (block.type === 'rule') {
-      if (selectorUsed(block.selector, usedClasses)) kept.push(block.raw)
-    }
-  }
-
-  return kept.join('\n\n')
-}

package/scripts/css-purge.js

@@ -0,0 +1,241 @@
+/**
+ * CSS purge + minify — used by scripts/build.js.
+ *
+ * Extracted into its own module so the parser can be unit-tested
+ * (build.js runs the build at import time and cannot be imported by tests).
+ */
+
+// ---------------------------------------------------------------------------
+// CSS class extractor
+// ---------------------------------------------------------------------------
+
+export function extractUsedClasses(htmlContents, jsContents, safelist = []) {
+  const used = new Set()
+
+  // Extract from class="..." in both rendered HTML and JS template literals
+  for (const content of [...htmlContents, ...jsContents]) {
+    const re = /class(?:Name)?=["']([^"'\n]+)["']/g
+    let m
+    while ((m = re.exec(content)) !== null) {
+      for (const cls of m[1].trim().split(/\s+/)) {
+        if (cls) used.add(cls)
+      }
+    }
+  }
+
+  // Scan JS source for quoted strings that look like CSS class names (contain hyphens)
+  // Catches conditionally-applied classes like 'ui-btn--disabled' in ternaries
+  for (const js of jsContents) {
+    const re = /['"`]((?:[a-zA-Z][a-zA-Z0-9]*-[a-zA-Z0-9-]*)(?:\s+[a-zA-Z][a-zA-Z0-9-]*)*)['"`]/g
+    let m
+    while ((m = re.exec(js)) !== null) {
+      for (const cls of m[1].trim().split(/\s+/)) {
+        if (cls && cls.includes('-')) 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
+  // because we don't have the CSS text here). To handle RegExp, we mark them as
+  // a sentinel that selectorUsed checks separately.
+  for (const entry of safelist) {
+    if (typeof entry === 'string') {
+      used.add(entry)
+    }
+    // RegExp entries are stored on the Set as a symbol property for selectorUsed to check
+  }
+  if (safelist.some(e => e instanceof RegExp)) {
+    used._safelistPatterns = safelist.filter(e => e instanceof RegExp)
+  }
+
+  return used
+}
+
+// ---------------------------------------------------------------------------
+// CSS purger — strips unused rules, preserves @media / :root / element rules
+// ---------------------------------------------------------------------------
+
+/**
+ * Parse CSS text into top-level blocks using a bracket-depth counter.
+ * Quote-aware: `;` and braces inside '...' or "..." strings are content, not
+ * structure — an @import URL like url('...?family=Inter:wght@400;600&display=swap')
+ * must not be split at the `;` inside the quotes.
+ * Returns [{ type, selector?, prelude?, inner?, raw }]
+ */
+export function parseCssBlocks(css) {
+  const blocks = []
+  let i = 0
+  const len = css.length
+
+  // Advance past a quoted string starting at css[i] (which is ' or ").
+  // Handles backslash escapes. Returns the index just past the closing quote.
+  const skipString = (idx) => {
+    const quote = css[idx]
+    idx++
+    while (idx < len && css[idx] !== quote) {
+      if (css[idx] === '\\') idx++
+      idx++
+    }
+    return idx + 1 // past closing quote (or len)
+  }
+
+  while (i < len) {
+    // Skip whitespace
+    while (i < len && /\s/.test(css[i])) i++
+    if (i >= len) break
+
+    // Skip block comments
+    if (css[i] === '/' && css[i + 1] === '*') {
+      const end = css.indexOf('*/', i + 2)
+      i = end === -1 ? len : end + 2
+      continue
+    }
+
+    const start = i
+    let depth = 0
+
+    while (i < len) {
+      // Skip inline comments
+      if (css[i] === '/' && css[i + 1] === '*') {
+        const end = css.indexOf('*/', i + 2)
+        i = end === -1 ? len : end + 2
+        continue
+      }
+      // Skip quoted strings — ; { } inside them are content, not structure
+      if (css[i] === '"' || css[i] === "'") { i = skipString(i); continue }
+      if (css[i] === '{') { depth++; i++; continue }
+      if (css[i] === '}') { depth--; i++; if (depth === 0) break; continue }
+      if (css[i] === ';' && depth === 0) { i++; break }
+      i++
+    }
+
+    const raw = css.slice(start, i).trim()
+    if (!raw) continue
+
+    if (raw.startsWith('@')) {
+      const braceIdx = raw.indexOf('{')
+      if (braceIdx === -1) {
+        blocks.push({ type: 'at-simple', raw })
+      } else {
+        const prelude = raw.slice(0, braceIdx).trim()
+        const inner   = raw.slice(braceIdx + 1, raw.lastIndexOf('}')).trim()
+        blocks.push({ type: 'at-block', prelude, inner, raw })
+      }
+    } else {
+      const braceIdx = raw.indexOf('{')
+      if (braceIdx !== -1) {
+        blocks.push({ type: 'rule', selector: raw.slice(0, braceIdx).trim(), raw })
+      }
+    }
+  }
+
+  return blocks
+}
+
+/**
+ * Return true if any selector in the rule should be kept.
+ *
+ * Matching strategy: check the *rightmost* class token in the selector (the
+ * subject of the rule). A rule like `.parent .child` should survive only when
+ * `.child` is used — keeping it whenever `.parent` is used would retain dead
+ * rules whose actual target class was never referenced.
+ *
+ * Pseudo-classes/elements and attribute selectors are stripped before checking
+ * so `.btn:hover` is treated as `.btn`, `.btn--active::before` as `.btn--active`.
+ *
+ * Element-only selectors (`a`, `*`, `:root`) and rules that contain no class
+ * tokens at all are always kept.
+ */
+export function selectorUsed(selector, usedClasses) {
+  const selectors = selector.split(',').map(s => s.trim())
+
+  for (const sel of selectors) {
+    // Strip pseudo-classes/elements and attribute selectors to find the base
+    const base = sel
+      .replace(/::?[a-z-]+(\([^)]*\))?/gi, '')
+      .replace(/\[[^\]]*\]/g, '')
+      .trim()
+
+    // Keep element-only selectors — no class tokens present
+    if (!base.includes('.')) return true
+
+    // Extract all class tokens and check the rightmost one (the rule subject).
+    // Using the rightmost class correctly handles descendant selectors:
+    //   .nav .link  → subject is .link
+    //   .btn--active → subject is .btn--active
+    const classes = [...base.matchAll(/\.([a-zA-Z][a-zA-Z0-9_-]*)/g)].map(m => m[1])
+    if (classes.length === 0) return true
+    const subject = classes[classes.length - 1]
+    if (usedClasses.has(subject)) return true
+
+    // Check RegExp safelist patterns if any were provided
+    const patterns = usedClasses._safelistPatterns
+    if (patterns && patterns.some(re => re.test(subject))) return true
+  }
+
+  return false
+}
+
+/**
+ * Minify a CSS string. String-aware: content inside '...' or "..." is left
+ * untouched so quoted URLs (e.g. Google Fonts @import with ; and : in the
+ * query string) survive intact.
+ */
+export function minifyCss(css) {
+  // Protect quoted strings from the whitespace/punctuation passes
+  const strings = []
+  const protectedCss = css.replace(/(['"])(?:\\.|(?!\1).)*\1/g, (m) => {
+    strings.push(m)
+    return `\x00S${strings.length - 1}\x00`
+  })
+
+  const minified = protectedCss
+    .replace(/\/\*[\s\S]*?\*\//g, '')   // strip comments
+    .replace(/\s+/g, ' ')               // collapse whitespace
+    // Remove spaces around safe punctuation — NOT + or - (would break calc() expressions)
+    .replace(/\s*([{}:;,>~])\s*/g, '$1')
+    .replace(/;}/g, '}')                // remove trailing semicolons
+    .trim()
+
+  return minified.replace(/\x00S(\d+)\x00/g, (_, i) => strings[+i])
+}
+
+/**
+ * Purge unused CSS rules from a CSS string.
+ * Recursively processes @media and @supports blocks.
+ */
+export function purgeCss(cssText, usedClasses) {
+  const blocks = parseCssBlocks(cssText)
+  const kept   = []
+
+  for (const block of blocks) {
+    if (block.type === 'at-simple') {
+      kept.push(block.raw)
+    } else if (block.type === 'at-block') {
+      const p = block.prelude.toLowerCase()
+      if (/^@(?:keyframes|font-face|charset)/.test(p)) {
+        kept.push(block.raw)
+      } else if (/^@(?:media|supports)/.test(p)) {
+        const innerPurged = purgeCss(block.inner, usedClasses)
+        if (innerPurged.trim()) kept.push(`${block.prelude} {\n${innerPurged}\n}`)
+      } else if (/^@layer/.test(p)) {
+        // Always preserve empty @layer declarations — they establish cascade order
+        // and removing them silently changes specificity even when no rules remain.
+        const innerPurged = purgeCss(block.inner, usedClasses)
+        if (innerPurged.trim()) {
+          kept.push(`${block.prelude} {\n${innerPurged}\n}`)
+        } else {
+          kept.push(`${block.prelude} {}`)
+        }
+      } else {
+        kept.push(block.raw) // unknown at-blocks — keep to be safe
+      }
+    } else if (block.type === 'rule') {
+      if (selectorUsed(block.selector, usedClasses)) kept.push(block.raw)
+    }
+  }
+
+  return kept.join('\n\n')
+}

package/scripts/css-purge.test.js

@@ -0,0 +1,94 @@
+/**
+ * CSS purge/minify tests — run with: node scripts/css-purge.test.js
+ *
+ * Regression focus: @import URLs containing `;` and `&` in their query string
+ * (Google Fonts) were truncated by the production build — the block parser
+ * split the statement at the `;` inside the quoted URL, silently breaking the
+ * theme in production while dev (which serves CSS unprocessed) looked fine.
+ */
+
+import { test } from 'node:test'
+import assert   from 'node:assert/strict'
+import { parseCssBlocks, purgeCss, minifyCss, extractUsedClasses, selectorUsed } from './css-purge.js'
+
+const FONT_IMPORT = `@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');`
+
+// ---------------------------------------------------------------------------
+// The @import regression
+// ---------------------------------------------------------------------------
+
+test('parseCssBlocks: does not split @import at a ; inside a quoted URL', () => {
+  const css = `${FONT_IMPORT}\n:root { --accent: #e25; }`
+  const blocks = parseCssBlocks(css)
+  assert.equal(blocks.length, 2, `Expected 2 blocks, got ${blocks.length}: ${JSON.stringify(blocks.map(b => b.raw))}`)
+  assert.equal(blocks[0].type, 'at-simple')
+  assert.equal(blocks[0].raw, FONT_IMPORT)
+})
+
+test('parseCssBlocks: handles double-quoted URLs and escapes', () => {
+  const css = `@import url("https://example.com/a;b&c=d");\n.x { color: red; }`
+  const blocks = parseCssBlocks(css)
+  assert.equal(blocks[0].raw, `@import url("https://example.com/a;b&c=d");`)
+})
+
+test('purgeCss + minifyCss: Google Fonts @import survives the full pipeline intact', () => {
+  const css = `${FONT_IMPORT}\n:root { --font: 'Inter', sans-serif; }\n.unused { color: red; }`
+  const out = minifyCss(purgeCss(css, new Set([])))
+  assert.ok(
+    out.includes(`url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap')`),
+    `@import URL was mangled by the build pipeline. Output: ${out}`
+  )
+})
+
+test('minifyCss: quoted strings are untouched by punctuation collapsing', () => {
+  const css = `.x { content: "a ; b : c , d" ; }`
+  const out = minifyCss(css)
+  assert.ok(out.includes(`"a ; b : c , d"`), `Quoted string was altered: ${out}`)
+})
+
+// ---------------------------------------------------------------------------
+// Behaviour preserved through the extraction refactor
+// ---------------------------------------------------------------------------
+
+test('purgeCss: drops unused class rules, keeps used ones', () => {
+  const css = `.used { color: red; }\n.unused { color: blue; }`
+  const out = purgeCss(css, new Set(['used']))
+  assert.ok(out.includes('.used'))
+  assert.ok(!out.includes('.unused'))
+})
+
+test('purgeCss: element and :root rules are always kept', () => {
+  const css = `:root { --x: 1; }\nbody { margin: 0; }`
+  const out = purgeCss(css, new Set([]))
+  assert.ok(out.includes(':root'))
+  assert.ok(out.includes('body'))
+})
+
+test('purgeCss: recurses into @media and keeps @font-face', () => {
+  const css = `@media (min-width: 600px) { .used { color: red; } .unused { color: blue; } }\n@font-face { font-family: X; src: url('/x.woff2'); }`
+  const out = purgeCss(css, new Set(['used']))
+  assert.ok(out.includes('.used'))
+  assert.ok(!out.includes('.unused'))
+  assert.ok(out.includes('@font-face'))
+})
+
+test('selectorUsed: rightmost class is the subject', () => {
+  assert.equal(selectorUsed('.nav .link', new Set(['link'])), true)
+  assert.equal(selectorUsed('.nav .link', new Set(['nav'])), false)
+  assert.equal(selectorUsed('.btn:hover', new Set(['btn'])), true)
+})
+
+test('extractUsedClasses: finds class attributes and hyphenated JS strings', () => {
+  const used = extractUsedClasses(
+    ['<div class="hero card">'],
+    [`el.classList.add('ui-btn--active')`]
+  )
+  assert.ok(used.has('hero'))
+  assert.ok(used.has('card'))
+  assert.ok(used.has('ui-btn--active'))
+})
+
+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}`)
+})