[YevheniiKotyrlo]

Problem

A media query has no element, so its em and its rem are both the initial font size (Media Queries 4 §1.3). The compiler keeps a media bound in em as a runtime em descriptor, and with inlineRem: false a bound in rem as a runtime rem descriptor, and the media evaluator decides neither: (min-width: 10em) never matches, and with inlineRem: false no rem breakpoint does - Tailwind 4's sm: to 2xl: among them.

Solution

The compiler reads a media bound in em or rem against the root font size the stylesheet configures, inlineRem or else a :root font size, whether or not rem is inlined, so the bound is a number before the evaluator sees it. main already inlines a media query's rem against that font size; the compiler now resolves it once, and the rem inliner, parseLength's rem and the media bound read it from the builder. Container queries keep their em, which is the container's (CSS Conditional 5 §6.1).

That default font size was a literal 14 in five places - the compiler's fallback, parseLength's default, the runtime's seed of __rn-css-rem, the runtime's default fontSize, and an unread rem field on the builder. It is DEFAULT_REM in src/utilities/rem.ts now, parseLength reads the builder's root font size, and the unread field goes.

Tests

src/__tests__/native/media-query-font-relative.test.tsx renders a min-width and a max-width query at each bound: in em against the default rem and an inlined rem of 16, in em and rem with inlineRem: false, and under a 10px :root font size, inlined, not inlined and with inlineRem: 16; an em range; and a negated em term. All 11 fail on #426. #426's condition-semantics.test.tsx expects not (width: 10em) to stay unknown; that case moves here, decided.

Verification

Every ci.yml job passes on this head merged into main with #477's harness fix: lint, typecheck, the tests (1629 passed), the Node tooling tests, both builds, the web export, nothing unstaged, commitlint, and the iOS dev build on macOS 27.0.1 with Xcode 27.0, where CI pins 26.6.

Device evidence, before and after: #494 (comment)

Known limits

• A stylesheet that declares a :root font size moves its media em and rem with it, as main already moves its inlined media rem; a browser keeps both at its initial font size (MQ4 §1.3).
• An em inside a calc() in a media query is still a runtime descriptor the evaluator answers as unknown.

Merge order

It carries #426's commits and changes the media operand parsing #426 adds, so #426 lands first.

[YevheniiKotyrlo]

Device evidence — before / after

UNFIXED — Only the control paints. A bound in em is left for the runtime, which cannot decide it, so neither em query ever matches.

FIXED — All three bars paint green. A media query's em is the initial font size, so 10em is 160 pixels and 1000em is wider than any screen.

before — 3.1.0-rc.0	after — with this PR

Android 16 emulator (API 36, GLES on the host GPU), 1140×2400 @ 480dpi, both frames from one run. My test app inlines rem at 16px, so the em bounds read 160px and 16000px. before is the published 3.1.0-rc.0 plus what my test app needs from my other patches to run: the native and native-internal subpath exports, PR 459, cascade-layer ranking, and a shim that compiles a class-qualified :root inert. after adds the rest of my open PRs, this one included. One of them shows on every screen: PR 417 narrows a var()-valued font-family to one family, so the after sets its text in the theme's face where the before falls back to the platform's.