Count a row written by hand in the design guard's stylesheet checks
`data-md-list-row` on an application's own `<li>`, `<div>`, `<tr>` or `<x-row>` draws its hover, focus and press state layer, its cursor and its `data-md-selected` fill from list-item.css, but missingStylesheets() and unusedStylesheets() read only component tags and `->links()`. ReStride had the stylesheet only because table.css imports it: had its last `<x-table>` gone, every hand-made row would have lost its states and its fill without a finding, and importing list-item.css for the rows directly was reported unused. A Blade view outside the package's own `resources/views` that writes a hook in the new `HOOK_STYLESHEETS` now needs that hook's stylesheet in both checks, named at the earliest line that needs it. The one entry is `data-md-list-row` → `components/list-item.css`, except on `<x-card>` (any spelling), whose row card.css draws; the card's opening tag is blanked out before the hook is read, and a selector such as `[data-md-list-row]` or a name in backticks writes no row. Nothing else list-rows.js, the skill or the README has an application write needs a stylesheet of its own: `data-md-list-open` and a row's `data-md-selected` are drawn only through the row, a selected row in `<x-table>` by table.css, `data-md-dragged` by foundation.css's `md-state-layer` or card.css, `data-md-field-control` by field.css inside `<x-field>`. The constant's docblock says so, and the guard's docblocks, the README, the skill and UPGRADE.md describe the check. A fixture test reads a hand-made `<li>` and `<tr>` row and a card-only view (plain and namespaced `<x-card data-md-list-row>`, and a selector in a script) against both checks; it fails without the change. A second test scans the package's list-item and card views and expects no row finding; it fails when package views are read. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Opus 5
parent
b62c83f244
commit
471d927e64
@@ -152,7 +152,7 @@ it('uses only what compiles', function () {
|
||||
|
||||
The guard reads every path it is given and fails, with `path:line` and the 2.0.0 replacement, on any Tailwind utility or variant still in a view, PHP or JS file, a colour of the application's own Tailwind theme (`bg-brand`) included — none compiles, since the application carries no Tailwind — and on 1.x's own utilities (`type-body-md`, `text-meta`, `rounded-corner-lg`, `focus-ring`): a layout component and prop (`flex gap-4` → `<x-row gap="space200">`), an `md-*` class (`truncate` → `md-truncate`), or a token for the application's own CSS (`rounded-lg` → `var(--md-sys-shape-corner-lg)`). A class the application's own stylesheets declare is exempt. In the `.css` files it is given (`material-scheme.css` skipped) it fails on a literal colour, radius, shadow, font, easing or duration, and on a media query off M3's 600/840/1200/1600px; a `var()`, or a `calc()`/`min()`/`max()`/`clamp()` built on one, is fine. It also fails on unknown Material Symbol names and Blade directives written inside component tags. Markdown mail components (under `mail.markdown.paths`, `resources/views/vendor/mail` by default) are the mail theme's to style: their classes are not read as Tailwind, and a mail theme stylesheet there is neither checked for literals nor a source of exempt classes.
|
||||
|
||||
`missingStylesheets($cssEntry)` checks the entry's relative `@import` graph, followed through every package file's own imports, against the package tags the views render (unprefixed, under the configured prefix, or `<x-livewire-material::…>`) and `->links()`, and names each missing `@import` line once; a tag the application shadows with its own component is reported instead. It reads imports only, so leave `resource_path('css')` out of `scan()` while the stylesheets still hold literals. `forbidColours([...])` names roles the application leaves out, and fails wherever one (with its `on-` and container roles) is still written: `var(--md-sys-color-…)` in CSS or an inline `style`, its `md-ink-*` class, or a component's `color`/`tone` prop. `forbid($pattern, $reason)` adds any pattern of your own, line by line.
|
||||
`missingStylesheets($cssEntry)` checks the entry's relative `@import` graph, followed through every package file's own imports, against the package tags the views render (unprefixed, under the configured prefix, or `<x-livewire-material::…>`), `->links()` and the rows they write by hand (`data-md-list-row` on anything but `<x-card>` needs `components/list-item.css`), and names each missing `@import` line once; a tag the application shadows with its own component is reported instead. It reads imports only, so leave `resource_path('css')` out of `scan()` while the stylesheets still hold literals. `forbidColours([...])` names roles the application leaves out, and fails wherever one (with its `on-` and container roles) is still written: `var(--md-sys-color-…)` in CSS or an inline `style`, its `md-ink-*` class, or a component's `color`/`tone` prop. `forbid($pattern, $reason)` adds any pattern of your own, line by line.
|
||||
|
||||
## AI agents
|
||||
|
||||
|
||||
Reference in New Issue
Block a user