Fold layout.css and components.css into all.css
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:
co-authored by
Claude Sonnet 5
parent
04271bf227
commit
925d9a4439
@@ -10,13 +10,13 @@ use NoNameWeb\LivewireMaterial\Tests\Support\ViewClasses;
|
||||
* classes (tests/Support/ViewClasses.php), and each has a stylesheet in
|
||||
* `material.components` that imports the stylesheets of the components its view renders, writes
|
||||
* its values from the tokens and its breakpoints as px range queries, and is imported from the
|
||||
* "Actions and communication" block of components.css.
|
||||
* "Actions and communication" block of all.css.
|
||||
*
|
||||
* `icon` and `shape` are the two foundation components (`<x-icon>`, `<x-shape>`) — no group's view
|
||||
* renders them exclusively, so they were in no group's dataset at all. They follow the same shape,
|
||||
* token and view-class rules as every other component, so they run with this group's checks too;
|
||||
* only "is imported from the actions and communication block" needs to read the two of them from
|
||||
* components.css's first block ("Foundation components") instead, since that is where they sit.
|
||||
* all.css's first block ("Foundation components") instead, since that is where they sit.
|
||||
*/
|
||||
dataset('action components', [
|
||||
'icon',
|
||||
@@ -95,16 +95,8 @@ it('takes its values from the tokens and its breakpoints in px', function (strin
|
||||
}
|
||||
})->with('action components');
|
||||
|
||||
it('is imported from the actions and communication block of components.css, or icon and shape from the foundation block before it', function (string $name) {
|
||||
$components = File::get(__DIR__.'/../../../resources/css/components.css');
|
||||
|
||||
if (in_array($name, ['icon', 'shape'], true)) {
|
||||
$block = substr($components, (int) strpos($components, '/* Foundation components */'));
|
||||
$block = substr($block, 0, (int) strpos($block, '/* Actions and communication */'));
|
||||
} else {
|
||||
$block = substr($components, (int) strpos($components, '/* Actions and communication */'));
|
||||
$block = substr($block, 0, (int) strpos($block, '/* Inputs, selection and data */'));
|
||||
}
|
||||
it('is imported from the actions and communication block of all.css, or icon and shape from the foundation block before it', function (string $name) {
|
||||
$block = allCssBlock(in_array($name, ['icon', 'shape'], true) ? 'Foundation components' : 'Actions and communication');
|
||||
|
||||
expect($block)->toContain("@import './components/{$name}.css';");
|
||||
})->with('action components');
|
||||
|
||||
@@ -37,7 +37,7 @@ it('draws a chip at Compose\'s size, corner, type and padding from its styleshee
|
||||
// 16px beside a label and 8px beside an icon, each 1px short for the border.
|
||||
->toContain('padding-inline: 15px;')
|
||||
->toContain('padding-inline-start: 7px;')
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/components.css'))->toContain("@import './components/chip.css';");
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/all.css'))->toContain("@import './components/chip.css';");
|
||||
});
|
||||
|
||||
it('pads a chip without icons by 16px on both sides', function () {
|
||||
@@ -245,7 +245,7 @@ it('draws the set from its stylesheet: 8px between chips, wrapping unless it scr
|
||||
expect($css)->toContain("@import './chip.css';")
|
||||
->toMatch('/\[data-md-chip-set-row\] \{\s*display: flex;\s*flex-wrap: wrap;\s*gap: var\(--md-sys-measurement-space100\);/')
|
||||
->toContain('[data-md-chip-set-scroller] > [data-md-chip-set-row] {')
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/components.css'))->toContain("@import './components/chip-set.css';");
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/all.css'))->toContain("@import './components/chip-set.css';");
|
||||
});
|
||||
|
||||
it('scrolls a chip set on one line with fading edges', function () {
|
||||
|
||||
@@ -106,5 +106,5 @@ it('brings the stylesheets of what it renders, and draws its empty row', functio
|
||||
->toContain("@import './chip-set.css';")
|
||||
->toContain("@import './chip.css';")
|
||||
->toContain('[data-md-choices-empty] {')
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/components.css'))->toContain("@import './components/choices.css';");
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/all.css'))->toContain("@import './components/choices.css';");
|
||||
});
|
||||
|
||||
@@ -9,7 +9,7 @@ use NoNameWeb\LivewireMaterial\Tests\Support\ViewClasses;
|
||||
* `data-md-*` attributes and no class list of its own beyond the interaction and text classes
|
||||
* (tests/Support/ViewClasses.php), and each has a stylesheet in `material.components` that imports
|
||||
* the stylesheets of the components its view renders, writes its values from the tokens and its
|
||||
* breakpoints as px range queries, and is imported from the "Containment" block of components.css.
|
||||
* breakpoints as px range queries, and is imported from the "Containment" block of all.css.
|
||||
*
|
||||
* The dataset grew by one name per component commit, the same rule InputStylesheetsTest.php and
|
||||
* ActionStylesheetsTest.php follow. The error layout, whose view is not a component, has the same
|
||||
@@ -108,12 +108,8 @@ it('takes its values from the tokens and its breakpoints in px', function (strin
|
||||
assertContainmentTokensAndPxBreakpoints(ComponentStylesheet::read($name), "{$name}.css");
|
||||
})->with('containment components');
|
||||
|
||||
it('is imported from the containment block of components.css', function (string $name) {
|
||||
$components = File::get(__DIR__.'/../../../resources/css/components.css');
|
||||
$block = substr($components, (int) strpos($components, '/* Containment */'));
|
||||
$block = substr($block, 0, (int) strpos($block, '/* Navigation */'));
|
||||
|
||||
expect($block)->toContain("@import './components/{$name}.css';");
|
||||
it('is imported from the containment block of all.css', function (string $name) {
|
||||
expect(allCssBlock('Containment'))->toContain("@import './components/{$name}.css';");
|
||||
})->with('containment components');
|
||||
|
||||
it('scopes every element-wide selector to a data-md hook', function (string $name) {
|
||||
|
||||
@@ -26,7 +26,7 @@ it('draws 52px rows, 36px dense ones, from its stylesheet in the components laye
|
||||
->toMatch('/\\[data-md-table\\] \\{\\s*--cell-x: 12px;\\s*--cell-y: var\\(--md-sys-measurement-space200\\);/')
|
||||
->toMatch('/\\[data-md-table\\]\\[data-md-dense\\] \\{\\s*--cell-y: var\\(--md-sys-measurement-space100\\);/')
|
||||
->toContain('[data-md-table] :where(tbody tr[aria-selected=\'true\'])')
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/components.css'))->toContain("@import './components/table.css';")
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/all.css'))->toContain("@import './components/table.css';")
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/tailwind.css'))->not->toContain('table.css');
|
||||
});
|
||||
|
||||
@@ -112,7 +112,7 @@ it('draws the sort header from its stylesheet, its arrow hidden until the column
|
||||
expect((string) file_get_contents(__DIR__.'/../../../resources/css/components/sort-header.css'))
|
||||
->toContain('@layer material.components')
|
||||
->toMatch('/\\[data-md-sort-header\\]:not\\(\\[data-md-active\\]\\) \\[data-md-sort-header-arrow\\] \\{\\s*opacity: 0;/')
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/components.css'))->toContain("@import './components/sort-header.css';");
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/all.css'))->toContain("@import './components/sort-header.css';");
|
||||
});
|
||||
|
||||
it('draws the paginators from their stylesheet, trading the numbers for "Page n of m" below 600px', function () {
|
||||
@@ -120,5 +120,5 @@ it('draws the paginators from their stylesheet, trading the numbers for "Page n
|
||||
->toContain('@layer material.components')
|
||||
->toMatch('/@media \\(width < 600px\\) \\{\\s*\\[data-md-pagination-page\\],\\s*\\[data-md-pagination-range\\] \\{\\s*display: none;/')
|
||||
->toMatch('/@media \\(width >= 600px\\) \\{\\s*\\[data-md-pagination-compact\\] \\{\\s*display: none;/')
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/components.css'))->toContain("@import './components/pagination.css';");
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/all.css'))->toContain("@import './components/pagination.css';");
|
||||
});
|
||||
|
||||
@@ -38,5 +38,5 @@ it('keeps one column on a compact window and fills columns from medium, in the l
|
||||
->toContain("[data-md-feed] {\n display: grid;\n grid-template-columns: minmax(0, 1fr);")
|
||||
->toContain("@media (width >= 600px) {\n grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--md-min-item, 240px)), 1fr));")
|
||||
->not->toContain('grid-auto-flow')
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/layout.css'))->toContain("@import './layout/feed.css';");
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/all.css'))->toContain("@import './layout/feed.css';");
|
||||
});
|
||||
|
||||
@@ -225,7 +225,7 @@ it('draws a form\'s column and its actions from its stylesheet', function () {
|
||||
expect($css)->toContain('@layer material.components')
|
||||
->toContain('grid-template-columns: minmax(0, 1fr);')
|
||||
->toContain('gap: var(--md-sys-measurement-space200);')
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/components.css'))->toContain("@import './components/form.css';");
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/all.css'))->toContain("@import './components/form.css';");
|
||||
});
|
||||
|
||||
it('keeps the field\'s chrome in its own stylesheet in the components layer', function () {
|
||||
@@ -235,7 +235,7 @@ it('keeps the field\'s chrome in its own stylesheet in the components layer', fu
|
||||
->toContain("@import './icon.css';")
|
||||
->toContain('[data-md-field-box]')
|
||||
->not->toMatch('/(?<![\\w-])\\.field\\b/')
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/components.css'))->toContain("@import './components/field.css';")
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/all.css'))->toContain("@import './components/field.css';")
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/tailwind.css'))->not->toContain('field.css');
|
||||
});
|
||||
|
||||
@@ -258,14 +258,14 @@ it('gives the one-line field a stylesheet that brings the field and its icons',
|
||||
expect($css)->toStartWith('/*')
|
||||
->toContain("@import './field.css';")
|
||||
->toContain("@import './icon.css';")
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/components.css'))->toContain("@import './components/input.css';");
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/all.css'))->toContain("@import './components/input.css';");
|
||||
});
|
||||
|
||||
it('gives the password field a stylesheet that brings the field and its icons', function () {
|
||||
expect((string) file_get_contents(__DIR__.'/../../../resources/css/components/password.css'))
|
||||
->toContain("@import './field.css';")
|
||||
->toContain("@import './icon.css';")
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/components.css'))->toContain("@import './components/password.css';");
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/all.css'))->toContain("@import './components/password.css';");
|
||||
});
|
||||
|
||||
it('draws what a textarea changes in the field from its own stylesheet', function () {
|
||||
@@ -276,7 +276,7 @@ it('draws what a textarea changes in the field from its own stylesheet', functio
|
||||
->toContain('textarea[data-md-field-control][data-md-autogrow]')
|
||||
->toContain('field-sizing: content;')
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/components/field.css'))->not->toContain('textarea[')
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/components.css'))->toContain("@import './components/textarea.css';");
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/all.css'))->toContain("@import './components/textarea.css';");
|
||||
});
|
||||
|
||||
it('draws what a select changes in the field from its own stylesheet', function () {
|
||||
@@ -286,7 +286,7 @@ it('draws what a select changes in the field from its own stylesheet', function
|
||||
->toContain('@supports (appearance: base-select)')
|
||||
->toContain('select[data-md-field-control]:open')
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/components/field.css'))->not->toContain('select[')
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/components.css'))->toContain("@import './components/select.css';");
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/all.css'))->toContain("@import './components/select.css';");
|
||||
});
|
||||
|
||||
it('draws the file picker\'s button from its own stylesheet', function () {
|
||||
@@ -296,5 +296,5 @@ it('draws the file picker\'s button from its own stylesheet', function () {
|
||||
->toContain("input[type='file'][data-md-field-control]::file-selector-button")
|
||||
->toContain('background-color: var(--md-sys-color-secondary-container);')
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/components/field.css'))->not->toContain("[type='file']")
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/components.css'))->toContain("@import './components/file.css';");
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/all.css'))->toContain("@import './components/file.css';");
|
||||
});
|
||||
|
||||
@@ -75,5 +75,5 @@ it('reads its own column count at each breakpoint in the layout layer', function
|
||||
expect($css)->toContain("@media (width >= {$width}px) {\n --md-columns: var(--md-columns-{$breakpoint}, 1);");
|
||||
}
|
||||
|
||||
expect((string) file_get_contents(__DIR__.'/../../../resources/css/layout.css'))->toContain("@import './layout/grid.css';");
|
||||
expect((string) file_get_contents(__DIR__.'/../../../resources/css/all.css'))->toContain("@import './layout/grid.css';");
|
||||
});
|
||||
|
||||
@@ -57,7 +57,7 @@ it('draws its size from a stylesheet in the components layer', function () {
|
||||
expect($css)->toContain('@layer material.components')
|
||||
->toContain('inline-size: var(--md-icon-size, 24px)')
|
||||
->toContain('[data-md-icon][data-md-mirror-rtl]:dir(rtl)')
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/components.css'))->toContain("@import './components/icon.css';");
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/all.css'))->toContain("@import './components/icon.css';");
|
||||
});
|
||||
|
||||
it('names the icon for a screen reader when it carries the meaning alone', function () {
|
||||
|
||||
@@ -10,7 +10,7 @@ use NoNameWeb\LivewireMaterial\Tests\Support\ViewClasses;
|
||||
* classes (tests/Support/ViewClasses.php), and each has a stylesheet in
|
||||
* `material.components` that imports the stylesheets of the components its view renders, writes
|
||||
* its values from the tokens and its breakpoints as px range queries, and is imported from the
|
||||
* "Inputs, selection and data" block of components.css.
|
||||
* "Inputs, selection and data" block of all.css.
|
||||
*
|
||||
* `pagination` is not in this dataset: its four views live in `resources/views/pagination/**`, not
|
||||
* `resources/views/components/`, so the two checks that read a single `resources/views/components/
|
||||
@@ -47,10 +47,9 @@ dataset('input components', inputComponents());
|
||||
/**
|
||||
* The checks that read a stylesheet alone also run on the one no view renders by itself:
|
||||
* selection.css, what the checkbox, radio and switch share (its own file header names them), which
|
||||
* each of their stylesheets imports. Nothing renders it directly and components.css never imports
|
||||
* it either — only checkbox.css, radio.css and toggle.css do — so without this its shape and token
|
||||
* rules would go unchecked, the way navigation-item.css did before NavigationStylesheetsTest.php
|
||||
* picked it up.
|
||||
* each of their stylesheets imports too. Nothing renders it directly, so without this its shape
|
||||
* and token rules would go unchecked, the way navigation-item.css did before
|
||||
* NavigationStylesheetsTest.php picked it up.
|
||||
*/
|
||||
dataset('input stylesheets', [...inputComponents(), 'selection']);
|
||||
|
||||
@@ -155,12 +154,8 @@ it('takes its values from the tokens and its breakpoints in px', function (strin
|
||||
assertTokensAndPxBreakpoints(ComponentStylesheet::read($name), "{$name}.css");
|
||||
})->with('input stylesheets');
|
||||
|
||||
it('is imported from the inputs, selection and data block of components.css', function (string $name) {
|
||||
$components = File::get(__DIR__.'/../../../resources/css/components.css');
|
||||
$block = substr($components, (int) strpos($components, '/* Inputs, selection and data */'));
|
||||
$block = substr($block, 0, (int) strpos($block, '/* Containment */'));
|
||||
|
||||
expect($block)->toContain("@import './components/{$name}.css';");
|
||||
it('is imported from the inputs, selection and data block of all.css', function (string $name) {
|
||||
expect(allCssBlock('Inputs, selection and data'))->toContain("@import './components/{$name}.css';");
|
||||
})->with('input components');
|
||||
|
||||
// ---- pagination: its views live outside resources/views/components/ --------------------------
|
||||
@@ -183,12 +178,8 @@ it('takes pagination\'s values from the tokens and its breakpoints in px', funct
|
||||
assertTokensAndPxBreakpoints(ComponentStylesheet::read('pagination'), 'pagination.css');
|
||||
});
|
||||
|
||||
it('is imported from the inputs, selection and data block of components.css for pagination', function () {
|
||||
$components = File::get(__DIR__.'/../../../resources/css/components.css');
|
||||
$block = substr($components, (int) strpos($components, '/* Inputs, selection and data */'));
|
||||
$block = substr($block, 0, (int) strpos($block, '/* Containment */'));
|
||||
|
||||
expect($block)->toContain("@import './components/pagination.css';");
|
||||
it('is imported from the inputs, selection and data block of all.css for pagination', function () {
|
||||
expect(allCssBlock('Inputs, selection and data'))->toContain("@import './components/pagination.css';");
|
||||
});
|
||||
|
||||
dataset('pagination views', [
|
||||
|
||||
@@ -88,6 +88,6 @@ it('shows one pane below expanded and both from it, at M3\'s fixed pane widths',
|
||||
->toContain("@media (width >= 1200px) {\n grid-template-columns: 412px minmax(0, 1fr);")
|
||||
->toContain("@media (width < 840px) {\n [data-md-list-detail]:not([data-md-selected]) > [data-md-list-detail-pane='detail'],\n [data-md-list-detail][data-md-selected] > [data-md-list-detail-pane='list'] {\n display: none;")
|
||||
->toContain('[data-md-list-detail-back] [data-md-icon]:dir(rtl)')
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/layout.css'))->toContain("@import './layout/list-detail.css';")
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/all.css'))->toContain("@import './layout/list-detail.css';")
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/js/material.js'))->toContain("import './layout.js'");
|
||||
});
|
||||
|
||||
@@ -10,7 +10,7 @@ use NoNameWeb\LivewireMaterial\Tests\Support\ViewClasses;
|
||||
* classes (tests/Support/ViewClasses.php), and each has a stylesheet in `material.components` that
|
||||
* imports the stylesheets of the components its view renders, writes its values from the tokens
|
||||
* and its breakpoints as px range queries, and is imported from the "Navigation" block of
|
||||
* components.css.
|
||||
* all.css.
|
||||
*
|
||||
* The dataset grows by one name per component commit, the same rule ContainmentStylesheetsTest.php
|
||||
* and the earlier groups follow. `<x-tabs>` and `<x-tab>` share one stylesheet (tabs.css) and one
|
||||
@@ -148,11 +148,8 @@ it('takes its values from the tokens and its breakpoints in px', function (strin
|
||||
assertNavigationTokensAndPxBreakpoints(ComponentStylesheet::read($name), "{$name}.css");
|
||||
})->with('navigation stylesheets');
|
||||
|
||||
it('is imported from the navigation block of components.css', function (string $name) {
|
||||
$components = File::get(__DIR__.'/../../../resources/css/components.css');
|
||||
$block = substr($components, (int) strpos($components, '/* Navigation */'));
|
||||
|
||||
expect($block)->toContain("@import './components/{$name}.css';");
|
||||
it('is imported from the navigation block of all.css', function (string $name) {
|
||||
expect(allCssBlock('Navigation'))->toContain("@import './components/{$name}.css';");
|
||||
})->with('navigation stylesheets');
|
||||
|
||||
it('scopes every element-wide selector to a data-md hook', function (string $name) {
|
||||
|
||||
@@ -100,7 +100,7 @@ it('divides a scrolling body from its header and actions only while content is h
|
||||
->toContain('position: absolute;')
|
||||
// A token that reduced motion sets to zero, so there the rule simply appears.
|
||||
->toContain('transition: opacity var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);')
|
||||
->and(File::get(__DIR__.'/../../../resources/css/components.css'))->toContain("@import './components/modal.css';")
|
||||
->and(File::get(__DIR__.'/../../../resources/css/all.css'))->toContain("@import './components/modal.css';")
|
||||
->and(File::get(__DIR__.'/../../../resources/css/tailwind.css'))->not->toContain('dialog.css')
|
||||
->and(File::get(__DIR__.'/../../../resources/js/material.js'))->toContain("import './dialog.js'")
|
||||
->and(File::get(__DIR__.'/../../../resources/js/dialog.js'))
|
||||
@@ -273,7 +273,7 @@ it('draws the drawer from a stylesheet imported from the containment block, with
|
||||
->not->toContain('pane-width')
|
||||
->not->toContain('pane-close-on-escape')
|
||||
->not->toContain('data-pane')
|
||||
->and(File::get(__DIR__.'/../../../resources/css/components.css'))
|
||||
->and(File::get(__DIR__.'/../../../resources/css/all.css'))
|
||||
->toContain("@import './components/drawer.css';");
|
||||
});
|
||||
|
||||
@@ -305,7 +305,7 @@ it('gives a bottom sheet M3\'s preset heights, cycled from the drag handle', fun
|
||||
});
|
||||
|
||||
it('draws the bottom sheet from a stylesheet imported from the containment block and by the menu', function () {
|
||||
expect(File::get(__DIR__.'/../../../resources/css/components.css'))
|
||||
expect(File::get(__DIR__.'/../../../resources/css/all.css'))
|
||||
->toContain("@import './components/bottom-sheet.css';")
|
||||
->and(File::get(__DIR__.'/../../../resources/css/components/menu.css'))
|
||||
->toContain("@import './bottom-sheet.css';")
|
||||
|
||||
@@ -87,5 +87,5 @@ it('keeps M3\'s margin on the body, once, in the layout layer', function () {
|
||||
->toContain("@media (width >= 600px) {\n padding-inline: var(--md-layout-margin, var(--md-sys-measurement-space300));")
|
||||
->toContain("[data-md-pane-body] > * {\n --md-layout-margin: 0px;")
|
||||
->toContain("[data-md-pane][data-md-width='narrow'] {\n max-inline-size: 40rem;")
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/layout.css'))->toContain("@import './layout/pane.css';");
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/all.css'))->toContain("@import './layout/pane.css';");
|
||||
});
|
||||
|
||||
@@ -56,5 +56,5 @@ it('draws the row from a stylesheet in the layout layer, stacking at the breakpo
|
||||
expect($css)->toContain('@layer material.layout')
|
||||
->toContain("@media (width < 840px) {\n [data-md-row][data-md-stack-below='expanded'] {\n flex-direction: column;")
|
||||
->toContain("[data-md-row][data-md-stack-below='expanded']:not([data-md-align]) {\n align-items: stretch;")
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/layout.css'))->toContain("@import './layout/row.css';");
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/all.css'))->toContain("@import './layout/row.css';");
|
||||
});
|
||||
|
||||
@@ -268,7 +268,7 @@ it('places the FAB at the bottom-end corner, clear of the bar and of a snackbar,
|
||||
// Only the region's own <main>: one an application nests in the page takes none of this.
|
||||
->toContain("[data-md-scaffold-content] > main {\n --md-layout-margin: 0px;")
|
||||
->not->toContain('[data-md-scaffold] main')
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/layout.css'))->toContain("@import './layout/scaffold.css';");
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/all.css'))->toContain("@import './layout/scaffold.css';");
|
||||
});
|
||||
|
||||
it('imports the stylesheets of the navigation rail, the navigation bar and the snackbar host', function () {
|
||||
|
||||
@@ -114,6 +114,6 @@ it('draws the bar and the view from its stylesheet, at M3\'s widths', function (
|
||||
->toContain('[data-md-search][data-md-full-screen] [data-md-search-view] {')
|
||||
->toContain("[data-md-search][data-md-trigger='icon']:not([data-md-open]) [data-md-search-bar] {")
|
||||
->not->toMatch('/\\d(?:\\.\\d+)?rem/')
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/components.css'))->toContain("@import './components/search.css';")
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/all.css'))->toContain("@import './components/search.css';")
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/tailwind.css'))->not->toContain('search.css');
|
||||
});
|
||||
|
||||
@@ -151,7 +151,7 @@ it('draws the checkbox from its stylesheet, on the row the selection controls sh
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/components/selection.css'))
|
||||
->toContain('[data-md-selection-row]')
|
||||
->toContain('@layer material.components')
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/components.css'))->toContain("@import './components/checkbox.css';")
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/all.css'))->toContain("@import './components/checkbox.css';")
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/tailwind.css'))->not->toContain('selection.css');
|
||||
});
|
||||
|
||||
@@ -160,7 +160,7 @@ it('lays the radio group out from its stylesheet, inline only from 600px', funct
|
||||
|
||||
expect($css)->toContain("@import './selection.css';")
|
||||
->toMatch('/@media \\(width >= 600px\\) \\{\\s*\\[data-md-radio\\]\\[data-md-inline\\] \\[data-md-radio-options\\] \\{\\s*display: flex;/')
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/components.css'))->toContain("@import './components/radio.css';")
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/all.css'))->toContain("@import './components/radio.css';")
|
||||
->and((string) $this->blade('<x-radio name="size" class="mt-4" style="order: 1" :options="[[\'id\' => \'s\', \'name\' => \'S\']]" />'))
|
||||
->toMatch('/data-md-radio\\s+class="mt-4" style="order: 1"/');
|
||||
});
|
||||
@@ -169,5 +169,5 @@ it('draws the switch from its stylesheet', function () {
|
||||
expect((string) file_get_contents(__DIR__.'/../../../resources/css/components/toggle.css'))
|
||||
->toContain("@import './selection.css';")
|
||||
->toMatch('/\\[data-md-switch\\] \\{[^}]*width: 52px;[^}]*height: 32px;/')
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/components.css'))->toContain("@import './components/toggle.css';");
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/all.css'))->toContain("@import './components/toggle.css';");
|
||||
});
|
||||
|
||||
@@ -47,7 +47,7 @@ it('draws M3\'s 44x48 value indicator and puts the stop on the inactive track',
|
||||
->toMatch('/\[data-md-slider-value\] \{[^}]*min-width: var\(--md-sys-measurement-space600\);[^}]*height: 44px;[^}]*background-color: var\(--md-sys-color-inverse-surface\);[^}]*transform-origin: bottom;/')
|
||||
->toMatch('/:is\(\[data-md-slider-tick\], \[data-md-slider-stop\]\) \{[^}]*background-color: var\(--slider-on-inactive\);/')
|
||||
->toContain("@import './icon.css';")
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/components.css'))->toContain("@import './components/slider.css';");
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/all.css'))->toContain("@import './components/slider.css';");
|
||||
});
|
||||
|
||||
it('snaps and clamps the value to the step grid', function (string $template, string $value) {
|
||||
|
||||
@@ -32,12 +32,12 @@ it('takes the element, the visibility props and the caller\'s class and style',
|
||||
]);
|
||||
});
|
||||
|
||||
it('draws the stack from a stylesheet in the layout layer, imported by layout.css', function () {
|
||||
it('draws the stack from a stylesheet in the layout layer, imported by all.css', function () {
|
||||
$css = (string) file_get_contents(__DIR__.'/../../../resources/css/layout/stack.css');
|
||||
|
||||
expect($css)->toContain('@layer material.layout')
|
||||
->toContain("[data-md-stack] {\n display: flex;\n flex-direction: column;\n gap: var(--md-gap);")
|
||||
// A stack inside another never takes its parent's gap.
|
||||
->toContain(":where([data-md-stack]) {\n --md-gap: 0px;")
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/layout.css'))->toContain("@import './layout/stack.css';");
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/all.css'))->toContain("@import './layout/stack.css';");
|
||||
});
|
||||
|
||||
@@ -68,5 +68,5 @@ it('places the supporting pane at M3\'s widths from expanded, in the layout laye
|
||||
->toContain("@media (width >= 1200px) {\n grid-template-columns: minmax(0, 1fr) 412px;")
|
||||
->toContain("[data-md-supporting-pane][data-md-width='split'] {\n grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);")
|
||||
->toContain('inset-block-end: max(var(--material-bottom-bar, 0px), var(--material-safe-bottom, env(safe-area-inset-bottom)));')
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/layout.css'))->toContain("@import './layout/supporting-pane.css';");
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/all.css'))->toContain("@import './layout/supporting-pane.css';");
|
||||
});
|
||||
|
||||
@@ -58,7 +58,7 @@ it('puts the caller\'s class and style on the surface untouched', function () {
|
||||
->toMatchArray(['class' => 'upload-zone', 'style' => 'min-height: 12rem;', 'data-test' => 'zone']);
|
||||
});
|
||||
|
||||
it('draws the surface from a stylesheet in the layout layer, imported by layout.css', function () {
|
||||
it('draws the surface from a stylesheet in the layout layer, imported by all.css', function () {
|
||||
$css = (string) file_get_contents(__DIR__.'/../../../resources/css/layout/surface.css');
|
||||
|
||||
expect($css)->toContain('@layer material.layout')
|
||||
@@ -69,5 +69,5 @@ it('draws the surface from a stylesheet in the layout layer, imported by layout.
|
||||
->toContain("@import './visibility.css';")
|
||||
// A pane on a surface keeps its content off the surface's edge again.
|
||||
->toContain("[data-md-surface] > * {\n --md-layout-margin: initial;")
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/layout.css'))->toContain("@import './layout/surface.css';");
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/all.css'))->toContain("@import './layout/surface.css';");
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user