fix(native): answer :dir() per element, and compile every spelling of it

[YevheniiKotyrlo]

Problem

:dir() matches an element's own directionality (Selectors 4 §7.1): its dir, else the nearest ancestor's. On main nothing has a direction of its own. Every direction condition reads I18nManager.isRTL for the whole app, and the compiler reads the spellings of one question differently:

selector	main
.x:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *), Tailwind's rtl:	the first arm alone, from the platform's direction
.x:dir(rtl) · .x:where([dir="rtl"]) · :dir(rtl) .x	no rule
[dir="rtl"] .x · html[dir="rtl"] .x	no condition, so it applies in every direction
.x[dir="rtl"]	the platform's direction, not the element's dir

Solution

View and Text take a dir prop. An element publishes the directions declared on it and its ancestors, nearest first, through the variable context its descendants already read. A declaring element takes the user-agent rule [dir] { direction }, beneath every author rule. Its directionality is its own dir, else the nearest declared one, else the platform's.

The platform's direction is the root's directionality and no element's dir. That is the document a browser renders when <html> carries no dir, so a dir on a root View reads the same on web and native.

The compiler emits each spelling as the question it asks:

selector	compiles to
.x:dir(rtl) · @media (dir: rtl)	["=", "dir", "rtl"], the element's directionality
.x[dir="rtl"] · .x:where([dir="rtl"])	["a", "dir", "=", "rtl", "i"], its own dir
[dir="rtl"] .x · .x:where([dir="rtl"] *)	["=", "ancestor-dir", "rtl"], an ancestor declares it
:dir(rtl) .x · .x:where(:dir(rtl) *)	root-dir or ancestor-dir
html:dir(rtl) .x	["=", "root-dir", "rtl"]
html[dir="rtl"] .x	no rule

Tailwind's rtl: becomes one rule per arm. As in every browser, it therefore reaches into an ltr island inside an rtl tree. A value folds ASCII case-insensitively unless the selector carries s.

A directionality the runtime cannot place on its ancestor compiles to nothing:

• a container's :dir();
• a classless compound holding anything beside one [dir] or :dir();
• a [dir] more than one compound up.

A container's own [dir], as in .group[dir="rtl"] .item, stays an attribute of that container.

Tests

Every expected value is what Firefox 155 and WebKit 26.6 render. Chromium 153 agrees except on the s-flag rows: it does not implement s, so it drops those selectors. An RTL platform is measured as an <html dir="auto"> whose text resolves it to rtl.

• src/__tests__/native/directionality.test.tsx renders 19 spellings over 9 trees on both platform directions, 342 cases. The trees include nested opposite declarations, a declaration under an opposite ancestor, and an undeclared element in between. Further cases cover:
  • inheritance, a nested override, and the user-agent rule beneath an author direction;
  • auto and values outside the enumeration, and inline variables;
  • a dir that changes, comes or goes, keeping children mounted;
  • Text, the @media (dir) operators, :root variables, and an idempotent re-render.
• src/__tests__/compiler/directionality.test.ts has 31 cases over compile().
• fix: match a dataSet value and a dir attribute the way the DOM does #447's [dir] rows in compiler/selectors.test.tsx and native/direction-media.test.tsx now read the element's own dir.
• On fix(compiler): drop a namespace-qualified attribute selector #449's head, 246 of the 427 cases in these files fail. The runtime suite was measured without the one case that imports the module this adds.
• Each of 22 mutations fails its own cases.

Verification

On Windows with Node 26:

• yarn lint clean
• yarn typecheck clean
• yarn test --coverage: every failure also fails on main on this machine (the four babel cases)
• yarn build clean
• yarn example expo export --platform web exported

Known limits

• On a device, rtl: and ltr: reach this code once fix(metro): compile the native stylesheet from the authored CSS, never its web build #461 lands. Until then the Metro transformer hands the compiler CSS lowered for browsers, where :dir() has become :lang() (rtl:/ltr: variants silently dropped — lightningcss downcompiles :dir() to :lang() which is unhandled #453).
• :not(:dir()), Tailwind's not-rtl:, still compiles to nothing, since the builder negates prop questions only.
• The compiler supports no child combinator, so [dir="rtl"] > .x compiles to nothing.
• An element whose props gain or lose the dir key itself changes its render shape unless its rules already provide a scope. The existing re-mount log reports it.

Merge order

• This builds on fix(compiler): drop a namespace-qualified attribute selector #449, which builds on fix(compiler): read [class=…] from the prop the class list arrives on #448 and fix: match a dataSet value and a dir attribute the way the DOM does #447, so those land first and this carries their commits until they do.
• fix(metro): compile the native stylesheet from the authored CSS, never its web build #461 is what lets a device reach this code.
• fix: evaluate range pairs, and answer a condition the runtime cannot decide with unknown #426 rewrites the media evaluator. Whichever lands second threads the element's directionality through the other. feat(native): evaluate prefers-reduced-motion so motion-reduce / motion-safe work on native #388, fix(native): make colorScheme.set move every reader of the scheme #415 and fix: evaluate aspect-ratio media and container queries #425 edit the same evaluator.
• fix(compiler): answer an ancestor condition that names no class #462 also changes how an ancestor compound compiles, so whichever lands second rebases. With both, an ancestor's dir is answered here before fix(compiler): answer an ancestor condition that names no class #462 builds a container query.
• fix(native): rank an unset specificity slot the same however it is spelled #432 edits selector-builder.ts and specificity.ts, and fix(types): accept an explicit undefined on every prop this package adds #418 edits types.d.ts; each rebases on whichever lands first.

It also shares lines with #475 (compiler/selector-builder.ts); whichever lands second rebases.

Base

Re-written on #449 (590d395e), which sits on #448, #447 and main (a5002c5).

[YevheniiKotyrlo]

No current device pair

Every build of my test app carries this change, because the app's reading-direction code needs it, so no build can show the before. On a device it also needs #461, which lets :dir() reach the compiler.