Select on [dir='rtl'] now that no build rewrites :dir()
Plan step 39 (part 4). With Tailwind gone the Workbench's Vite build still turns every `:dir(rtl)` into a long `:lang()` list (its own CSS minifier, not Tailwind's doing — confirmed by rebuilding and grepping the output). Every RTL mirror rule across the eleven stylesheets that had one now selects `:is([dir='rtl'], [dir='rtl'] *)` instead, matching `:dir(rtl)`'s own specificity (one pseudo-class) and its inherited "this element or a descendant of one carrying the attribute" reach; the built CSS now keeps the selector as written (no `:lang(` or `:dir(` left). RTL browser tests drop the `lang="ar"` workaround the old rewrite needed (ContainmentTest's side-sheet probe, LayoutTest's shared layoutPage() helper) and set only dir="rtl"; CarouselTest's probe already did. Feature tests asserting the selector's literal text (Progress, Overlay, Menu, ListDetail, Icon, Carousel) updated to match. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
co-authored by
Claude Sonnet 5
Claude Sonnet 5
parent
f21943746e
commit
58ef33dc95
@@ -631,7 +631,7 @@ it('fades the bottom sheet\'s scrim out on close, rather than making it vanish',
|
||||
it('slides the side sheet in from its own edge in a right-to-left page', function () {
|
||||
Route::middleware('web')->get('/drawer-rtl-probe', fn () => Blade::render(<<<'BLADE'
|
||||
<!DOCTYPE html>
|
||||
<html lang="ar" dir="rtl">
|
||||
<html dir="rtl">
|
||||
<head>
|
||||
<x-theme-script />
|
||||
@vite(config('livewire-material.showcase.vite'))
|
||||
@@ -655,9 +655,10 @@ it('slides the side sheet in from its own edge in a right-to-left page', functio
|
||||
$page->click('button:has-text("Open")');
|
||||
|
||||
// `side="end"` (the default) is the trailing edge — the *left* of a right-to-left page — so it
|
||||
// slides in from off the left, not the right (the CSS `:dir(rtl)` mirror the Tailwind build
|
||||
// rewrites to a `:lang()` list, hence `lang="ar"` here as well as `dir="rtl"`): caught well
|
||||
// before the 500ms spatial transition ends, it is still off-screen on the left.
|
||||
// slides in from off the left, not the right (the CSS mirror reads `[dir='rtl']` rather than
|
||||
// `:dir(rtl)`, plan step 39 — Vite's own minifier rewrote that to a `:lang()` list, same as
|
||||
// Tailwind's build did): caught well before the 500ms spatial transition ends, it is still
|
||||
// off-screen on the left.
|
||||
$page->wait(0.05);
|
||||
|
||||
$page->assertScript("getComputedStyle({$sheet}).display !== 'none'")
|
||||
|
||||
@@ -13,14 +13,11 @@ use Livewire\Livewire;
|
||||
*/
|
||||
function layoutPage(string $body, int $width, int $height = 900, string $dir = 'ltr'): mixed
|
||||
{
|
||||
// Until the Workbench leaves Tailwind, its build turns `:dir(rtl)` into a list of `:lang()`s, so a
|
||||
// right-to-left page also says which language it is in.
|
||||
$lang = $dir === 'rtl' ? 'ar' : 'en';
|
||||
$path = '/layout-probe/'.md5($body.$dir);
|
||||
|
||||
Route::middleware('web')->get($path, fn () => Blade::render(<<<BLADE
|
||||
<!DOCTYPE html>
|
||||
<html dir="{$dir}" lang="{$lang}">
|
||||
<html dir="{$dir}" lang="en">
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<x-theme-script />
|
||||
|
||||
@@ -192,7 +192,7 @@ it('offers previous and next buttons for fine pointers, always, or never', funct
|
||||
->toBe(['display' => 'flex'])
|
||||
// The button carries no class of its own, and mirrors whole in RTL rather than through
|
||||
// an icon prop button.blade.php does not expose.
|
||||
->and($carousel->declarations("[data-md-carousel]:not([data-md-carousel='full-screen']) > [data-md-carousel-controls] > [data-md-carousel-previous]:dir(rtl), [data-md-carousel]:not([data-md-carousel='full-screen']) > [data-md-carousel-controls] > [data-md-carousel-next]:dir(rtl)"))
|
||||
->and($carousel->declarations("[data-md-carousel]:not([data-md-carousel='full-screen']) > [data-md-carousel-controls] > [data-md-carousel-previous]:is([dir='rtl'], [dir='rtl'] *), [data-md-carousel]:not([data-md-carousel='full-screen']) > [data-md-carousel-controls] > [data-md-carousel-next]:is([dir='rtl'], [dir='rtl'] *)"))
|
||||
->toBe(['transform' => 'scaleX(-1)']);
|
||||
});
|
||||
|
||||
|
||||
@@ -56,7 +56,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)')
|
||||
->toContain("[data-md-icon][data-md-mirror-rtl]:is([dir='rtl'], [dir='rtl'] *)")
|
||||
->and((string) file_get_contents(__DIR__.'/../../../resources/css/all.css'))->toContain("@import './components/icon.css';");
|
||||
});
|
||||
|
||||
|
||||
@@ -87,7 +87,7 @@ it('shows one pane below expanded and both from it, at M3\'s fixed pane widths',
|
||||
->toContain("@media (width >= 840px) {\n grid-template-columns: 360px minmax(0, 1fr);\n column-gap: var(--md-sys-measurement-space300);")
|
||||
->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)')
|
||||
->toContain("[data-md-list-detail-back] [data-md-icon]:is([dir='rtl'], [dir='rtl'] *)")
|
||||
->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'");
|
||||
});
|
||||
|
||||
@@ -381,7 +381,7 @@ it('restyles a submenu to open in place under its item inside the sheet, and can
|
||||
'overflow' => 'visible',
|
||||
])
|
||||
->and($css->declarations('[data-md-menu-sheet] [aria-expanded="true"] > [data-md-submenu-chevron]'))->toMatchArray(['rotate' => '90deg'])
|
||||
->and($css->declarations('[data-md-menu-sheet] [aria-expanded="true"] > [data-md-submenu-chevron]:dir(rtl)'))->toBe(['rotate' => '-90deg']);
|
||||
->and($css->declarations("[data-md-menu-sheet] [aria-expanded=\"true\"] > [data-md-submenu-chevron]:is([dir='rtl'], [dir='rtl'] *)"))->toBe(['rotate' => '-90deg']);
|
||||
});
|
||||
|
||||
it('draws the dropdown a select or a searchable choices field opens, the same family as a menu', function () {
|
||||
|
||||
@@ -255,8 +255,8 @@ it('slides a side sheet out as it slid in, from its own edge in either direction
|
||||
->toHaveKey('translate', 'var(--sheet-offset) 0')
|
||||
->toHaveKey('transition-behavior', 'allow-discrete')
|
||||
->not->toHaveKey('opacity')
|
||||
->and($css->declarations("[data-md-drawer-sheet][data-md-side='end']:dir(rtl)"))->toBe(['--sheet-offset' => '-100%'])
|
||||
->and($css->declarations("[data-md-drawer-sheet][data-md-side='start']:dir(rtl)"))->toBe(['--sheet-offset' => '100%'])
|
||||
->and($css->declarations("[data-md-drawer-sheet][data-md-side='end']:is([dir='rtl'], [dir='rtl'] *)"))->toBe(['--sheet-offset' => '-100%'])
|
||||
->and($css->declarations("[data-md-drawer-sheet][data-md-side='start']:is([dir='rtl'], [dir='rtl'] *)"))->toBe(['--sheet-offset' => '100%'])
|
||||
->and($css->declarations('[data-md-drawer][data-md-open] > [data-md-drawer-sheet]', ['@starting-style']))->toBe(['translate' => 'var(--sheet-offset) 0'])
|
||||
->and($css->declarations('[data-md-drawer-scrim]'))->toHaveKey('opacity', '0')
|
||||
->and($css->declarations('[data-md-drawer][data-md-open] > [data-md-drawer-scrim]'))->toBe(['opacity' => '1']);
|
||||
|
||||
@@ -113,8 +113,8 @@ it('takes the caller\'s size instead of its own, its class landing on the root u
|
||||
it('mirrors the linear indicator in a right-to-left document, unconditionally', function () {
|
||||
$css = ComponentStylesheet::read('progress');
|
||||
|
||||
expect($css->declarations('[data-md-progress]:not([data-md-circular]):dir(rtl)'))->toBe(['rotate' => '180deg'])
|
||||
->and($css->has('[data-md-progress][data-md-circular]:dir(rtl)'))->toBeFalse();
|
||||
expect($css->declarations("[data-md-progress]:not([data-md-circular]):is([dir='rtl'], [dir='rtl'] *)"))->toBe(['rotate' => '180deg'])
|
||||
->and($css->has("[data-md-progress][data-md-circular]:is([dir='rtl'], [dir='rtl'] *)"))->toBeFalse();
|
||||
});
|
||||
|
||||
it('follows a value bound in Alpine', function () {
|
||||
|
||||
Reference in New Issue
Block a user