mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-12 06:06:37 +03:00
Paul BakausandClaude Opus 4.7
cd8dbff014
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>
150 lines
7.4 KiB
JavaScript
150 lines
7.4 KiB
JavaScript
/**
|
|
* Tests for live-accept.mjs — the deterministic accept/discard helper.
|
|
* Run with: node --test tests/live-accept.test.mjs
|
|
*/
|
|
|
|
import { describe, it, beforeEach, afterEach } from 'node:test';
|
|
import assert from 'node:assert/strict';
|
|
import { mkdtempSync, writeFileSync, readFileSync, rmSync } from 'node:fs';
|
|
import { dirname, join, resolve } from 'node:path';
|
|
import { tmpdir } from 'node:os';
|
|
import { fileURLToPath } from 'node:url';
|
|
import { execFileSync } from 'node:child_process';
|
|
|
|
const __dirname = dirname(fileURLToPath(import.meta.url));
|
|
const ACCEPT = resolve(__dirname, '..', 'source/skills/impeccable/scripts/live-accept.mjs');
|
|
|
|
function runAccept(cwd, args) {
|
|
try {
|
|
const out = execFileSync('node', [ACCEPT, ...args], {
|
|
cwd,
|
|
encoding: 'utf-8',
|
|
stdio: ['ignore', 'pipe', 'pipe'],
|
|
});
|
|
return JSON.parse(out.trim());
|
|
} catch (err) {
|
|
const body = err.stdout?.toString().trim() || err.stderr?.toString().trim() || '';
|
|
return JSON.parse(body || '{}');
|
|
}
|
|
}
|
|
|
|
describe('live-accept — style-element edge cases', () => {
|
|
let tmp;
|
|
beforeEach(() => { tmp = mkdtempSync(join(tmpdir(), 'impeccable-accept-test-')); });
|
|
afterEach(() => { rmSync(tmp, { recursive: true, force: true }); });
|
|
|
|
// Historical bug: extractVariant flipped into "inStyle" mode on <style and
|
|
// scanned for </style> line-by-line. JSX self-closing <style ... /> has no
|
|
// separate closer, so it got stuck forever and missed data-impeccable-variant
|
|
// divs that came after.
|
|
it('finds the accepted variant after a JSX self-closing <style /> block', () => {
|
|
const html = `<body>
|
|
<!-- impeccable-variants-start SELFC -->
|
|
<div data-impeccable-variants="SELFC" data-impeccable-variant-count="3" style="display: contents">
|
|
<div data-impeccable-variant="original">
|
|
<p class="hook">original text</p>
|
|
</div>
|
|
<style data-impeccable-css="SELFC" dangerouslySetInnerHTML={{ __html: '@scope ([data-impeccable-variant="1"]) { .hook { color: red; } }' }} />
|
|
<div data-impeccable-variant="1">
|
|
<p class="hook">variant one</p>
|
|
</div>
|
|
<div data-impeccable-variant="2" style="display: none">
|
|
<p class="hook">variant two</p>
|
|
</div>
|
|
<div data-impeccable-variant="3" style="display: none">
|
|
<p class="hook">variant three</p>
|
|
</div>
|
|
</div>
|
|
<!-- impeccable-variants-end SELFC -->
|
|
</body>`;
|
|
writeFileSync(join(tmp, 'page.html'), html);
|
|
|
|
const result = runAccept(tmp, ['--id', 'SELFC', '--variant', '2']);
|
|
assert.equal(result.handled, true, `accept should succeed: ${JSON.stringify(result)}`);
|
|
|
|
const after = readFileSync(join(tmp, 'page.html'), 'utf-8');
|
|
// Self-closing style has no extractable CSS body, so there's nothing to carbonize —
|
|
// no carbonize block, no data-impeccable-variant wrapper (it would serve no purpose).
|
|
assert.ok(!after.includes('impeccable-carbonize-start'), 'no carbonize block (self-closing style has no body)');
|
|
assert.ok(!after.includes('impeccable-variants-start'), 'variant markers removed');
|
|
assert.ok(after.includes('variant two'), 'variant 2 content kept');
|
|
assert.ok(!after.includes('variant three'), 'other variant content dropped');
|
|
assert.ok(!after.includes('variant one'), 'other variant content dropped');
|
|
assert.ok(!after.includes('original text'), 'original content dropped');
|
|
});
|
|
|
|
// Variant: same-line <style>…</style> block should also be treated as a
|
|
// single skipped unit; the line has both open and close tags.
|
|
it('finds the accepted variant after a single-line <style>…</style> block', () => {
|
|
const html = `<body>
|
|
<!-- impeccable-variants-start ONELINE -->
|
|
<div data-impeccable-variants="ONELINE" data-impeccable-variant-count="3" style="display: contents">
|
|
<div data-impeccable-variant="original"><p class="hook">original</p></div>
|
|
<style data-impeccable-css="ONELINE">@scope ([data-impeccable-variant="1"]) { .hook { color: red; } }</style>
|
|
<div data-impeccable-variant="1"><p class="hook">variant one</p></div>
|
|
<div data-impeccable-variant="2" style="display: none"><p class="hook">variant two</p></div>
|
|
<div data-impeccable-variant="3" style="display: none"><p class="hook">variant three</p></div>
|
|
</div>
|
|
<!-- impeccable-variants-end ONELINE -->
|
|
</body>`;
|
|
writeFileSync(join(tmp, 'page.html'), html);
|
|
|
|
const result = runAccept(tmp, ['--id', 'ONELINE', '--variant', '3']);
|
|
assert.equal(result.handled, true, `accept should succeed: ${JSON.stringify(result)}`);
|
|
|
|
const after = readFileSync(join(tmp, 'page.html'), 'utf-8');
|
|
assert.ok(after.includes('data-impeccable-variant="3"'), 'accepted wrapper for variant 3 present');
|
|
assert.ok(after.includes('variant three'), 'variant 3 content kept');
|
|
assert.ok(!after.includes('variant two'), 'other variant content dropped');
|
|
});
|
|
|
|
// Baseline: the standard multi-line <style>...</style> case must keep working.
|
|
it('finds the accepted variant after a multi-line <style>…</style> block (regression baseline)', () => {
|
|
const html = `<body>
|
|
<!-- impeccable-variants-start MULTI -->
|
|
<div data-impeccable-variants="MULTI" data-impeccable-variant-count="3" style="display: contents">
|
|
<div data-impeccable-variant="original"><p class="hook">original</p></div>
|
|
<style data-impeccable-css="MULTI">
|
|
@scope ([data-impeccable-variant="1"]) { .hook { color: red; } }
|
|
@scope ([data-impeccable-variant="2"]) { .hook { color: green; } }
|
|
</style>
|
|
<div data-impeccable-variant="1"><p class="hook">variant one</p></div>
|
|
<div data-impeccable-variant="2" style="display: none"><p class="hook">variant two</p></div>
|
|
</div>
|
|
<!-- impeccable-variants-end MULTI -->
|
|
</body>`;
|
|
writeFileSync(join(tmp, 'page.html'), html);
|
|
|
|
const result = runAccept(tmp, ['--id', 'MULTI', '--variant', '1']);
|
|
assert.equal(result.handled, true, `accept should succeed: ${JSON.stringify(result)}`);
|
|
|
|
const after = readFileSync(join(tmp, 'page.html'), 'utf-8');
|
|
assert.ok(after.includes('data-impeccable-variant="1"'), 'accepted wrapper for variant 1 present');
|
|
assert.ok(after.includes('variant one'), 'variant 1 content kept');
|
|
});
|
|
|
|
// Discard must restore the original element after a self-closing <style />,
|
|
// proving extractOriginal also survives the style pattern.
|
|
it('discard restores the original element after a JSX self-closing <style />', () => {
|
|
const html = `<body>
|
|
<!-- impeccable-variants-start DISC -->
|
|
<div data-impeccable-variants="DISC" data-impeccable-variant-count="2" style="display: contents">
|
|
<div data-impeccable-variant="original"><p class="hook">ORIGINAL CONTENT</p></div>
|
|
<style data-impeccable-css="DISC" dangerouslySetInnerHTML={{ __html: '@scope ([data-impeccable-variant="1"]) { .hook { color: red; } }' }} />
|
|
<div data-impeccable-variant="1"><p class="hook">variant one</p></div>
|
|
<div data-impeccable-variant="2" style="display: none"><p class="hook">variant two</p></div>
|
|
</div>
|
|
<!-- impeccable-variants-end DISC -->
|
|
</body>`;
|
|
writeFileSync(join(tmp, 'page.html'), html);
|
|
|
|
const result = runAccept(tmp, ['--id', 'DISC', '--discard']);
|
|
assert.equal(result.handled, true, `discard should succeed: ${JSON.stringify(result)}`);
|
|
|
|
const after = readFileSync(join(tmp, 'page.html'), 'utf-8');
|
|
assert.ok(after.includes('ORIGINAL CONTENT'), 'original restored');
|
|
assert.ok(!after.includes('impeccable-variants-start'), 'wrapper markers gone');
|
|
assert.ok(!after.includes('variant one'), 'variants dropped');
|
|
});
|
|
});
|