Skip to content

refactor(css): WP1 / Phase 1 complete — tokens defined+rolled out, orphan cleanup, nav race fix#360

Merged
pftg merged 11 commits into
masterfrom
css-migration/wp1.1-sprint-6
Jul 12, 2026
Merged

refactor(css): WP1 / Phase 1 complete — tokens defined+rolled out, orphan cleanup, nav race fix#360
pftg merged 11 commits into
masterfrom
css-migration/wp1.1-sprint-6

Conversation

@pftg

@pftg pftg commented Jul 12, 2026

Copy link
Copy Markdown
Member

Summary

Sprint 6 of Project 2509, now covering the full WP1 / Phase 1 closure. 11 commits, zero visual regressions, every commit gated (symmetric swap gate + viewport-fingerprint computed-equivalence + test:critical 46/46 + dtest 46/46).

Phase 1 outcome

WP Result
WP1.1 CSS Variables ✅ Done — --color-primary, --color-muted, --radius-default, --spacing-sm/md defined + ~590 literals tokenized; --color-secondary obsolete (only consumers were dead files)
WP1.2 Reset utilities ❌ Obsolete — premise falsified: 122/140 resets live inside larger blocks; the utility files it asks for already existed, dead, and were deleted here
WP1.3 Infobox pattern ✅ Done — 6 duplicate blocks consolidated (−224 lines; output was already merged by cssnano)
WP1.4 Media queries ❌ Rejected on measurement — raw −6% but gzip +2−3% (transfer size lost); implemented, measured, reverted

Key findings

  • --color-primary was never defined: 28 fallback-less var(--color-primary) declarations shipped invalid-at-computed-value for years. The six live rule groups were codified to their shipped rendering (inherit/transparent/currentColor) before defining the token, so zero pixels changed; the rest are purge-stripped.
  • Nav -active menu state never worked (header cached via partialCached with no variant key) — removed per analyst option (c); option (b) to make it actually work is documented in the tracker.
  • 33 more dead files deleted (draft-only _test apparatus + partials, orphan components, _consolidated-utilities closure).
  • New trap documented: prepending the token foundation via the baseof resource slice puts :root before a file's @imports and silently empties the bundle — wire foundations as @import at the top of the entry file.
  • FCP evidence: first-fold page HTML byte-identical pre/post; external bundles +4.8KB raw (+0.18%), gzip-neutral.

Verification method (per commit)

Converged production build vs converged baseline; symmetric rule-level swap gate (var↔literal normalized both sides, all :root defs stripped, inline bundles extracted from HTML); viewport-fingerprint (last-wins per selector/property at 500/861/1024/1115/1200px) wherever bytes moved; both visual suites. KEEP LITERAL applied where tokenization provably changes merge products (reboot button radius triplets).

🤖 Generated with Claude Code

@coderabbitai

coderabbitai Bot commented Jul 12, 2026

Copy link
Copy Markdown
Contributor

Warning

Review limit reached

@pftg, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 18 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 481482bd-1b70-4a18-ab3d-242a67b63dc8

📥 Commits

Reviewing files that changed from the base of the PR and between 583591c and e384ed7.

