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

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
tests/Feature/StylesheetsTest.php
+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';");
workbench/resources/css/app.css
+6 -3
View File
@@ -1,7 +1,10 @@
/* The Workbench builds the package as an application would, with explicit sources so the plans
in docs/ are not scanned for class names. The foundation comes before Tailwind, so the
`material` layers are declared first and sit below Tailwind's; tailwind.css brings the
components still written for Tailwind, without declaring the tokens a second time. */
in docs/ are not scanned for class names. The layer statement puts the `material` layers above
Tailwind's preflight (`base`) and below its `components` and `utilities`: a rewritten component's
padding, margin and border would otherwise lose to preflight's `* { padding: 0 }`, which the
material reset already carries, while every utility still outranks the package. tailwind.css
brings the components still written for Tailwind, without declaring the tokens a second time. */
@layer theme, base, material, components, utilities;
@import '../../../resources/css/foundation.css';
@import '../../../resources/css/layout.css';
@import '../../../resources/css/components.css';