noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
tests/Browser/ErrorPagesTest.php
+43
View File
@@ -1,5 +1,9 @@
<?php
use Illuminate\Support\Facades\File;
use Illuminate\Support\Facades\Vite;
use Illuminate\Support\Str;
/**
* The 404 page, reached the way a visitor reaches it: an address nothing answers.
*/
@@ -52,3 +56,42 @@ it('fits a 400px screen without scrolling sideways', function () {
->assertScript('document.documentElement.scrollWidth <= window.innerWidth')
->assertScript("document.querySelector('[data-md-error-actions] a').getBoundingClientRect().right <= 400");
});
/**
* Plan step 40: the fallback path, the same server serving the request `LaravelHttpServer` runs
* in-process, so a config change here reaches it exactly as it reaches a Feature test's client —
* an empty temporary directory has no `build/manifest.json` and no `hot` file, so `ErrorPage::assets()`
* throws and returns null (tests/Feature/ErrorPagesTest.php does the same for the HTTP client).
*/
it('draws the button and the shape from the inlined fallback stylesheet, and repaints in dark mode', function () {
$public = sys_get_temp_dir().'/livewire-material-fallback-'.Str::random(8);
File::ensureDirectoryExists($public);
$originalPublicPath = app()->publicPath();
app()->usePublicPath($public);
Vite::useHotFile($public.'/hot');
try {
missingPage('light')
->assertScript("document.querySelector('style[data-md-error-fallback]') !== null")
->assertScript("document.querySelector('link[href*=\"/build/\"]') === null")
// The button: button.css's round, filled shape, not a bare unstyled <a>.
->assertScript("getComputedStyle(document.querySelector('[data-md-button]')).borderRadius !== '0px'")
->assertScript(paintedIn('[data-md-button][data-md-variant=filled]', 'primary'))
// The shape: shape.css's sizing and the primary-container tint error-page.css paints its svg with.
->assertScript("getComputedStyle(document.querySelector('[data-md-error-shape] svg')).color !== getComputedStyle(document.body).color")
->assertScript(paintedIn('body', 'surface'))
->assertNoJavaScriptErrors();
// The [data-theme='dark'] block the fallback also inlines repaints the page, exactly as the
// built stylesheet does for the test above.
missingPage('dark')
->assertScript("document.documentElement.getAttribute('data-theme') === 'dark'")
->assertScript(paintedIn('body', 'surface'))
->assertScript("getComputedStyle(document.body).backgroundColor !== 'rgb(253, 247, 254)'");
} finally {
app()->usePublicPath($originalPublicPath);
Vite::useHotFile($originalPublicPath.'/hot');
File::deleteDirectory($public);
}
});