📒 Files selected for processing (90)
  • content/_test/use-case-cards-test.md
  • docs/projects/2509-css-migration/TASK-TRACKER.md
  • themes/beaver/assets/css/2949-layout.css
  • themes/beaver/assets/css/3021-layout.css
  • themes/beaver/assets/css/3027-layout.css
  • themes/beaver/assets/css/3059-layout.css
  • themes/beaver/assets/css/3082-layout.css
  • themes/beaver/assets/css/3086-layout2.css
  • themes/beaver/assets/css/3114-layout.css
  • themes/beaver/assets/css/404.css
  • themes/beaver/assets/css/586.css
  • themes/beaver/assets/css/590-layout.css
  • themes/beaver/assets/css/701-layout.css
  • themes/beaver/assets/css/706-layout.css
  • themes/beaver/assets/css/737-layout.css
  • themes/beaver/assets/css/accessibility-focus.css
  • themes/beaver/assets/css/bem-404-conversion.css
  • themes/beaver/assets/css/bem-home-page-minimal.css
  • themes/beaver/assets/css/bf72bba397177a0376baed325bffdc75-layout-bundle.css
  • themes/beaver/assets/css/component-bundle.css
  • themes/beaver/assets/css/components.css
  • themes/beaver/assets/css/components/blocks/c-card.css
  • themes/beaver/assets/css/components/blocks/c-hero.css
  • themes/beaver/assets/css/components/blocks/c-nav.css
  • themes/beaver/assets/css/components/buttons-migration.css
  • themes/beaver/assets/css/components/buttons.css
  • themes/beaver/assets/css/components/c-button.css
  • themes/beaver/assets/css/components/c-gravity-forms.css
  • themes/beaver/assets/css/components/c-hero-sections.css
  • themes/beaver/assets/css/components/c-navigation.css
  • themes/beaver/assets/css/components/c-pp-advanced-menu.css
  • themes/beaver/assets/css/components/c-pp-buttons.css
  • themes/beaver/assets/css/components/c-pp-content-grid.css
  • themes/beaver/assets/css/components/c-pp-infobox.css
  • themes/beaver/assets/css/components/c-pp-widgets.css
  • themes/beaver/assets/css/components/c-social-share.css
  • themes/beaver/assets/css/components/content-block.css
  • themes/beaver/assets/css/components/navigation-migration.css
  • themes/beaver/assets/css/critical/about-us-critical.css
  • themes/beaver/assets/css/critical/careers-critical.css
  • themes/beaver/assets/css/critical/clients-critical.css
  • themes/beaver/assets/css/critical/fl-common-modules.css
  • themes/beaver/assets/css/critical/free-consultation-critical.css
  • themes/beaver/assets/css/critical/homepage-critical.css
  • themes/beaver/assets/css/critical/services-critical.css
  • themes/beaver/assets/css/critical/single-careers.css
  • themes/beaver/assets/css/critical/single-clients.css
  • themes/beaver/assets/css/critical/single-services.css
  • themes/beaver/assets/css/critical/single-use-cases.css
  • themes/beaver/assets/css/cta-backgrounds.css
  • themes/beaver/assets/css/e93d9b85e7803f50c80b8a698f8d12f9-layout-bundle.css
  • themes/beaver/assets/css/e966db44b09892b8d7d492247c67e86c-layout-bundle.css
  • themes/beaver/assets/css/fb2624e43f3c4277448abe268cde571e-layout-bundle.css
  • themes/beaver/assets/css/fl-foundation.css
  • themes/beaver/assets/css/footer.css
  • themes/beaver/assets/css/foundations/css-variables.css
  • themes/beaver/assets/css/homepage-layout.css
  • themes/beaver/assets/css/homepage.css
  • themes/beaver/assets/css/mobile-fixes.css
  • themes/beaver/assets/css/navigation.css
  • themes/beaver/assets/css/pagination.css
  • themes/beaver/assets/css/services-layout.css
  • themes/beaver/assets/css/single-post.css
  • themes/beaver/assets/css/skin-65eda28877e04.css
  • themes/beaver/assets/css/style.css
  • themes/beaver/assets/css/technologies.css
  • themes/beaver/assets/css/theme-main.css
  • themes/beaver/assets/css/use-cases-dynamic.css
  • themes/beaver/assets/css/utilities/_consolidated-utilities.css
  • themes/beaver/assets/css/utilities/c-spacing.css
  • themes/beaver/assets/css/utilities/color-accessibility.css
  • themes/beaver/assets/css/utilities/display.css
  • themes/beaver/assets/css/utilities/fl-builder-basic.css
  • themes/beaver/assets/css/utilities/fl-builder-components.css
  • themes/beaver/assets/css/utilities/flexbox.css
  • themes/beaver/assets/css/utilities/grid/fl-col.css
  • themes/beaver/assets/css/utilities/margins.css
  • themes/beaver/assets/css/utilities/padding.css
  • themes/beaver/assets/css/utilities/position.css
  • themes/beaver/assets/css/utilities/positioning/center-absolute.css
  • themes/beaver/assets/css/utilities/responsive/breakpoints.css
  • themes/beaver/assets/css/utilities/responsive/visibility.css
  • themes/beaver/layouts/_test/single.html
  • themes/beaver/layouts/partials/components/hero-section.html
  • themes/beaver/layouts/partials/components/testimonial.html
  • themes/beaver/layouts/partials/components/use-case-card.html
  • themes/beaver/layouts/partials/data/authors-cached.html
  • themes/beaver/layouts/partials/data/company-cached.html
  • themes/beaver/layouts/partials/data/testimonials-cached.html
  • themes/beaver/layouts/partials/page/navigation.html
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch css-migration/wp1.1-sprint-6

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

