noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Select on [dir='rtl'] now that no build rewrites :dir()

Browse Source 
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
2026-09-15 06:54:16 +02:00
co-authored by Claude Sonnet 5
parent f21943746e
commit 58ef33dc95
19 changed files with 36 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/Browser/ContainmentTest.php
+5 -4
View File
@@ -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'")
tests/Browser/LayoutTest.php
+1 -4
View File
@@ -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 />