Rank the material layers above Tailwind's preflight in the Workbench

A rewritten component's padding, margin and border sit in
material.components, which the Workbench declared below all of
Tailwind's layers, so preflight's universal reset beat them. The entry's
layer statement now puts material between base and components (plan
step 36): the material reset already carries preflight, and every
utility still outranks the package.

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 13:56:44 +02:00
co-authored by Claude Opus 5
parent 6be9f35c98
commit 50431181a7
2 changed files with 11 additions and 4 deletions
+5 -1
View File
@@ -412,9 +412,13 @@ it('draws the interaction classes as the utilities the Tailwind components still
->and(stylesheetBlock($interaction, '.md-touch-target'))->toContain('min-width: var(--md-sys-measurement-space600);');
});
it('declares the material layers in the Workbench before Tailwind\'s', function () {
it('declares the material layers in the Workbench between Tailwind\'s preflight and its utilities', function () {
$app = stylesheetWithoutComments(File::get(__DIR__.'/../../workbench/resources/css/app.css'));
// The first statement orders the layers: above preflight, whose `* { padding: 0 }` would
// otherwise beat a rewritten component's padding, and below the utilities.
expect(trim($app))->toStartWith('@layer theme, base, material, components, utilities;');
$foundation = strpos($app, "@import '../../../resources/css/foundation.css';");
$tailwind = strpos($app, "@import 'tailwindcss'");
$components = strpos($app, "@import '../../../resources/css/tailwind.css';");