Skip to content

CSS Phase C sprint C4: all 7 backlog pages off hashed fl-node classes (~221 re-keys)#375

Merged
pftg merged 10 commits into
masterfrom
css-migration/c4-page-rekeys
Jul 19, 2026
Merged

CSS Phase C sprint C4: all 7 backlog pages off hashed fl-node classes (~221 re-keys)#375
pftg merged 10 commits into
masterfrom
css-migration/c4-page-rekeys

Conversation

@pftg

@pftg pftg commented Jul 19, 2026

Copy link
Copy Markdown
Member

What this is

Phase C sprint C4 — the full page re-key backlog in one sprint. After this PR, zero hashed fl-node-<hash> classes remain in any template: Phase C criterion 2's markup side is complete.

Per-page re-keys (one gated commit each)

Page Prefix Renames Drops Notes
404 error-page__* 13 3 Adopted the pre-existing alias scheme instead of adding a second namespace; duplicate class tokens collapsed
use-cases/single use-case-* 23 5 Singular prefix — list page owns use-cases-*
page/services services-* 23 4 Sweeps critical twins + the shared technologies.css rule
services/single service-* 28 8 Includes the 113-ref clients-grid block
page/about about-* 33 7 The only 2 class-based test selectors in all of C4 updated in the same commit (mobile suite verified green)
page/careers careers-* 48 9 Critical + c-hero-sections.css twins swept
home home-* 66 14 Biggest page; sweeps style.css and the stale home selector in dynamic-404.css

All data-node attributes kept — every other test selector is attribute-based, so no further test churn.

Gate chain per page (batch driver, converged double-builds): byte-identity after boundary-guarded reverse substitution → canonical rule-set equality (cssnano alphabetizes selector groups) → per-selector last-wins declaration-map equality (cssnano regroups shared longhands). Every page passed; the only tolerated diffs are those two cssnano artifact classes, each verified content-exact.

Prep commit: greedy purge-safelist entries for all 7 prefixes (the C2 lesson — semantic selectors must inherit the /^fl-node/ shield for runtime descendant classes).

Also in this PR: Paul's decisions recorded — legacy-theme-skin.css name approved; .jt-reviews-box swiper-design restoration postponed with a concrete how-to in the tracker.

Verification

  • Churn-based critical suite: 34 runs / 52 screenshots / 0 failures
  • Full macOS system suite: 65 runs / 119 screenshots / 0 failures, zero baseline changes
  • Linux full suite (bin/dtest-all): EXIT=0, 119 screenshots, no failures

What remains in Phase C after this

Generic framework classes (fl-row/fl-col/fl-module/fl-node-content) + inert data-node attrs — they die with wrapper collapse (needs design approval, per-page baseline updates) and the critical/fl-* trio retirement; plus the critical-vs-pages dedup and the legacy-shared strangler as their own sprints.

🤖 Generated with Claude Code

https://claude.ai/code/session_01GYRU9wGepomJo5hSuqtu7V

Summary by CodeRabbit

  • Style
    • Improved styling consistency across homepage, About, Careers, Services, Use Cases, and service detail pages.
    • Refined responsive spacing, layouts, typography, cards, carousels, buttons, and section backgrounds across screen sizes.
    • Updated the 404 page styling and structure without changing its content.
    • Preserved dynamic page elements and ensured required styles remain available.
  • Tests
    • Updated mobile visual checks for About page sections to improve screenshot accuracy.

Paul Keen and others added 10 commits July 19, 2026 04:48
…ox restoration postponed

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GYRU9wGepomJo5hSuqtu7V
… prefixes

notfound-/use-case-/services-/service-/about-/home-/careers- get the
same greedy entries as prior sprints, landed BEFORE the renames so each
re-key stays a pure substitution.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GYRU9wGepomJo5hSuqtu7V
…d-class drops

use-case-* prefix (singular; the list page owns use-cases-*). All test
refs are data-node attribute selectors (kept). Gate: converged builds;
byte-identity modulo reverse substitution, escalated for one cssnano
background-longhand regrouping to declaration-set + per-selector
winner-map equality (both exact).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GYRU9wGepomJo5hSuqtu7V
…lass drops

services-* prefix. Sweep covers critical/services-critical.css twins and
the technologies.css shared rule. All test refs are data-node attribute
selectors (kept). Gate: byte-identity modulo boundary-guarded reverse
substitution; the services bundle itself passes at per-selector
winner-map exactness (cssnano regrouping).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GYRU9wGepomJo5hSuqtu7V
…all 16 nodes

Six nodes already carried error-page__* aliases; instead of adding a
second notfound-* scheme, the CSS re-keys onto the aliases and the
remaining 10 nodes join the same namespace. Duplicate class tokens from
alias adoption collapsed (uniq per class attr). 3 dead col-group
classes dropped. Gate: GATE OK (16 nodes) - byte-identity modulo
substitution, two selector-group reorders; token dedupe verified
bundle-inert.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GYRU9wGepomJo5hSuqtu7V
…-class drops

service-* prefix (singular; list page owns services-*). All test refs
are data-node attribute selectors (kept). Gate: GATE OK (36 nodes);
single-service bundle at per-selector winner exactness (cssnano
regrouping), all others byte-identical modulo substitution.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GYRU9wGepomJo5hSuqtu7V
…s drops

