Bundle the error page's fallback instead of hand-writing it

Plan step 40. ErrorPage::fallbackStyles() now inlines
Stylesheets::bundle() of the foundation and error-page.css (which
imports button.css and shape.css) rather than a hand-copied
stylesheet, so the fallback can never drift from the built version.
Every @font-face block is dropped structurally (withoutFontFace(),
brace-balanced, not a text search) since there is no build to serve
the font file; --md-ref-typeface-brand already lists ui-sans-serif,
system-ui and sans-serif after the brand name, so the page still gets
a sensible system stack. The scheme half comes from
Scheme::forStylesheet() drawn through SchemeStylesheet::levels(), in
material-scheme.css's own selector shape: standard, the medium and
high contrast levels, and a block per colour profile keyed on
[data-scheme] (the theme script has already resolved and written the
active one to <html> before this stylesheet is read, so nothing here
picks one in PHP). Both halves are cached per worker, the scheme half
by the scheme file's path and mtime.

Tests: both render paths, the inlined CSS's shape (no @import, no
relative url(), no @font-face, the button/shape/error-page rules, the
scheme's roles, [data-contrast='high'] and a profile block), and a new
browser test that forces the fallback and checks the button, the
shape and a dark-mode repaint.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-15 07:30:05 +02:00
co-authored by Claude Sonnet 5
parent 3b9a889e7c
commit e1fe573182
5 changed files with 223 additions and 47 deletions
@@ -15,11 +15,12 @@
The app's own Vite entries (`livewire-material.showcase.vite`) bring its scheme, font and
the package's stylesheets, including this layout's own,
resources/css/components/error-page.css. But an error page is also what shows while a deploy
has no build yet, so when those tags cannot be made the page brings a small stylesheet of its
own instead: the app's scheme from its scheme data, drawn onto the same `data-md-error-*`
hooks (`src/Support/ErrorPage.php::fallbackStyles()`). Keep the hooks in step across both
when changing the markup. The shape turns once a minute, unless the visitor asks for reduced
motion. --}}
has no build yet, so when those tags cannot be made the page brings a stylesheet built in PHP
instead: the foundation and this layout's own rules, `Stylesheets::bundle()`-inlined rather
than copied by hand, plus the app's scheme from its scheme data in the same selector shape
`material:scheme` writes (`src/Support/ErrorPage.php::fallbackStyles()`). The two paths draw
the same `data-md-error-*` hooks by construction, nothing to keep in step by hand. The shape
turns once a minute, unless the visitor asks for reduced motion. --}}
@php
$assets = \NoNameWeb\LivewireMaterial\Support\ErrorPage::assets();