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

Build the Workbench's package CSS apart from Tailwind

Browse Source 
Plan step 37 review. @tailwindcss/vite inlines the imports of an entry
that uses Tailwind without Vite's skipDuplicates, so with all.css beside
@import 'tailwindcss' every shared component stylesheet repeated later in
the cascade (231 repeated rules; button.css's hover and disabled rules
thirteen times), and every browser test ran against an order no
application gets. workbench/resources/css/package.css now holds all.css
and the scheme in an entry Tailwind never touches, and app.css keeps
Tailwind for the showcase's classes. The built package CSS repeats no
rule, and the Workbench's CSS shrinks from 559 to 406 KB.

Both entries open with the same layer statement, properties first,
because Tailwind hoists that layer to the top of its output; the order
is the one the single entry had, whichever the page links first. The
showcase's Vite config, vite.config.js and the error page test's probe
manifest name the new entry.

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 03:12:44 +02:00
co-authored by Claude Opus 5
parent eda16ba727
commit 3854f4321c
6 changed files with 55 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
workbench/resources/css/app.css
+6 -11
View File
@@ -1,16 +1,11 @@
/* The Workbench builds the package as an application would, with explicit sources so the plans
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. all.css brings
the foundation, every layout stylesheet and every component stylesheet in one import; tailwind.css
brings the theme and token utilities the showcase still writes as classes, without declaring the
tokens a second time. */
@layer theme, base, material, components, utilities;
@import '../../../resources/css/all.css';
/* The Workbench's Tailwind entry, for the classes the showcase still writes, with explicit sources
so the plans in docs/ are not scanned for class names. tailwind.css brings the theme and token
utilities without declaring the tokens a second time. The package's own CSS is package.css, an
entry of its own (its header says why); the layer statement is the same in both, so the
`material` layers sit between Tailwind's preflight and its utilities whichever loads first. */
@layer properties, theme, base, material, components, utilities;
@import 'tailwindcss' source(none);
@import '../../../resources/css/tailwind.css';
@import './material-scheme.css';
@source '../../../resources/views';
@source '../../../src';