Repository navigation
💄🚀:stop shipping the CSS nothing wears - #1877
Conversation
The stylesheet was 158 KB, a third of the whole site, blocking the render of every page. Browser coverage put 34 KB of it to work and left the rest untouched; 125 KB of the 158 came from Bootstrap. Three things went. `pagination` styles a component the markup never names -- no `.pagination`, `.page-item` or `.page-link` anywhere. `grid` was the same: no `.row` and no `.col-*`, the `invite-row` and `join-row` in the markup being ours. The utility API was the large one, generating a class for every value of every utility, 69 KB of it, while the markup wears eighteen: the displays, one flex direction and shrink, a width, a height, five margins, two paddings, a text alignment and two colors. It is handed those thirteen groups now. `map.get` needs `sass:map`, and a `@use` has to precede every import, so it sits above the file. 94 KB, and the same site: nine pages at two widths render pixel for pixel as they did, and the drawer still opens on one tap. Signed-off-by: Derek Lewis <DerekNonGeneric@inf.is> Assisted-by: Claude-Code:claude-opus-5
✅ Deploy Preview for gh-pages-openinf ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Team Run ID: 📒 Files selected for processing (1)
Included review availability: Your plan provides up to 10 included reviews per hour; 9 remain after this review. 📝 WalkthroughWalkthroughThe main Sass stylesheet now imports Sass’s ChangesBootstrap stylesheet optimization
Estimated code review effort: 2 (Simple) | ~10 minutes Merge Risk: ⚪ Minimal · up to This change removes unused stylesheet output while preserving the reported page visuals and interactions; no actionable merge-blocking risk remains after normal checks and review. 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
Full details: Docstring CoverageExplanation No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 0 files. (1 skipped: 1 unsupported.) ✨ Finishing Touches🧪 Generate unit tests (beta)
Warning Some tools did not complete. Review the errors below. 🔧 Stylelint (17.14.0)_assets/styles/main.scssConfigurationError: Could not find "stylelint-config-recess-order". Do you need to install the package or use the "configBasedir" option? Comment |
main.min.csswas 158.2 KB — a third of the entire 484 KB site, andrender-blocking on every page. It is now 94.4 KB, 40% smaller, with
no visual change anywhere.
Where the weight was
Measured by building with and without each piece:
Browser CSS coverage across seven pages covering every layout found
34.4 KB ever used. Your bespoke SCSS is 33.3 KB and essentially all of
it is live, so the unused portion was almost entirely Bootstrap.
What went
pagination— the markup never names it. Exact class counts acrossthe built site:
.pagination0,.page-item0,.page-link0.grid—.row0,.col-*0. Theinvite-rowandjoin-rowinhome.htmlanddocs.htmlare ours; an earlier substring grep of minemistook them for Bootstrap's, which is why the counts here are anchored
to whole class names.
The utility matrix — 68.9 KB generating a class for every value of
every utility. The markup wears eighteen:
$utilitiesis now narrowed to the thirteen groups those come from,before
utilities/apireads it. Adding a utility later means adding aline there first — a papercut, and also a guardrail.
map.getneedssass:map, and a@usemust precede every@import,so that one line sits at the top of the file.
What stayed, and why
containers(.container-fluidon 21 pages),helpers(.fixed-topon 21),
nav/navbar(.nav-linkand.nav-item168 each), plusrebootandroot.Checked
nps test— all verify tasks pass..container-fluid,.fixed-top,.navbar,.nav-link,.nav-item,.btnand.btn-primarystillresolve to rules in the built CSS.
build before this change — home, news, about, docs, license, a
handbook page, a news post, 404 and a security doc, at 1280px and
390px.
aria-expandedandinertcorrect, and closes again. No pageerrors.
Left on the table
buttonscosts 10.0 KB and styles a single.btnon/404/.Replacing it with a bespoke rule would take the stylesheet to roughly
84 KB, but that changes how that button looks unless matched carefully,
so it is not in this PR.
Summary by CodeRabbit