about-* prefix; critical/about-us-critical.css twins swept in the same
commit. The two mobile-suite CLASS selectors (.fl-node-os8vrc1dwlji,
.fl-node-nb2thxdw075q - the only class-based test refs in all of C4)
updated to the semantic names in this commit; mobile about tests
verified green against a local-baseURL build. Gate: GATE OK (40 nodes),
one selector-group reorder.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GYRU9wGepomJo5hSuqtu7V
…ass drops

careers-* prefix; critical/careers-critical.css and the two
c-hero-sections.css twins swept in the same commit. No test refs.
Gate: GATE OK (57 nodes), one selector-group reorder.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GYRU9wGepomJo5hSuqtu7V
…s drops

home-* prefix; sweeps cover critical/homepage-critical.css,
critical/fl-layout-grid.css, style.css's :last-child rule, and the
stale home selector in dynamic-404.css. Gate: GATE OK (80 nodes),
selector-group reorders only in 10 bundles.

BACKLOG COMPLETE: every C4 page (404, use-cases/single, services,
services/single, about, careers, home) is now off hashed fl-node
classes.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GYRU9wGepomJo5hSuqtu7V
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GYRU9wGepomJo5hSuqtu7V
@pftg
pftg merged commit 9e85735 into master Jul 19, 2026
2 checks passed
@pftg
pftg deleted the css-migration/c4-page-rekeys branch July 19, 2026 03:19
@coderabbitai

coderabbitai Bot commented Jul 19, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: fc9b03b6-71ae-4b80-a041-62bda98f51ba

📥 Commits

Reviewing files that changed from the base of the PR and between 57590b5 and ac6a6f7.

📒 Files selected for processing (28)
  • docs/projects/2509-css-migration/TASK-TRACKER.md
  • postcss.config.js
  • test/system/mobile_site_test.rb
  • themes/beaver/assets/css/404.css
  • themes/beaver/assets/css/components/c-hero-sections.css
  • themes/beaver/assets/css/critical/about-us-critical.css
  • themes/beaver/assets/css/critical/careers-critical.css
  • themes/beaver/assets/css/critical/fl-layout-grid.css
  • themes/beaver/assets/css/critical/homepage-critical.css
  • themes/beaver/assets/css/critical/services-critical.css
  • themes/beaver/assets/css/critical/single-services.css
  • themes/beaver/assets/css/critical/single-use-cases.css
  • themes/beaver/assets/css/dynamic-404.css
  • themes/beaver/assets/css/pages/about-us.css
  • themes/beaver/assets/css/pages/careers.css
  • themes/beaver/assets/css/pages/homepage.css
  • themes/beaver/assets/css/pages/services.css
  • themes/beaver/assets/css/pages/single-service.css
  • themes/beaver/assets/css/pages/single-use-cases.css
  • themes/beaver/assets/css/style.css
  • themes/beaver/assets/css/technologies.css
  • themes/beaver/layouts/404.html
  • themes/beaver/layouts/home.html
  • themes/beaver/layouts/page/about.html
  • themes/beaver/layouts/page/careers.html
  • themes/beaver/layouts/page/services.html
  • themes/beaver/layouts/services/single.html
  • themes/beaver/layouts/use-cases/single.html

📝 Walkthrough

Walkthrough

This migration replaces Beaver Builder fl-node-* selectors with semantic classes across templates and CSS for the homepage, About, Careers, Services, use-case, single-service, and 404 pages. PurgeCSS safelists and mobile screenshot targets are updated accordingly.

Changes

Semantic CSS migration

Layer / File(s) Summary
Migration safeguards and validation
postcss.config.js, test/system/mobile_site_test.rb, docs/projects/2509-css-migration/TASK-TRACKER.md
Semantic selector prefixes are added to the PurgeCSS safelist, screenshot scroll targets use semantic classes, and migration tracking notes are updated.
404 semantic class wiring
themes/beaver/layouts/404.html, themes/beaver/assets/css/404.css, themes/beaver/assets/css/dynamic-404.css
404 markup and CTA styling are re-keyed from generated node classes to error-page__* selectors.
Homepage and About selector migration
themes/beaver/layouts/home.html, themes/beaver/layouts/page/about.html, themes/beaver/assets/css/critical/*, themes/beaver/assets/css/pages/homepage.css, themes/beaver/assets/css/pages/about-us.css, themes/beaver/assets/css/style.css
Homepage and About sections, infoboxes, statistics, logos, responsive layouts, and row constraints use semantic classes.
Careers selector migration
themes/beaver/layouts/page/careers.html, themes/beaver/assets/css/components/c-hero-sections.css, themes/beaver/assets/css/critical/careers-critical.css, themes/beaver/assets/css/pages/careers.css
Careers hero, values, testimonial, positions grid, newsletter form, and responsive rules use semantic selectors.
Services and use-case selector migration
themes/beaver/layouts/page/services.html, themes/beaver/layouts/services/single.html, themes/beaver/layouts/use-cases/single.html, themes/beaver/assets/css/pages/services.css, themes/beaver/assets/css/pages/single-service.css, themes/beaver/assets/css/pages/single-use-cases.css, themes/beaver/assets/css/critical/*, themes/beaver/assets/css/technologies.css
Services, single-service, and use-case sections, cards, grids, CTAs, and responsive layout rules use semantic classes.

Estimated code review effort: 4 (Complex) | ~60 minutes

Possibly related PRs

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch css-migration/c4-page-rekeys

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.

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