Andreas Reinhold / reiniandClaude Opus 5
247c596c3a
An over-engineering audit of the whole tree, applied in five reviewed batches. Behaviour stays the same except where UPGRADE.md says otherwise. PHP: the showcase and error-page stylesheets are prebuilt into resources/dist by bin/stylesheets.mjs, through Vite's own postcss-import (first occurrence kept, the order an application's build gives), instead of Stylesheets::bundle() inlining imports on every request; only the import walk DesignGuard needs stays. SchemeStylesheet::withProfiles() replaces three copies of the scheme-plus-profiles loop, material:scheme leaves spec and contrast checks to the node script that already made them, and the error page's scheme cache, the hashed view namespace, the translations path with no lang/ folder and DesignGuard's 1.x-name hints are gone. JS: the androidx shape port progress.js and both bin scripts each carried lives once in resources/js/shapes.js (the generated SVGs are unchanged); util.js holds ringIndex(), ms(), reopenGuard() and remember(), which were written out several times; listeners are released through AbortController; tooltip.js's hoverPopover() serves the rich tooltip too. CSS: every rule for an element inside the navigation rail queries `--md-navigation-rail-value` instead of repeating the seven collapsed conditions under five media branches; badge, alert, progress, slider and button read one non-inheriting colour-role table (components/color.css); the dialog chrome, the submenu's popover chrome, the chip's state layer and touch target, and the visually-hidden inputs use the shared rules they copied; foundation/tokens.css is folded into foundation.css. Views: Support\Field and Support\Link replace the error-key, bound-value and link-attribute blocks copied into the fields and link components; the timepicker period group, the menu filter and the showcase head are partials; the datepicker's steppers and entry fields are loops; component docblocks no longer restate SKILL.md. Tests and tooling: one dataset-driven ComponentStylesheetsTest replaces four per-group files, DesignGuardTest and the layout-component tests use datasets, browser tests share one ready() helper, CSS parsing lives in ComponentStylesheet alone. docs/audits and the finding IDs citing it are removed, as are pestphp/pest-plugin-laravel, the unused composer scripts and check:font; the lint job runs in the feature job, which now installs node packages so the prebuilt-stylesheet staleness test runs in CI. Feature suite 1177 passed, Chrome browser suite 299 passed. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
65 lines
3.5 KiB
PHP
65 lines
3.5 KiB
PHP
<?php
|
|
|
|
use NoNameWeb\LivewireMaterial\Support\Layout;
|
|
|
|
/**
|
|
* A grid's column properties from its inline style, by breakpoint.
|
|
*
|
|
* @return array<string, string>
|
|
*/
|
|
function gridColumns(string $html): array
|
|
{
|
|
preg_match_all('/--md-columns-([a-z-]+): (\d+);/', layoutRoot($html)['style'] ?? '', $matches, PREG_SET_ORDER);
|
|
|
|
return collect($matches)->mapWithKeys(fn (array $match): array => [$match[1] => $match[2]])->all();
|
|
}
|
|
|
|
it('writes all five column counts on every grid, one column when given none', function () {
|
|
$html = (string) $this->blade('<x-grid><div>One</div></x-grid>');
|
|
|
|
expect(layoutRoot($html))->toMatchArray(['<' => 'div', 'data-md-grid' => 'data-md-grid'])
|
|
->not->toHaveKeys(['data-md-gap', 'data-md-min-item', 'data-md-columns'])
|
|
->and(gridColumns($html))->toBe(['compact' => '1', 'medium' => '1', 'expanded' => '1', 'large' => '1', 'extra-large' => '1']);
|
|
});
|
|
|
|
it('fills each breakpoint left out from the nearest smaller one', function () {
|
|
expect(gridColumns((string) $this->blade('<x-grid :columns="[\'medium\' => 2, \'large\' => 4]" />')))
|
|
->toBe(['compact' => '1', 'medium' => '2', 'expanded' => '2', 'large' => '4', 'extra-large' => '4'])
|
|
->and(gridColumns((string) $this->blade('<x-grid :columns="3" />')))
|
|
->toBe(['compact' => '3', 'medium' => '3', 'expanded' => '3', 'large' => '3', 'extra-large' => '3'])
|
|
// A count that is not a whole number from 1 keeps the one before it.
|
|
->and(gridColumns((string) $this->blade('<x-grid :columns="[\'compact\' => 2, \'medium\' => 0, \'expanded\' => \'many\', \'large\' => 5, \'huge\' => 9]" />')))
|
|
->toBe(['compact' => '2', 'medium' => '2', 'expanded' => '2', 'large' => '5', 'extra-large' => '5']);
|
|
|
|
expect(Layout::columns(['extra-large' => 6]))->toBe(['compact' => 1, 'medium' => 1, 'expanded' => 1, 'large' => 1, 'extra-large' => 6]);
|
|
});
|
|
|
|
it('fills a row with columns of a minimum width, capped by the counts when both are given', function () {
|
|
$fill = layoutRoot((string) $this->blade('<x-grid min-item="280px" />'));
|
|
$capped = layoutRoot((string) $this->blade('<x-grid min-item="18rem" :columns="[\'medium\' => 2, \'expanded\' => 3]" />'));
|
|
|
|
expect($fill)->toHaveKey('data-md-min-item')->not->toHaveKey('data-md-columns')
|
|
->and($fill['style'])->toContain('--md-min-item: 280px;')
|
|
->and($capped)->toHaveKeys(['data-md-min-item', 'data-md-columns'])
|
|
->and($capped['style'])->toContain('--md-min-item: 18rem;');
|
|
|
|
foreach (['240' => '240px', '20ch' => '20ch', '12.5em' => '12.5em'] as $given => $length) {
|
|
expect(layoutRoot((string) $this->blade('<x-grid :min-item="$m" />', ['m' => $given]))['style'])->toContain("--md-min-item: {$length};");
|
|
}
|
|
|
|
foreach (['wide', '50%', 'calc(10px + 1rem)', '0'] as $given) {
|
|
expect(layoutRoot((string) $this->blade('<x-grid :min-item="$m" />', ['m' => $given])))->not->toHaveKey('data-md-min-item')
|
|
->and((string) $this->blade('<x-grid :min-item="$m" />', ['m' => $given]))->not->toContain('--md-min-item');
|
|
}
|
|
});
|
|
|
|
it('reads its own column count at each breakpoint', function () {
|
|
$css = (string) file_get_contents(__DIR__.'/../../../resources/css/layout/grid.css');
|
|
|
|
expect($css)->toContain('grid-template-columns: repeat(var(--md-columns), minmax(0, 1fr));');
|
|
|
|
foreach (['medium' => 600, 'expanded' => 840, 'large' => 1200, 'extra-large' => 1600] as $breakpoint => $width) {
|
|
expect($css)->toContain("@media (width >= {$width}px) {\n --md-columns: var(--md-columns-{$breakpoint}, 1);");
|
|
}
|
|
});
|