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

Keep the application's stylesheets off the scaffold page too

Browse Source 
Plan step 38 review: /material/shell still passed the whole configured
Vite list, so it loaded Tailwind and all.css a second time beside the
showcase bundle. Both frames now take ShowcaseAssetController::scripts():
every entry but a stylesheet, by the same extensions Laravel's Vite
treats as CSS (not only .css), and skip @vite() when nothing is left,
since a list of stylesheets alone would read a build manifest for
nothing. A test renders the overview, a section, a layout page and the
shell against a hot file. The frame's header said the rail collapses
from `lg`; it is `expanded` (840px). The config comment is shorter and
true.

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-15 06:07:44 +02:00
co-authored by Claude Opus 5
parent 7abcc7c5f5
commit 2f649983fa
5 changed files with 71 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/showcase/layout.blade.php
+8 -9
View File
@@ -1,5 +1,6 @@
{{-- The showcase's frame, and the package's own scaffold at work: the rail groups every section,
collapses and expands from `lg`, and opens as a modal from the app bar's menu button on a phone.
collapses and expands from `expanded` (840px), and opens as a modal from the app bar's menu
button on a phone.
Pages move with wire:navigate, so the rail keeps its place and the theme stays. --}}
@php
@@ -38,16 +39,14 @@
<x-livewire-material::theme-script />
{{-- The application's own entries, JavaScript only (Livewire, Alpine): no showcase view
needs anything Tailwind builds any more, and linking its CSS here would open the
document's first @layer statement (Workbench package.css's header explains the trick)
ahead of the showcase's own bundle below, re-anchoring `material` before Tailwind's
own layers instead of after. config('livewire-material.showcase.vite')'s own comment
says why ErrorPage::assets() still passes the whole array. --}}
@vite(array_filter(config('livewire-material.showcase.vite'), fn (string $entry): bool => ! str_ends_with($entry, '.css')))
{{-- The application's own entries without its stylesheets (ShowcaseAssetController::scripts()
says why): the CSS of every showcase page is the bundle linked below, and nothing else. --}}
@if (($scripts = \NoNameWeb\LivewireMaterial\Http\Controllers\ShowcaseAssetController::scripts()) !== [])
@vite($scripts)
@endif
@livewireStyles
{{-- The showcase's own chrome: does not depend on the build above. --}}
{{-- all.css, showcase.css and the application's scheme, without the application's build. --}}
<link rel="stylesheet" href="{{ \NoNameWeb\LivewireMaterial\Http\Controllers\ShowcaseAssetController::url() }}" />
</head>
<body data-md-showcase>
resources/views/showcase/shell.blade.php
+6 -6
View File
@@ -35,14 +35,14 @@
<x-livewire-material::theme-script />
{{-- Kept only for the Livewire/Alpine runtime here — this page has no Tailwind class of its
own. The next batches of step 38 leave it to the sections that still need it. It opens
the document's first @layer statement (Workbench package.css's header explains the
trick), which the link below must follow, not precede — see layout.blade.php's comment. --}}
@vite(config('livewire-material.showcase.vite'))
{{-- As layout.blade.php: the application's entries without its stylesheets, then the
showcase's own bundle as the page's only CSS. --}}
@if (($scripts = \NoNameWeb\LivewireMaterial\Http\Controllers\ShowcaseAssetController::scripts()) !== [])
@vite($scripts)
@endif
@livewireStyles
{{-- The showcase's own chrome: does not depend on the build above. --}}
{{-- all.css, showcase.css and the application's scheme, without the application's build. --}}
<link rel="stylesheet" href="{{ \NoNameWeb\LivewireMaterial\Http\Controllers\ShowcaseAssetController::url() }}" />
</head>
<body data-md-showcase>