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
2026-09-15 07:30:05 +02:00
parent 3b9a889e7c
commit e1fe573182
5 changed files with 223 additions and 47 deletions
@@ -20,9 +20,9 @@
 * The body is matched only when it holds the layout (`body:has(> [data-md-error-page])`): this
 * file sits in the application's bundle beside every other page, where a bare `body` rule would
 * restyle them all. `src/Support/ErrorPage.php`'s `fallbackStyles()`, the stylesheet an
- * application without a Vite build gets instead, is inlined into the error page alone, so it keeps
- * a bare `body`; it still needs updating by hand when this file changes, until step 40 replaces
- * how it is built.
+ * application without a Vite build gets instead, inlines this file itself (`Stylesheets::bundle()`,
+ * plan step 40) rather than a hand-written copy, so it keeps the same scoped `body` rule and never
+ * drifts from it.
 *
 * The page's font is the foundation's, `--md-ref-typeface-brand` on `html` (foundation/base.css),
 * as the old `font-sans` was; only the fallback, which has no `@font-face`, uses a system stack.
@@ -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();