Stop loading Tailwind on the showcase page
Plan step 38 (last batch): every showcase view is now rewritten without Tailwind, so the showcase's layout keeps only the JavaScript entries of the application's configured Vite list (Livewire, Alpine) before its own bundle link, instead of the whole array — its own CSS already comes solely from ShowcaseAssetController's bundle (Stylesheets::bundle() of all.css, showcase.css and the scheme), and linking the application's build too meant the package's own CSS (all.css) loaded twice on every showcase page (once through the Workbench's package.css entry, once through the showcase's own bundle), besides pulling in Tailwind's CSS for nothing. ErrorPage:: assets() keeps passing the whole configured list: the error pages have no bundle of their own to fall back on, and step 40 is where their fallback is redesigned. The config's own comment says so. The frame's temporary visually-hidden <h2> rule goes too — it existed only because the first batch could not reach into the still-Tailwind sections/*.blade.php partials it @include's; every section now carries its own real `class="md-type-headline-md"` heading, so the structural rule that quietly hid all of them is dead weight. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
co-authored by
Claude Sonnet 5
parent
ab2fcdb0d3
commit
42009f3b0c
@@ -192,13 +192,16 @@ return [
|
||||
|
|
||||
| Every component in every variant, rendered in the application's own
|
||||
| scheme. Off unless the application runs locally. 'vite' names the
|
||||
| application's own entry points, for its JavaScript (Livewire, Alpine);
|
||||
| the error pages load them too, showcase or not. A CSS entry here is
|
||||
| temporary — the showcase's own chrome no longer needs one (it serves
|
||||
| its own bundle, ShowcaseAssetController), but the section views
|
||||
| (resources/views/showcase/sections/*) are still Tailwind until step
|
||||
| 38's last batch removes it, and an application without Tailwind of
|
||||
| its own may still want one here for the error pages' build.
|
||||
| application's own entry points: its JavaScript (Livewire, Alpine) and,
|
||||
| for an application that still builds one of its own, a CSS entry. The
|
||||
| showcase page draws its CSS only from its own bundle
|
||||
| (ShowcaseAssetController serves Stylesheets::bundle() of all.css,
|
||||
| showcase.css and the scheme) — nothing on it needs the application's
|
||||
| build, Tailwind included — so the showcase's layout keeps only the
|
||||
| entries here that are not a stylesheet before passing the rest to
|
||||
| @vite(), and links its own bundle after them. The error pages have no
|
||||
| bundle of their own to fall back on, so ErrorPage::assets() still
|
||||
| passes this whole list, CSS included, to @vite().
|
||||
|
|
||||
*/
|
||||
|
||||
|
||||
@@ -105,22 +105,6 @@
|
||||
color: var(--md-sys-color-on-secondary-container);
|
||||
}
|
||||
|
||||
/* Each `<section>`'s own `<h2>`, inside a still-Tailwind sections/*.blade.php partial this
|
||||
batch does not rewrite: the page's own `<h1>` already names the section, so the heading
|
||||
inside it is for assistive technology only — the same declarations as `md-visually-hidden`
|
||||
(text.css), applied by structure because a class cannot reach into an @include'd partial. */
|
||||
[data-md-showcase-sections] > section > h2 {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip-path: inset(50%);
|
||||
white-space: nowrap;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
/* An example: scroll-margin so a hash link (the search result, the "next section" nav) lands
|
||||
clear of the sticky app bar above it. */
|
||||
[data-md-showcase-example] {
|
||||
|
||||
@@ -38,13 +38,13 @@
|
||||
|
||||
<x-livewire-material::theme-script />
|
||||
|
||||
{{-- Kept only for the section views (resources/views/showcase/sections/*), still Tailwind
|
||||
until the next batches of step 38, and for the Livewire/Alpine runtime; its CSS entry
|
||||
goes with them. It opens the document's first @layer statement (Workbench package.css's
|
||||
header explains the trick), which the link below must follow, not precede — first would
|
||||
re-anchor `material` ahead of Tailwind's own layers and let its preflight's `padding: 0`
|
||||
beat the search view's padding-top. --}}
|
||||
@vite(config('livewire-material.showcase.vite'))
|
||||
{{-- 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')))
|
||||
@livewireStyles
|
||||
|
||||
{{-- The showcase's own chrome: does not depend on the build above. --}}
|
||||
|
||||
Reference in New Issue
Block a user