fix(live-accept): handle JSX self-closing <style />, single-line variants, and same-line style blocks

Three related extraction bugs surfaced in the EAC session all rooted
in the line-based state machine:

1. `<style ... />` (JSX self-closing) had no separate `</style>` for
   the "skip until close" mode to exit on, so the state machine stuck
   and every `data-impeccable-variant` marker after it got missed.
   Accept reported `handled: false, error: "Variant N not found"`.
2. A variant whose entire `<div ...>...</div>` sits on one line had
   its body silently discarded — the marker line was `continue`d past,
   and the extractor started capturing from the next line, which
   usually belonged to a different variant or the wrapper close.
3. `extractCss` kept scanning for `</style>` after a self-closing
   opener, greedily swallowing every subsequent variant div as "CSS".
   Result: a mangled carbonize block stuffed with HTML and a duplicate
   variant rendered below.

## Fix

Replaced the line-based state machine with a string-based flow:

- `stripStyleAndJoin(lines, block)` returns the wrapper text with
  `<style>` elements fully removed. Handles self-closing, same-line
  open+close, and multi-line open/close. Markers inside CSS strings
  (e.g. `@scope ([data-impeccable-variant="1"])`) are gone by the
  time extraction runs — no false positives.
- `extractInnerByAttr(text, attrMatch)` is a balanced-tag matcher that
  walks the joined text finding `<TAG ...attrMatch...>…</TAG>` with
  proper depth tracking for nested same-tag elements. Handles
  single-line, multi-line, and deeply nested variants.
- `extractOriginal` and `extractVariant` are thin wrappers over the
  above.
- `extractCss` gets explicit same-line handling: returns null for
  self-closing (nothing to carbonize), extracts inner content via
  regex for same-line `<style>…</style>`, falls through to the
  existing multi-line path otherwise.

## Tests

New tests/live-accept.test.mjs with four cases — all failing before,
all passing after:

- Self-closing `<style />` with dangerouslySetInnerHTML
- Single-line `<style>…</style>`
- Multi-line `<style>...</style>` (regression baseline)
- Discard restores the original element after self-closing style

Wired into `bun run test`. Full suite passes.

Credit: precise repro + root-cause trace from the other agent in the
EAC session.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
2026-04-22 01:01:43 -07:00
co-authored by Claude Opus 4.7
parent a4832adf2f
commit cd8dbff014
26 changed files with 1458 additions and 781 deletions
+1 -1
View File
@@ -49,7 +49,7 @@
"dev": "bun run server/index.js",
"preview": "bun run build && wrangler pages dev",
"deploy": "bun run build && wrangler pages deploy build/",
"test": "bun test tests/build.test.js tests/detect-antipatterns.test.js && node --test tests/detect-antipatterns-fixtures.test.mjs && node --test tests/detect-antipatterns-browser.test.mjs && node --test tests/cleanup-deprecated.test.mjs && node --test tests/live-wrap.test.mjs && node --test tests/live-server.test.mjs && node --test tests/framework-fixtures.test.mjs",
"test": "bun test tests/build.test.js tests/detect-antipatterns.test.js && node --test tests/detect-antipatterns-fixtures.test.mjs && node --test tests/detect-antipatterns-browser.test.mjs && node --test tests/cleanup-deprecated.test.mjs && node --test tests/live-wrap.test.mjs && node --test tests/live-accept.test.mjs && node --test tests/live-server.test.mjs && node --test tests/framework-fixtures.test.mjs",
"prepack": "cp README.md README.repo.md && cp README.npm.md README.md",
"postpack": "cp README.repo.md README.md && rm README.repo.md",
"screenshot": "bun run scripts/screenshot-antipatterns.js",