Repository navigation
docs: optimizing CSS size guide with measured flavors; scaffold size hints - #309
Conversation
…hints The docs half of #193. New getting-started page with the three levers, cheapest first: (1) lighter flavors — a measured size table from the current minified dist (complete ~800KB/~82KB gzip down to no-helpers ~595KB/~67KB), with the no-helpers warning that helper props compile to the removed classes; (2) an opt-in PurgeCSS recipe for Vite with the Bulma-aware safelist (is-/has-/theme-*/bestax-*) and verify-your-states guidance; (3) the modular Sass path via the existing Modular guide. variations.md links to it; the create-bestax flavor picker descriptions now carry the gzip sizes so the tradeoff is visible at scaffold time. The opt-in purge tooling in the scaffold itself (issue's remaining half) still needs a design decision and stays open on #193. Refs #193 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Pohc8xLkdx4gwXkW3xd7up
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
WalkthroughUpdated Bulma flavor metadata with approximate gzip sizes and added documentation covering flavor selection, PurgeCSS, modular Sass, CSS variation sizes, and related optimization guidance. ChangesCSS size guidance
Estimated code review effort: 2 (Simple) | ~10 minutes Possibly related issues
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
Preview DeploymentPreview URL: https://34659857.bestax.pages.dev |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 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.
Inline comments:
In `@docs/docs/guides/getting-started/optimizing-css.md`:
- Around line 60-69: Add PurgeCSS safelist patterns in the shown `purgecss`
configuration for the spacing utility classes emitted by `useSpacingClasses`,
covering `m-*`, `p-*`, and axis variants such as `mx-*` and `py-*`, while
preserving the existing `is-*`, `has-*`, theme, and `bestax-*` patterns.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: 9216d286-0a73-4676-b7a1-58f949ecc2d3
📒 Files selected for processing (3)
create-bestax/src/constants.tsdocs/docs/guides/getting-started/optimizing-css.mddocs/docs/guides/getting-started/variations.md
![claude[bot]](https://avatars.githubusercontent.com/in/1236702?s=60&v=4){kind=small}
There was a problem hiding this comment.
Deep review — 1 finding
| # | Severity | Area | Finding | Location |
|---|---|---|---|---|
| 1 | 🟠 Major | Correctness | PurgeCSS safelist targets the .theme-* class form, but bestax toggles dark mode via the data-theme attribute — the recipe can purge the very scheme flip it promises to protect |
docs/docs/guides/getting-started/optimizing-css.md:66-68 |
Overall: This is a well-scoped docs + scaffold-strings change; the flavor size table is internally consistent with the create-bestax descriptions, both doc anchors (#option-c--hand-rolled-modular-scss-advanced, #dark-mode--contrast) resolve, all five CSS import paths are real package exports, and sidebar_position: 6 is unused so no ordering clash. The one substantive risk is the PurgeCSS safelist in Lever 2: bestax's <Theme colorMode> writes data-theme="dark" on <html> (never a .theme-dark class), and the /theme-dark///theme-light/ patterns don't match the [data-theme=…] selector string — so a reader copying the recipe could ship a build where dark mode silently no-ops. Human should focus there; the guide's own "verify both schemes" caveat softens it, but the default recipe should be correct out of the box. I did not independently re-measure the dist byte sizes (dist isn't built in the checkout), but the figures are approximate and cross-consistent.
🏄 Solid little guide, dude — clean lines, good vibes, the size table and links all hold up. Just one gnarly rock under the surf: the purge safelist waves at
.theme-darkwhile the app's actually ridingdata-theme, so tighten that up and you're good to paddle out.
Review findings on the Lever 2 safelist, all verified against the helper implementation and Bulma's emitted selectors: - Safelist the spacing classes (m-*/p-* and axis variants) — useSpacingClasses composes them at runtime, so content scanning never sees them (CodeRabbit). - Safelist the [data-theme] attribute selector — Theme colorMode sets the attribute, and /theme-dark/ does not match '[data-theme=dark]', so PurgeCSS could prune the exact scheme flip the comment promised to protect (deep review). - Scan the library bundle in content — the static class literals (button, card, …) live in dist, not app source, and 'Button' in JSX does not match '.button' case-sensitively. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Pohc8xLkdx4gwXkW3xd7up
Preview DeploymentPreview URL: https://41fe934b.bestax.pages.dev |
|
🎉 This PR is included in version 5.6.2 🎉 The release is available on: Your semantic-release bot 📦🚀 |
|
🎉 This PR is included in version 3.3.2 🎉 The release is available on: Your semantic-release bot 📦🚀 |
|
🎉 This PR is included in version 1.0.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
|
🎉 This PR is included in version 1.0.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
2 participants
Pull Request
Description
The docs/guidance half of #193 (the opt-in purge tooling in the scaffold needs a design decision and stays open on the issue).
@allxsmith/bestax-bulma)create-bestax) — flavor-picker descriptions gain gzip size hints@allxsmith/bestax-docs) — new guide + variations cross-linkNew guide:
docs/guides/getting-started/optimizing-css— the three levers, cheapest first:complete~800 KB / ~82 KB gzip →no-helpers~595 KB / ~67 KB), with the critical warning thatno-helpersremoves the classes the helper props compile to. (The issue's ~873 KB figure included app CSS; the library file itself measures ~800 KB.)is-*/has-*state classes,theme-dark/lightscheme flips,bestax-*prefix) and explicit verify-your-dynamic-states guidance, since purging is heuristic.Scaffold-time guidance (issue ask #2): the
create-bestaxflavor picker descriptions now carry the gzip sizes (Full Bulma CSS … (~82 KB gzip),no-helpers … helper props need them (~67 KB gzip), etc.), so the tradeoff is visible exactly when the user pickscomplete. String-only change; all 187 create-bestax tests pass.Cross-links:
variations.mdgains a size line pointing at the new page; the guide links Dark Mode & Contrast (pin the scheme before reaching forno-dark-mode).Related Issue(s)
Refs #193 (docs half — the scaffold purge tooling remains open there)
Type of Change
Checklist
CLAUDE.mdfiles are updated (none affected)🤖 Generated with Claude Code
https://claude.ai/code/session_01Pohc8xLkdx4gwXkW3xd7up
Generated by Claude Code
Summary by CodeRabbit