Style the body only on the error page

Plan step 36 review of a8c2d88f. error-page.css drew a bare `body`, which
components.css already bundles into every Workbench page and step 37's
all.css would put in every application page: each would take the error
page's background, margin and system font. The rule now matches
body:has(> [data-md-error-page]); the fallback stylesheet, inlined into
the error page alone, keeps its own. A test in the containment harness
and in ErrorPagesTest rejects an unscoped html, body, dialog or :root.

The body's system font stack is gone: the old `font-sans` was the brand
typeface (tokens/theme.css), which the page inherits from the
foundation's html rule, and the header's claim otherwise was wrong. The
shape's slow turn, which moved from the view's inline style into the
stylesheet, is back in the fallback so the no-build page still turns.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-14 22:06:56 +02:00
co-authored by Claude Opus 5
parent cab8d804a5
commit a764fddf27
4 changed files with 37 additions and 17 deletions
@@ -11,9 +11,9 @@ use NoNameWeb\LivewireMaterial\Tests\Support\ViewClasses;
* the stylesheets of the components its view renders, writes its values from the tokens and its
* breakpoints as px range queries, and is imported from the "Containment" block of components.css.
*
* The dataset grows by one name per component commit (`divider`, `collapse`, `card`, then `list`
* and `list-item` together), the same rule InputStylesheetsTest.php and ActionStylesheetsTest.php
* follow. It starts empty: this file lands before any containment component is rewritten.
* The dataset grew by one name per component commit, the same rule InputStylesheetsTest.php and
* ActionStylesheetsTest.php follow. The error layout, whose view is not a component, has the same
* checks in tests/Feature/ErrorPagesTest.php.
*/
dataset('containment components', [
'divider',
@@ -115,3 +115,11 @@ it('is imported from the containment block of components.css', function (string
expect($block)->toContain("@import './components/{$name}.css';");
})->with('containment components');
it('scopes every element-wide selector to a data-md hook', function (string $name) {
// `all.css` bundles every component stylesheet into every page, so a bare `html`, `body`,
// `dialog` or `:root` rule would restyle the application's own pages.
$source = (string) preg_replace('~/\*.*?\*/~s', '', ComponentStylesheet::read($name)->css);
expect($source)->not->toMatch('/(?:^|[,{};]\s*)(?:html|body|dialog|:root)(?![\w-])(?!\[data-md-|:has\(> \[data-md-)/m');
})->with('containment components');