mirror of
https://github.com/4gray/iptvnator.git
synced 2026-10-14 13:16:16 -08:00
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:
1 parent
60bccc96e8
commit
ffe6f974f7
6 files changed
+366
-6
No files matched your search
@@ -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.
|
||||
|
||||
Reference in new issue
Block a user