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
resources/css/components/carousel.css
+2 -2
View File
@@ -106,8 +106,8 @@
}
}
[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) {
[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'] *) {
transform: scaleX(-1);
}
}
resources/css/components/chip-set.css
+1 -1
View File
@@ -79,7 +79,7 @@
scrollbar-width: none;
mask-image: linear-gradient(to right, transparent, black var(--chip-fade-start), black calc(100% - var(--chip-fade-end)), transparent);
&:dir(rtl) {
&:is([dir='rtl'], [dir='rtl'] *) {
mask-image: linear-gradient(to left, transparent, black var(--chip-fade-start), black calc(100% - var(--chip-fade-end)), transparent);
}
resources/css/components/drawer.css
+2 -2
View File
@@ -98,11 +98,11 @@
inset-inline-start: 0;
}
[data-md-drawer-sheet][data-md-side='end']:dir(rtl) {
[data-md-drawer-sheet][data-md-side='end']:is([dir='rtl'], [dir='rtl'] *) {
--sheet-offset: -100%;
}
[data-md-drawer-sheet][data-md-side='start']:dir(rtl) {
[data-md-drawer-sheet][data-md-side='start']:is([dir='rtl'], [dir='rtl'] *) {
--sheet-offset: 100%;
}
resources/css/components/icon.css
+1 -1
View File
@@ -16,7 +16,7 @@
block-size: var(--md-icon-size, 24px);
}
[data-md-icon][data-md-mirror-rtl]:dir(rtl) {
[data-md-icon][data-md-mirror-rtl]:is([dir='rtl'], [dir='rtl'] *) {
transform: scaleX(-1);
}
}
resources/css/components/menu.css
+1 -1
View File
@@ -252,7 +252,7 @@
[data-md-menu-sheet] [aria-expanded="true"] > [data-md-submenu-chevron] {
rotate: 90deg;
&:dir(rtl) {
&:is([dir='rtl'], [dir='rtl'] *) {
rotate: -90deg;
}
}
resources/css/components/navigation-rail.css
+8 -8
View File
@@ -341,7 +341,7 @@
translate var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-easing-emphasized-accelerate),
display var(--md-sys-motion-effects-default-duration) allow-discrete;
&:dir(rtl) {
&:is([dir='rtl'], [dir='rtl'] *) {
translate: 100% 0;
}
}
@@ -357,7 +357,7 @@
translate: -100% 0;
}
&:dir(rtl) {
&:is([dir='rtl'], [dir='rtl'] *) {
translate: 0 0;
@starting-style {
@@ -386,7 +386,7 @@
translate var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-easing-emphasized-accelerate),
display var(--md-sys-motion-effects-default-duration) allow-discrete;
&:dir(rtl) {
&:is([dir='rtl'], [dir='rtl'] *) {
translate: 100% 0;
}
}
@@ -399,7 +399,7 @@
translate var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-easing-emphasized-accelerate),
display var(--md-sys-motion-effects-default-duration) allow-discrete;
&:dir(rtl) {
&:is([dir='rtl'], [dir='rtl'] *) {
translate: 100% 0;
}
}
@@ -413,7 +413,7 @@
translate var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-easing-emphasized-accelerate),
display var(--md-sys-motion-effects-default-duration) allow-discrete;
&:dir(rtl) {
&:is([dir='rtl'], [dir='rtl'] *) {
translate: 100% 0;
}
}
@@ -430,7 +430,7 @@
translate var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-easing-emphasized-accelerate),
display var(--md-sys-motion-effects-default-duration) allow-discrete;
&:dir(rtl) {
&:is([dir='rtl'], [dir='rtl'] *) {
translate: 100% 0;
}
}
@@ -447,7 +447,7 @@
translate var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-easing-emphasized-accelerate),
display var(--md-sys-motion-effects-default-duration) allow-discrete;
&:dir(rtl) {
&:is([dir='rtl'], [dir='rtl'] *) {
translate: 100% 0;
}
}
@@ -465,7 +465,7 @@
translate: -100% 0;
}
&:dir(rtl) {
&:is([dir='rtl'], [dir='rtl'] *) {
translate: 0 0;
@starting-style {
resources/css/components/progress.css
+1 -1
View File
@@ -42,7 +42,7 @@
height: 4px;
}
[data-md-progress]:not([data-md-circular]):dir(rtl) {
[data-md-progress]:not([data-md-circular]):is([dir='rtl'], [dir='rtl'] *) {
rotate: 180deg;
}
resources/css/components/slider.css
+3 -3
View File
@@ -188,7 +188,7 @@
inset-inline: var(--md-sys-measurement-space25);
pointer-events: none;
&:dir(rtl) {
&:is([dir='rtl'], [dir='rtl'] *) {
scale: -1 1;
}
}
@@ -254,7 +254,7 @@
color: var(--slider-on-active);
}
&:dir(rtl) {
&:is([dir='rtl'], [dir='rtl'] *) {
scale: -1 1;
}
}
@@ -304,7 +304,7 @@
justify-content: center;
translate: -50% 0;
&:dir(rtl) {
&:is([dir='rtl'], [dir='rtl'] *) {
scale: -1 1;
}
}