perf(web): theme only the Material components the app imports

m3-theme.scss included mat.all-component-themes and
mat.all-component-colors, which emit the tokens of every Material component:
23,646 bytes of the initial stylesheet belonged to 17 components nothing
imports (datepicker, chips, stepper, expansion, radio, tabs, badge, table,
paginator, sidenav, bottom sheet, toolbar, timepicker, grid list, tree,
autocomplete, sort). A $material-components list, in Material's order, now
drives the *-theme and *-color mixins through meta.apply, so light and dark
cannot drift apart. tools/nx/check-material-theme-scope.mjs (CI) compares
the list with the @angular/material/<entry> imports of the runtime sources
in both directions: a newly imported component must be themed, and a
component whose last import went must leave the list. core (ripples,
options, pseudo-checkboxes) always stays, and the button entry point keeps
button, icon-button and fab together.

The compiled stylesheet lost exactly 426 declarations, all tokens of those
17 components plus the dead .mat-drawer-inner-container rule in styles.scss
(sidenav is never imported); nothing was added or changed.

renderer.initialBytes: 1,432,237 -> 1,408,099 bytes (-24,138) on a local
production build.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
4grayandClaude Fable 5.1 committed 2026-10-13 09:49:55 +02:00
1 parent 60bccc96e8
commit ffe6f974f7
6 files changed
+366 -6

No files matched your search

+5
View File
@@ -436,6 +436,11 @@ jobs:
- name: Validate form-field defaults
run: pnpm run styles:form-field-defaults:validate
# m3-theme.scss themes only the Material components the app
# imports; a new import without a theme entry renders unthemed.
- name: Validate the Material theme scope
run: pnpm run styles:material-theme-scope:validate
# Nx rejects a non-parallel task with continuous dependencies, and
# the Playwright plugin infers serve dependencies only when CI is
# unset, so this checks both the local and the CI inference.