Base automatically changed from css-migration/wp1.1-sprint-5 to master July 12, 2026 11:59
Paul Keen and others added 5 commits July 12, 2026 14:00
…, option c)

page/header.html renders header-content.html via partialCached with no
variant key, so navigation.html's per-page $active computation was frozen
from whichever page rendered first — in practice no menu item was ever
highlighted on the live site, and one sprint-5 build nondeterministically
marked Blog active on all 1300 pages (screenshot-flake source). This
codifies the de-facto behavior: active computation removed from the
template, the two dead .-active rules removed from navigation.css.

Alternative (make active-state actually work): key the cache by computed
active-menu id (9 entries) — documented in the tracker if wanted later.

Gate: converged production build — css bundles identical; all 780 pages
carrying the inline nav bundle diff by exactly the two removed dead rules
(verified per page), computed styles unchanged (no element ever has
-active). test:critical 46/46, dtest 46/46.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…omponent partials

content/_test/use-case-cards-test.md (draft: true, never built),
layouts/_test/single.html (sole consumer of the _test type), and the
three partials only it called: components/hero-section.html,
use-case-card.html, testimonial.html. Verified: live pages use
page/testimonials.html and img/testimonial.html, never these; zero
callers outside _test repo-wide. NOTE: component-bundle.css stays —
verification found it live (blog-list + free-consultation bundles),
correcting the sprint-5 assumption.

Gate: converged production build byte-identical (bundles, inline styles,
zero non-noise HTML diffs). test:critical 46/46, dtest 46/46.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
accessibility-focus.css, bem-404-conversion.css, bem-home-page-minimal.css,
cta-backgrounds.css, fl-foundation.css, mobile-fixes.css — zero
resources.Get loaders and zero @imports (no resources.Match globs exist in
the theme, so loader counts are exhaustive); remaining refs are prose
comments noting rules were moved out. bem-home-page-minimal.css carried the
dead --cta-button-bg token, dissolving that sprint-4 repoint follow-up.

Gate: converged production build byte-identical. test:critical 46/46,
dtest 46/46.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…nding)

partials/data/authors-cached.html, testimonials-cached.html,
company-cached.html — zero callers repo-wide (live page/testimonials.html
uses an image partial, not these; no dynamic printf partial names exist
in the theme).

Gate: converged production build byte-identical. test:critical 46/46,
dtest 46/46.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@pftg pftg force-pushed the css-migration/wp1.1-sprint-6 branch from 751032a to 06087bd Compare July 12, 2026 12:04
Paul Keen and others added 6 commits July 12, 2026 14:22
…lector grouping

services-critical.css carried 6 per-fl-node copies of the same infobox
rule set (3 full + 3 without the more-link rules), identical modulo node
id. Grouped selectors at the first block's position, rule order preserved;
-224 source lines. Compiled output byte-identical — cssnano already merged
the duplicates, so this is source hygiene (the WP's projected 1.5KB output
saving was already realized by the pipeline).

Gate: per-node rule expansion of the services inline CSS identical to
baseline; only page inlining these nodes is services/index.html.
test:critical 46/46, dtest 46/46.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…ss audit

