Run parity checks
How-to: install the harness, record a widget, inspect its live CSS and run the checks.
Goal: prove one widget matches the live site. Concepts are in How the parity harness works; the full matrix and options are in the parity harness reference.
- Install the browsers and tooling:
bun run --cwd tools/parity parity:install- Record the widget's live traffic and extract fixtures:
bun run --cwd tools/parity parity:record article-list-sidebar-must-watch- Dump the live CSS for each element at a width:
bun run --cwd tools/parity parity:inspect article-list-sidebar-must-watch 1280- Run the checks:
bun run --cwd tools/parity parity -g article-list-sidebar-must-watchrecord captures the HAR at every width plus the club reference, drops cancelled entries and writes fixtures with extract.ts. inspect dumps each element's matched live CSS rules, pseudo-elements included, with their media queries, into .parity/inspect/ (the porting reference). parity starts apps/web through portless at https://parity.afl.localhost with PARITY=1 CONTENT_SOURCE=fixtures unless PARITY_BUILD_URL is set, and writes .parity/runs.json; parity:publish posts those runs to the tracker (TRACKER_URL, TRACKER_API_TOKEN).
Regenerate a widget
To rebuild an already migrated widget and see what changed:
bun run --cwd tools/parity parity:rebuild article-list-sidebar-must-watch --trigger "content model change" --change-log "what should change"
bun run --cwd tools/parity parity -g article-list-sidebar-must-watch
bun run --cwd tools/parity parity:publishparity:rebuild needs TRACKER_URL and TRACKER_API_TOKEN, snapshots the prior build and refuses to start while an earlier rebuild is unpublished. parity:publish stores the runs against the rebuild and its report (fields, checks and screenshots that changed) on the item page. The change log is always written and the item's original ticket is reused; add --track to also file a child ticket under it. Set PARITY_SCREENSHOT_THRESHOLD_PCT to treat a small share of differing pixels as a yellow warning instead of a failure.
HAR files are a few MB per widget (the pilot's was 3.6MB). Track tools/parity/widgets/**/*.har.zip with Git LFS before many widgets land.
Parity harness
Live pages are recorded once into git. Every run replays them offline and renders the build from fixtures captured from the same recording, so both sides see identical data and images. Pixels, computed styles, interactions and club theme tokens are compared.
Sync design system and club tokens
How-to and background: regenerate `design-system.css` and `club-themes.css` instead of editing them.