chore(css): orphan source removal + PurgeCSS safelist audit#333
Closed
pftg wants to merge 5 commits into
Closed
Conversation
Audit of all 148 CSS source files in themes/beaver/assets/css/. Used three-pass verification: direct resources.Get reference scan, @import transitive dependency trace, and full-repo basename grep. 67 files confirmed as orphans (no reference in layouts, no live CSS parent chain): 20 top-level fl-*/bem-*/consolidated files, 22 files in components/, 24 files in utilities/, and 1 in variables/. Protected dirs (critical/, mixins/) untouched per sprint constraints. Build: 1012 pages, identical to baseline. Source size: 4.8M -> 3.1M (1.7MB reduction, 35% smaller). Visual regression: 84 screenshots, 0 failures (bin/dtest). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Contributor
📝 WalkthroughWalkthroughThis PR removes approximately 70+ CSS stylesheets from the Beaver theme, narrows PurgeCSS safelist patterns, and deletes master consolidation import files. Changes include elimination of component styles, utilities, accessibility features, and theme-specific CSS without providing replacements. ChangesCSS Stylesheet Consolidation & Cleanup
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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. Comment |
All 399 fl-node-* classes used in site HTML are captured in hugo_stats.json by Hugo's writeStats. The greedy regex was blanket-preserving all fl-node-* rules including unused WordPress node IDs never emitted in Hugo output. homepage: 225KB -> 158KB (-67KB) about-us: 142KB -> 103KB (-39KB) services: 175KB -> 132KB (-43KB) bin/dtest: 84 screenshots, 0 failures Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
All 17 fl-builder-content-* classes captured in hugo_stats.json. Redundant greedy pattern was preserving unused WordPress content builder class variations. homepage: 158KB -> 145KB (-13KB) about-us: 103KB -> 95KB (-8KB) services: 132KB -> 121KB (-11KB) bin/dtest: 84 screenshots, 0 failures Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…elist Only 1 class (technologies-component) uses this prefix, captured in hugo_stats.json. No bundle size change — single class, fully covered by the extractor. bin/dtest: 84 screenshots, 0 failures Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Single class (footer-component) captured by hugo_stats.json extractor. Greedy pattern was redundant. bin/dtest: 84 screenshots, 0 failures Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
pftg
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (1)
postcss.config.js (1)
36-38: ⚡ Quick winExcellent safelist reduction with thorough validation.
The removal of
/^fl-builder-content/,/^fl-node/,/^technologies-component/, and/^footer-component/is well-validated by the three-pass verification and visual regression testing (0 failures across 84 screenshots). The retention of/^fl-col/and/^use-cases/due to JS-driven runtime class usage is the correct decision.Consider documenting the retention rationale.
To improve future maintainability, consider adding an inline comment explaining why
/^fl-col/and/^use-cases/are retained in the greedy safelist.📝 Suggested documentation improvement
greedy: [ + // Retained: JS-driven runtime classes not captured by hugo_stats.json /^swiper-/, /^is-/, /^has-/, /^js-/, /^fl-col/, /^use-cases/ ]🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@postcss.config.js` around lines 36 - 38, Add an inline comment in postcss.config.js next to the greedy safelist entry explaining why the /^fl-col/ and /^use-cases/ patterns are retained (e.g., "retained because these classes are added at runtime via JS and required for layout/interactive features"), so future maintainers understand the rationale; update the array line containing greedy: [ /^swiper-/, /^is-/, /^has-/, /^js-/, /^fl-col/, /^use-cases/ ] to include that brief explanatory comment.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@postcss.config.js`:
- Around line 36-38: Add an inline comment in postcss.config.js next to the
greedy safelist entry explaining why the /^fl-col/ and /^use-cases/ patterns are
retained (e.g., "retained because these classes are added at runtime via JS and
required for layout/interactive features"), so future maintainers understand the
rationale; update the array line containing greedy: [ /^swiper-/, /^is-/,
/^has-/, /^js-/, /^fl-col/, /^use-cases/ ] to include that brief explanatory
comment.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 2ae5f8b7-2765-4044-89ef-1fa6e5cbb69b
📒 Files selected for processing (68)
postcss.config.jsthemes/beaver/assets/css/_consolidated-layouts.cssthemes/beaver/assets/css/accessibility-focus.cssthemes/beaver/assets/css/beaver-grid-layout.cssthemes/beaver/assets/css/bem-404-conversion.cssthemes/beaver/assets/css/bem-home-page-minimal.cssthemes/beaver/assets/css/components/_consolidated-components.cssthemes/beaver/assets/css/components/blocks/c-card.cssthemes/beaver/assets/css/components/blocks/c-nav.cssthemes/beaver/assets/css/components/buttons-migration.cssthemes/beaver/assets/css/components/c-gravity-forms.cssthemes/beaver/assets/css/components/c-infobox.cssthemes/beaver/assets/css/components/c-modal.cssthemes/beaver/assets/css/components/c-navigation.cssthemes/beaver/assets/css/components/c-pagination.cssthemes/beaver/assets/css/components/c-spacer.cssthemes/beaver/assets/css/components/c-testimonial-section.cssthemes/beaver/assets/css/components/c-testimonial-slider.cssthemes/beaver/assets/css/components/cards-migration.cssthemes/beaver/assets/css/components/forms-migration.cssthemes/beaver/assets/css/components/layout-columns.cssthemes/beaver/assets/css/components/layout-foundation.cssthemes/beaver/assets/css/components/layout-rows.cssthemes/beaver/assets/css/components/navigation-migration.cssthemes/beaver/assets/css/components/pp-content-grid.cssthemes/beaver/assets/css/components/pp-list.cssthemes/beaver/assets/css/components/pp-tabs.cssthemes/beaver/assets/css/components/typography.cssthemes/beaver/assets/css/critical.cssthemes/beaver/assets/css/cta-backgrounds.cssthemes/beaver/assets/css/fl-about-layout.cssthemes/beaver/assets/css/fl-careers-layout.cssthemes/beaver/assets/css/fl-clients-alt-bundle.cssthemes/beaver/assets/css/fl-clients-bundle.cssthemes/beaver/assets/css/fl-clients-layout.cssthemes/beaver/assets/css/fl-component-layout.cssthemes/beaver/assets/css/fl-contact-layout.cssthemes/beaver/assets/css/fl-foundation.cssthemes/beaver/assets/css/fl-homepage-layout.cssthemes/beaver/assets/css/fl-services-layout.cssthemes/beaver/assets/css/fl-use-cases-layout.cssthemes/beaver/assets/css/mobile-fixes.cssthemes/beaver/assets/css/utilities.cssthemes/beaver/assets/css/utilities/_consolidated-utilities.cssthemes/beaver/assets/css/utilities/c-spacing.cssthemes/beaver/assets/css/utilities/clearfix.cssthemes/beaver/assets/css/utilities/color-accessibility.cssthemes/beaver/assets/css/utilities/colors.cssthemes/beaver/assets/css/utilities/colors/backgrounds.cssthemes/beaver/assets/css/utilities/components/powerpack/content-grid.cssthemes/beaver/assets/css/utilities/components/powerpack/infobox.cssthemes/beaver/assets/css/utilities/components/powerpack/pp-icon.cssthemes/beaver/assets/css/utilities/components/powerpack/pp-list.cssthemes/beaver/assets/css/utilities/display.cssthemes/beaver/assets/css/utilities/fl-builder-basic.cssthemes/beaver/assets/css/utilities/fl-builder-components.cssthemes/beaver/assets/css/utilities/fl-builder-visibility.cssthemes/beaver/assets/css/utilities/flexbox.cssthemes/beaver/assets/css/utilities/grid/fl-col.cssthemes/beaver/assets/css/utilities/margins.cssthemes/beaver/assets/css/utilities/opacity.cssthemes/beaver/assets/css/utilities/padding.cssthemes/beaver/assets/css/utilities/position.cssthemes/beaver/assets/css/utilities/positioning/center-absolute.cssthemes/beaver/assets/css/utilities/responsive/breakpoints.cssthemes/beaver/assets/css/utilities/responsive/visibility.cssthemes/beaver/assets/css/utilities/typography/text-utilities.cssthemes/beaver/assets/css/variables/colors.css
💤 Files with no reviewable changes (58)
- themes/beaver/assets/css/utilities/components/powerpack/content-grid.css
- themes/beaver/assets/css/components/c-testimonial-section.css
- themes/beaver/assets/css/utilities/positioning/center-absolute.css
- themes/beaver/assets/css/utilities/grid/fl-col.css
- themes/beaver/assets/css/components/typography.css
- themes/beaver/assets/css/cta-backgrounds.css
- themes/beaver/assets/css/utilities/clearfix.css
- themes/beaver/assets/css/utilities/colors/backgrounds.css
- themes/beaver/assets/css/utilities/padding.css
- themes/beaver/assets/css/mobile-fixes.css
- themes/beaver/assets/css/components/layout-rows.css
- themes/beaver/assets/css/components/c-modal.css
- themes/beaver/assets/css/utilities/fl-builder-visibility.css
- themes/beaver/assets/css/components/layout-columns.css
- themes/beaver/assets/css/utilities/components/powerpack/pp-icon.css
- themes/beaver/assets/css/components/navigation-migration.css
- themes/beaver/assets/css/components/c-testimonial-slider.css
- themes/beaver/assets/css/utilities/opacity.css
- themes/beaver/assets/css/utilities/typography/text-utilities.css
- themes/beaver/assets/css/_consolidated-layouts.css
- themes/beaver/assets/css/components/forms-migration.css
- themes/beaver/assets/css/fl-contact-layout.css
- themes/beaver/assets/css/utilities/_consolidated-utilities.css
- themes/beaver/assets/css/variables/colors.css
- themes/beaver/assets/css/components/_consolidated-components.css
- themes/beaver/assets/css/utilities/components/powerpack/pp-list.css
- themes/beaver/assets/css/utilities/responsive/visibility.css
- themes/beaver/assets/css/accessibility-focus.css
- themes/beaver/assets/css/utilities/components/powerpack/infobox.css
- themes/beaver/assets/css/utilities/responsive/breakpoints.css
- themes/beaver/assets/css/components/c-infobox.css
- themes/beaver/assets/css/utilities.css
- themes/beaver/assets/css/utilities/display.css
- themes/beaver/assets/css/fl-foundation.css
- themes/beaver/assets/css/components/c-gravity-forms.css
- themes/beaver/assets/css/utilities/position.css
- themes/beaver/assets/css/utilities/margins.css
- themes/beaver/assets/css/components/c-navigation.css
- themes/beaver/assets/css/fl-clients-bundle.css
- themes/beaver/assets/css/utilities/fl-builder-basic.css
- themes/beaver/assets/css/utilities/colors.css
- themes/beaver/assets/css/components/pp-list.css
- themes/beaver/assets/css/components/pp-tabs.css
- themes/beaver/assets/css/utilities/flexbox.css
- themes/beaver/assets/css/bem-home-page-minimal.css
- themes/beaver/assets/css/components/pp-content-grid.css
- themes/beaver/assets/css/components/c-spacer.css
- themes/beaver/assets/css/components/blocks/c-card.css
- themes/beaver/assets/css/components/cards-migration.css
- themes/beaver/assets/css/components/buttons-migration.css
- themes/beaver/assets/css/bem-404-conversion.css
- themes/beaver/assets/css/components/layout-foundation.css
- themes/beaver/assets/css/utilities/c-spacing.css
- themes/beaver/assets/css/critical.css
- themes/beaver/assets/css/utilities/color-accessibility.css
- themes/beaver/assets/css/utilities/fl-builder-components.css
- themes/beaver/assets/css/components/blocks/c-nav.css
- themes/beaver/assets/css/components/c-pagination.css
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Sprint #3a — Orphan source file removal
Method
Three-pass verification per file:
resources.Getreference scan across all layouts and partials@importtransitive dependency trace — only counted as "live" when the importing file itself has a live parentgrepacross layouts, CSS, JS, TOML, YAML, JSON, MarkdownA file was marked as a confirmed orphan only when all three passes found zero live references.
Orphans by category
20 top-level fl- / bem- / consolidated files** — Beaver Builder export artifacts with no
resources.Getentry point.22 components/ files — Not imported by
component-bundle.cssorcomponents.css(the two live component entry points). Includes migration helpers and unused component extracts.24 utilities/ files — Only imported by orphan files. Files with live parents (
utilities/fl-builder-grid.css,utilities/foundation/reset.css,utilities/foundation/screen-reader.css) were KEPT.1 variables/ file —
variables/colors.csshas no importer in the live chain.Note:
critical/(15 files) andmixins/(1 file) untouched per sprint constraints.#3a verification
bin/dtest: 84 screenshots, 0 failuresSprint #3b — PurgeCSS safelist audit
Hypothesis: The
greedy:safelist blanket-preserves CSS rules for class prefixes that are already fully captured inhugo_stats.jsonby Hugo'swriteStats. Removing redundant patterns lets PurgeCSS eliminate unused WordPress-era rules.Hypothesis confirmed: All 6 candidate patterns ARE in
hugo_stats.json(fl-node: 399 classes, fl-builder-content: 17, fl-col: 13, technologies-component: 1, footer-component: 1, use-cases: 1).Pattern audit results
/^fl-node//^fl-builder-content//^technologies-component//^footer-component//^fl-col//^use-cases/^use-casesbeyond the one captured class#3b bundle reduction
#3b verification
bin/dtest: 84 screenshots, 0 failuresDynamic load patterns (informational)
No dynamic CSS loading patterns block further reduction. All
resources.ExecuteAsTemplatecalls reference explicitly named source files already in the live set.Patterns kept — root cause analysis
/^fl-col/:fl-col-small-custom-width,fl-col-custom-width, and responsive variants likefl-col-responsive-*appear in source CSS but are not emitted as HTML classes in any Hugo template. They're used via WordPress Beaver Builder's runtime width calculations, kept alive in HTML by JavaScript that hugo_stats.json never sees./^use-cases/: Similar pattern —use-cases-*modifier classes set by JS interaction state.🤖 Generated with Claude Code
Summary by CodeRabbit