Components never imported by any live bundle: buttons-migration.css,
c-navigation.css, c-gravity-forms.css, navigation-migration.css.
Dead aggregator utilities/_consolidated-utilities.css + its 12-file
orphan closure (c-spacing, display, flexbox, margins, padding, position,
fl-builder-basic, grid/fl-col, positioning/center-absolute,
responsive/{breakpoints,visibility}) — sole importer was the aggregator,
which itself @imports a nonexistent grid/fl-row.css, proving it never
compiles. Notable: this closure IS WP1.2's 'reset utilities' — extracted
in an earlier era, wired to nothing, classes in no template.

Settles --color-secondary as obsolete: its only consumers were in dead
buttons-migration.css. Kept fl-builder-visibility.css (live importers).

Gate: converged production build byte-identical (bundles + inline styles).
test:critical 46/46, dtest 46/46.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…wire foundation + spacing tokens

15 literals across c-button, c-social-share, content-block (components
inline bundle) and c-pp-advanced-menu (component-bundle). Foundation now
@imported at the top of components.css — NOT prepended via the baseof
resource slice: that puts :root before the file's @imports, which CSS
invalidates, and silently emptied the whole components bundle (caught by
the swap gate; rules 88→70 + vanished style block).

--spacing-sm: 0.75rem / --spacing-md: 1rem defined at the values
content-block.css fallbacks already resolve to (rendering-neutral);
the dead 0.5rem c-spacing.css family was deleted earlier this sprint.

Gate: symmetric swap gate PASS (all bundles + 12 pages' inline blocks
rule-identical under var↔literal normalization). test:critical 46/46,
dtest 46/46.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…across 50 files

The token had consumers for years but NO definition — 28 fallback-less
declarations shipped invalid-at-computed-value (audited rule by rule).
The six LIVE broken groups (blog-list + free-consultation bundles) were
codified to their shipped rendering FIRST (inherit for color,
transparent/currentColor for the non-inherited props — exactly what
invalid var() computes), so defining the token changes zero pixels.
Purged-in-output consumers keep var() and become valid-and-inert.

All #1a8cff/#1A8CFF literals swapped to var(--color-primary) in one
atomic commit (dedup-twin rule). Gate findings, all computed-proven
equivalent via viewport-fingerprint (last-wins per selector/property at
500/861/1024/1115/1200px): careers/clients border shorthand→longhand
expansion (cssnano), single-career/single-use-cases dedup-twin rule
re-splits with identical values; the only fingerprint delta is the new
:root definition itself. test:critical 46/46, dtest 46/46.

Also removes the stale css-variables.css comment claiming --color-primary
'already exists' — the audit proved it never did.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…ault (4px)

~168 muted-gray literals and 137 exact border-radius:4px declarations
(incl. -moz/-webkit prefixed) swapped to tokens across live CSS, atomic
per the dedup-twin rule. --color-muted fulfils the WP1.1 '--color-text'
item (body text is --color-dark; this is the secondary/muted voice).
--color-secondary NOT defined — audit proved its only consumers lived in
the deleted orphan buttons-migration.css.

KEEP LITERAL: the reboot-generic button radius triplets in 8 critical
files (tokenizing breaks dedup-twin byte-identity; the deleted duplicate
re-appeared in all 13 page bundles until reverted).

Gate: symmetric swap gate clean except one cssnano merge-product change
in free-consultation (button radius merged into an adjacent rule) —
viewport-fingerprint proves computed-equivalence at 5 widths; only delta
is the new :root defs. test:critical 46/46, dtest 46/46.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…WP1.4 measured net-negative

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@pftg pftg changed the title refactor(css): WP1.1 sprint 6 — swarm-verified cleanup (nav -active removal, _test apparatus, sweep orphans) refactor(css): WP1 / Phase 1 complete — tokens defined+rolled out, orphan cleanup, nav race fix Jul 12, 2026
@pftg pftg merged commit 349426d into master Jul 12, 2026
3 checks passed
@pftg pftg deleted the css-migration/wp1.1-sprint-6 branch July 12, 2026 14:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant