From 336573061014c26f329ce6cb74e436357ca27ad1 Mon Sep 17 00:00:00 2001 From: Andreas Reinhold / reini Date: Tue, 15 Sep 2026 03:15:05 +0200 Subject: [PATCH] Import the components in the documented installation Plan step 37 review. Removing material.css left README.md, the development skill, UPGRADE.md and the tailwind.css and foundation.css headers telling an application to import foundation.css, tailwindcss and tailwind.css in its place. material.css was also what brought layout.css and components.css, so that install rendered every component unstyled, and without a layer statement Tailwind's preflight would have outranked the package's layers. The skill's snippet is now the Tailwind-free one 2.0.0 ends with: the foundation, then the stylesheet of each component the views render, or all.css. README.md, whose layout and prose still assume Tailwind, shows all.css in its own entry and Tailwind in a second, both opening with the layer statement, the shape the Workbench now builds; the skill and UPGRADE.md describe that interim in a sentence. Co-Authored-By: Claude Opus 5 (1M context) Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9 --- README.md | 16 +++++++++++++--- UPGRADE.md | 11 +++++++---- .../livewire-material-development/SKILL.md | 13 ++++++++----- resources/css/foundation.css | 5 +++-- resources/css/tailwind.css | 12 +++++++----- 5 files changed, 38 insertions(+), 19 deletions(-) diff --git a/README.md b/README.md index 2fa4b112..1d080206 100644 --- a/README.md +++ b/README.md @@ -27,12 +27,22 @@ composer require nonameweb/livewire-material The application's build imports from `vendor/`, so Composer packages must be installed before `npm run build` — in a Dockerfile, copy `composer.json`, run `composer install`, then build the assets. +The package's stylesheets are plain CSS. `all.css` brings the foundation and every component; an application can instead import `foundation.css` first and then the stylesheet of each component its views render (`resources/css/components/button.css`, `resources/css/layout/scaffold.css`, …), since each imports the stylesheets of the components it draws and Vite keeps a file several of them import once. + ```css /* resources/css/app.css */ -@import '../../vendor/nonameweb/livewire-material/resources/css/foundation.css'; +@layer properties, theme, base, material, components, utilities; +@import '../../vendor/nonameweb/livewire-material/resources/css/all.css'; +@import './material-scheme.css'; +``` + +Tailwind, for the classes in the application's own views, goes in an entry of its own — `@tailwindcss/vite` inlines the imports of an entry that uses Tailwind without that deduplication — with the same layer statement at the top, which keeps the package's layers above Tailwind's preflight and below its utilities. Add it to the `laravel()` plugin's `input` in `vite.config.js`: + +```css +/* resources/css/utilities.css */ +@layer properties, theme, base, material, components, utilities; @import 'tailwindcss'; @import '../../vendor/nonameweb/livewire-material/resources/css/tailwind.css'; -@import './material-scheme.css'; @source '../../vendor/nonameweb/livewire-material/resources/views'; @source '../../vendor/nonameweb/livewire-material/src'; @@ -58,7 +68,7 @@ The theme script goes in ``, before `@vite`, so the page paints in the vis - @vite(['resources/css/app.css', 'resources/js/app.js']) + @vite(['resources/css/app.css', 'resources/css/utilities.css', 'resources/js/app.js']) {{ $slot }} diff --git a/UPGRADE.md b/UPGRADE.md index 42df7110..1bf51f8e 100644 --- a/UPGRADE.md +++ b/UPGRADE.md @@ -126,10 +126,13 @@ over a colour, use the role directly. ### 6. `material.css` is gone -The 1.x single-import shortcut no longer exists. An application still building Tailwind imports -`foundation.css`, then `tailwindcss`, then `tailwind.css` in its place (see Installation in -`README.md`); one that has already left Tailwind imports `foundation.css` plus the stylesheet of -each component its views render, or `resources/css/all.css` for everything at once. +The 1.x single-import shortcut no longer exists. The package's CSS is plain now and goes in an +entry without Tailwind: `resources/css/all.css` for everything, or `foundation.css` first and then +the stylesheet of each component the views render. An application whose views still write Tailwind +classes builds Tailwind and `tailwind.css` in a second entry, never beside the package's imports, +since `@tailwindcss/vite` would repeat every shared stylesheet; both entries open with +`@layer properties, theme, base, material, components, utilities;` (see Installation in +`README.md`). ### 7. New in 2.0.0 diff --git a/resources/boost/skills/livewire-material-development/SKILL.md b/resources/boost/skills/livewire-material-development/SKILL.md index 430445bc..2e616aa8 100644 --- a/resources/boost/skills/livewire-material-development/SKILL.md +++ b/resources/boost/skills/livewire-material-development/SKILL.md @@ -16,13 +16,16 @@ Composer packages must be installed before the Vite build (in Dockerfiles and CI ```css /* resources/css/app.css */ @import '../../vendor/nonameweb/livewire-material/resources/css/foundation.css'; -@import 'tailwindcss'; -@import '../../vendor/nonameweb/livewire-material/resources/css/tailwind.css'; +@import '../../vendor/nonameweb/livewire-material/resources/css/layout/scaffold.css'; +@import '../../vendor/nonameweb/livewire-material/resources/css/components/button.css'; +@import '../../vendor/nonameweb/livewire-material/resources/css/components/input.css'; @import './material-scheme.css'; -@source '../../vendor/nonameweb/livewire-material/resources/views'; -@source '../../vendor/nonameweb/livewire-material/src'; ``` +`foundation.css` is required and first; then one stylesheet per component the views render, under `resources/css/components/` or `resources/css/layout/`, named like the component (`` is drawn by `tabs.css`, and `` needs none). Each imports the stylesheets of the components it draws (a split button's button and menu), and Vite keeps a file several of them import once. `resources/css/all.css` stands for the foundation and every component at once. A component rendered without its stylesheet is unstyled, so add the import with the tag. + +While the application's own views still write Tailwind classes, Tailwind goes in a second entry, never beside these imports (`@tailwindcss/vite` would repeat every shared stylesheet): `@import 'tailwindcss'`, `resources/css/tailwind.css` and the two `@source` lines for `resources/views` and `src`, with `@layer properties, theme, base, material, components, utilities;` at the top of both entries. + ```js // resources/js/app.js import '../../vendor/nonameweb/livewire-material/resources/js/material.js' @@ -89,7 +92,7 @@ Scheme::resolveProfileUsing(fn (): ?string => Setting::get('color_profile')); ## Tokens -2.0.0's vocabulary is plain CSS, without Tailwind. `resources/css/foundation.css` is the one required import, first in the entry (while an application still builds Tailwind: before `@import 'tailwindcss'`, with `resources/css/tailwind.css` after it — 1.x's `material.css` shortcut is gone). It declares the layer order `material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility`, so an application's unlayered CSS beats every package rule, and `hidden` or `x-cloak` hides any element. It brings the reset, every `--md-sys-*` token (spacing included: `--md-sys-measurement-space25` … `space900`, 2–72px), and `md-state-layer`, `md-focus-ring`, `md-touch-target`, `md-link`. Text on plain elements takes the fixed text classes of `resources/css/text.css` and nothing else: `md-type-{display|headline|title|body|label}-{lg|md|sm}` and `md-type-emphasized-…`; `md-ink` (on-surface), `md-ink-variant`, `md-ink-quiet`, `md-ink-primary`, `md-ink-error`, `md-ink-success`, `md-ink-warning`, `md-ink-info`, `md-ink-inverse`; `md-text-start|center|end`, `md-truncate`, `md-line-clamp-2|3`, `md-nowrap`, `md-tabular`, `md-visually-hidden`. Every component is plain CSS now; the Tailwind names below stay for the showcase and an application's own views, until Tailwind itself leaves the package. +2.0.0's vocabulary is plain CSS, without Tailwind. `resources/css/foundation.css` is the one required import, first in the entry, followed by the stylesheets of the components the views render (see Setup; 1.x's `material.css` shortcut is gone). It declares the layer order `material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility`, so an application's unlayered CSS beats every package rule, and `hidden` or `x-cloak` hides any element. It brings the reset, every `--md-sys-*` token (spacing included: `--md-sys-measurement-space25` … `space900`, 2–72px), and `md-state-layer`, `md-focus-ring`, `md-touch-target`, `md-link`. Text on plain elements takes the fixed text classes of `resources/css/text.css` and nothing else: `md-type-{display|headline|title|body|label}-{lg|md|sm}` and `md-type-emphasized-…`; `md-ink` (on-surface), `md-ink-variant`, `md-ink-quiet`, `md-ink-primary`, `md-ink-error`, `md-ink-success`, `md-ink-warning`, `md-ink-info`, `md-ink-inverse`; `md-text-start|center|end`, `md-truncate`, `md-line-clamp-2|3`, `md-nowrap`, `md-tabular`, `md-visually-hidden`. Every component is plain CSS now; the Tailwind names below stay for the showcase and an application's own views, until Tailwind itself leaves the package. Tailwind's default palette is cleared: every colour class names an M3 role. `text-red-600`, `bg-base-200` or `text-gray-500` compile to nothing. The rules behind the names below — which role, surface container, corner, type style, elevation level, motion spring, state and window size class to use, and M3's don'ts — are the `material-3` guideline (always on) and the `material-3-design` skill (the tables and Google's source pages); activate that skill before designing a screen. diff --git a/resources/css/foundation.css b/resources/css/foundation.css index 6409a60c..f5825b83 100644 --- a/resources/css/foundation.css +++ b/resources/css/foundation.css @@ -24,8 +24,9 @@ * (`button { … }`) restyles the components too. foundation/hidden.css keeps its two `!important` * rules outside the layers, so `hidden` and `x-cloak` hide an element whatever sets its display. * - * Until the components leave Tailwind, an application still building it imports this file before - * `@import 'tailwindcss'`, so the `material` layers are declared first and sit below Tailwind's. + * An application still building Tailwind keeps it in a separate entry and opens both entries with + * `@layer properties, theme, base, material, components, utilities;`, so the `material` layers sit + * above Tailwind's preflight and below its utilities (resources/css/tailwind.css's header). */ @layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility; diff --git a/resources/css/tailwind.css b/resources/css/tailwind.css index 1316a276..1a4c6074 100644 --- a/resources/css/tailwind.css +++ b/resources/css/tailwind.css @@ -5,15 +5,17 @@ * until it drops Tailwind. Every component stylesheet is plain CSS (plan step 36) and needs * nothing from here. This file goes when the last Tailwind class leaves (step 39). * - * It carries no tokens, so it can sit behind the foundation without declaring them twice — the - * Workbench imports it that way, after Tailwind: + * It carries no tokens, so it builds beside the package's CSS without declaring them twice, in an + * entry of its own — `@tailwindcss/vite` inlines the imports of an entry that uses Tailwind without + * deduplicating them, so the package's stylesheets stay in another (the Workbench's package.css). + * The Workbench's Tailwind entry, like an application's: * - * @import '../../../resources/css/foundation.css'; + * @layer properties, theme, base, material, components, utilities; * @import 'tailwindcss' source(none); * @import '../../../resources/css/tailwind.css'; * - * An application still building Tailwind imports the same way, `foundation.css` then `tailwindcss` - * then this file, in place of the 1.x `material.css` shortcut, which is gone. + * with the same layer statement at the top of the package's entry. It replaces nothing of the 1.x + * `material.css` shortcut, which is gone: the components come from `all.css` or their own files. */ @import './tokens/theme.css';