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';