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

Fold layout.css and components.css into all.css

Browse Source 
Plan step 37: all.css replaces the two interim import lists with one
entry for an application that wants everything — the foundation, every
layout stylesheet and every component stylesheet, grouped under the
same block comments components.css used, plus a Layout block. It also
directly imports the three files nothing imported by name before
(layout/spacing.css, layout/visibility.css, components/selection.css),
so every file under components/ and layout/ is now one @import away.

Every test that read a block of components.css or layout.css now reads
the matching block of all.css through one shared helper (allCssBlock(),
in tests/Pest.php so it loads for any test run) instead of repeating
the same substr() search in each file. StylesheetsTest.php's shape,
Tailwind-free and breakpoint checks, previously run twice (once for
the foundation, once for the layout tree), now run once over the whole
tree all.css reaches, since every component and layout stylesheet is
plain CSS after step 36; a new test asserts all.css imports everything
under components/ and layout/ exactly once. The Workbench imports
all.css in place of layout.css and components.css.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-15 02:49:29 +02:00
co-authored by Claude Sonnet 5
parent 04271bf227
commit 925d9a4439
28 changed files with 230 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/components.css → resources/css/all.css
+33 -4
View File
@@ -1,12 +1,40 @@
/*
* The component stylesheets already written without Tailwind (plan step 36), while the rest are
* still in tailwind.css. Each lives in `material.components`, so it can be imported anywhere in
* the entry: the layer statement, not the import order, decides where its rules rank. Step 37
* replaces this file with all.css. One block per stream, so parallel rewrites merge cleanly.
* Livewire Material for an application that wants everything: the foundation, every layout
* stylesheet and every component stylesheet, each imported once. The blocks below are the same
* groups `components.css` and `layout.css` used before this file replaced both of them (plan step
* 37) — one block per audit stream, so a stylesheet still lands in a predictable place — plus the
* Layout block those two files didn't share.
*
* This is not the recommended way to bring the package's CSS in: importing `all.css` pulls in
* every component's rules whether an application's views render them or not. The recommended path
* is `foundation.css` (the one required import) followed by only the component stylesheets a
* view actually renders — each component file already imports the stylesheets of the components
* it draws, so the list an application writes stays short. `all.css` is for the showcase, for an
* error page rendered without a build, and for an application that would rather not track
* per-component imports at all.
*
* Same shape as every package stylesheet: the layer statement first, then plain imports, nothing
* else at the top level — an `@import` cannot sit inside a `@layer` block, and `layer()` on it
* would nest the layer a second time inside a file that already declares it.
*/
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
@import './foundation.css';
/* Layout */
@import './layout/spacing.css';
@import './layout/visibility.css';
@import './layout/stack.css';
@import './layout/row.css';
@import './layout/grid.css';
@import './layout/surface.css';
@import './layout/pane.css';
@import './layout/list-detail.css';
@import './layout/supporting-pane.css';
@import './layout/feed.css';
@import './layout/scaffold.css';
/* Foundation components */
@import './components/icon.css';
@import './components/shape.css';
@@ -41,6 +69,7 @@
@import './components/textarea.css';
@import './components/select.css';
@import './components/file.css';
@import './components/selection.css';
@import './components/checkbox.css';
@import './components/radio.css';
@import './components/toggle.css';
resources/css/layout.css
-17
View File
@@ -1,17 +0,0 @@
/*
* The layout components (plan step 35): the scaffold, panes, the canonical layouts, surfaces and
* the arrangements inside a pane, each in `material.layout`, with the visibility props in
* `material.visibility`. Step 37 folds this file into all.css.
*/
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
@import './layout/stack.css';
@import './layout/row.css';
@import './layout/grid.css';
@import './layout/surface.css';
@import './layout/pane.css';
@import './layout/list-detail.css';
@import './layout/supporting-pane.css';
@import './layout/feed.css';
@import './layout/scaffold.css';