fix(native): honour inherits: false on registered custom properties

[YevheniiKotyrlo]

Problem

@property { inherits: false } means the property does not cascade to descendants (css-properties-values-api-1 §2.2). The native runtime's VariableContext inherits every custom property unconditionally, so a descendant resolves a value the spec says it must not see.

Tailwind v4 registers several of its internal properties exactly this way — --tw-ring-color and --tw-inset-ring-color among them — so a ring set on an ancestor is inherited by every descendant that reads the shared five-variable box-shadow composition.

What that looks like in practice

Every shadow-* utility — including shadow-none — emits the same composition:

box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);

shadow-none only zeroes --tw-shadow. So a descendant carrying shadow-none subscribes to an ancestor's ring and paints it. Measured through the real compiler and calculateProps, with an ancestor carrying ring-2 ring-red-500:

descendant class list	resolved boxShadow
shadow-none	the ancestor's ring
shadow-sm	the ancestor's ring + its own two
shadow-none ring-transparent	the ancestor's ring
shadow-none ring-0	the ancestor's ring
no shadow-family class	nothing

No class defeats it, which is the point: it is not a specificity problem a stylesheet can work around.

Fix

Record (compiler). extractPropertyRule records the name when inherits is false. It does so before the initial-value == null early return, deliberately: the two descriptors are independent, and Tailwind registers several of these properties with no default — those are exactly the ones a descendant must not resolve.

Publish (stylesheet). Two top-level slots on ReactNativeCssStyleSheet. vn?: string[] carries the non-inheriting names without the leading --, matching StyleRule.v. vi?: RootVariables carries an @property rule's initial-value — the value a property takes on an element that declares it nowhere.

Withhold (runtime). Four channels publish a custom property to a descendant, and a fix in any one of them alone leaves the ring leaking through the other three. All four now route through one predicate — assignInheritedVariables in native-internal/root.ts — or through the resolver skip beside it:

Channel	Closed in
A stylesheet rule's variables — updateRules copied rule.v verbatim into the published bag	src/native/react/rules.ts
VariableContextProvider spread props.value straight into the context	src/native-internal/variables.tsx
An inline vars() merged in AFTER the rule filter, so style={vars({"--my-var": 10})} handed 10 to every descendant while the same value in CSS was withheld	src/native/react/rules.ts
:root via varResolver — rootVariables is handed to EVERY element, which is inheritance by another name	src/native/styles/variables.ts

A fifth is compile-time: the single-definition inliner folded a lone declaration into consumers in other rules, so :root { --my-var: 50px } became a literal width: 50 on .child before any registry was consulted. src/compiler/inline-variables.ts takes the non-inheriting name set and refuses to fold those names.

The declaring element is unaffected in every case — unfiltered rules and unfiltered inline vars() objects still reach calculateProps. That asymmetry is the whole fix: the property applies where it is declared and stops at the element boundary.

Four further defects the same path turned up

1. An inline vars() clobbered the element's own variables. The merge was Object.assign({}, variables, inheritedVariables, ...inline), and variables already contains the inherited bag under the element's own declarations — so merging inheritedVariables over it handed every descendant the ANCESTOR's value for each name the element itself declared. Fires for any element carrying any inline vars(), registered or not, entirely independent of inherits.
2. initial-value and :root shared one slot. @property's default went through addRootVariable, so it and the :root declaration were two entries in one list and source order decided the winner. Tailwind emits @property first and :root after — the losing order. This also broke inheriting properties whose @property block sits after their :root declaration. Hence vi.
3. The registry was append-only across reloads, and a registration has two halves. inject only ever added, so a Fast Refresh flipping inherits: false → true, or deleting the @property rule, left the property pinned non-inheriting for the session. Both halves are now replaced — the name set and the initial value — because replacing one leaves the two disagreeing about the same registration. See the section below: retracting an observed value is not a clear().
4. vu was written to the wrong registry. inject registered options.vu into rootVariables(...), so universalVariables was never written and the resolver's universal rung was dead code. Not an unrelated tidy-up: skipping the rootVariables rung for a non-inheriting name turns that dead rung into a wrong answer for * { --my-var: 5px }.

Retracting a registration, and why it is not a clear()

Deleting an @property rule has to un-register both halves. The name set is a plain Set and clears cleanly. The initial values are an observable family, and there clear() is a Map.clear() that notifies nobody — so a mounted element keeps painting the deleted registration's value, and the next registration of that name lands on a fresh observable that element never subscribed to.

Measured on one sheet, .probe { width: calc(2px + var(--my-var)) } against an initial-value: 3px registration:

	registry	rendered style
cold, no @property rule	undefined	{}
@property present, then deleted — before	3	{ width: 5 }
the same, with a clear() retraction	undefined	{ width: 5 }
the same, with set(undefined)	undefined	{}

The third row is why the test that settles this renders rather than reading the registry: a clear() makes the registry-level assertion pass while the element is still wrong.

So the retraction sets the stale names to undefined, which takes the same notification path a changed value takes. That needs the names the previous sheet registered, so family gains a keys() accessor beside its existing delete and clear. Its Map is already that record; a second registry alongside it would be the same two-halves-disagreeing shape as the defect itself. The observable's argument type widens to accept undefined, which its read function's first line already implements — that branch was simply unreachable from set before.

resetVariableRegistries still clears, and the asymmetry is deliberate: nothing is mounted across the test boundary it serves, so it has no reader to strand.

The dual-package split

native-internal/root.ts holds four variable stores, and a second copy of the module cannot reach three of them. This PR pins the two it introduces — nonInheritedVariables and registeredInitialValues — to globalThis, like style-collection.ts and variables.tsx already do. rootVariables and universalVariables are pre-existing and are #410's subject, below. StyleCollection is itself pinned, so whichever copy of native-internal/root wins does all the injecting and fills ITS containers; a module-scoped store hands the other copy something nothing ever writes to.

For nonInheritedVariables that is a filter that never fires — the ring leaks again, with nothing to indicate why. For registeredInitialValues it is sharper, and worth stating separately: it is not a fallback the resolver can do without. Tailwind composes a registered width into arithmetic on the element that DECLARES the ring — calc(2px + var(--tw-ring-offset-width)) — so a copy reading an empty registry does not lose an inherited value it was never entitled to, it corrupts a length that element computes for itself, with no ancestor involved.

Neither store has a seed to protect, so a plain ??= is the whole guard.

Relationship to #410. That PR pins rootVariables and universalVariables for the same reason, and this one does not duplicate it: registeredInitialValues does not exist on #410's base, so #410 cannot cover it. Both branch from f70c402 and both restructure the tail of root.ts, so they conflict textually and not in mechanism — same declare global + ??= guard, different stores. Whichever lands second is a merge, not a redesign, and folding registeredInitialValues into #410's RootVariableRegistries object is a reasonable tidy-up at that point. I am happy to do it in whichever order you prefer.

Tests

Five files: src/__tests__/compiler/property.test.ts, and under src/__tests__/native/ non-inheriting-channels.test.tsx, non-inheriting-registry.test.ts, non-inheriting-variables.test.tsx, plus additions to vars.test.tsx.

The retraction is guarded at runtime, because the compiler plane cannot see it. The compiler compiles one sheet at a time and holds no registry, so all it can say is that a sheet with no @property rule emits no vi — which property.test.ts pins, and which is what the runtime retracts against. The defect itself only exists across two injects with a reader mounted, so its four tests render: a cold-load control, the registry retraction, the mounted element, and an observable identity that fails the moment the retraction becomes a clear(). Each was mutation-proven — reverting to the append-only loop turns two red on width: 5, and substituting a clear() turns a different two red, which is how the third row of the table above was measured.

The dual-package tests drive a real second copy — jest.resetModules() re-evaluates the module against the same globalThis, which is the split's topology exactly — and one of them injects through the real compiler and StyleCollection.inject, so it measures the value the pipeline produces rather than a hand-written one. Each was mutation-proven: I unpinned the store and watched the assertion go red before trusting it.

Every fixture declares each custom property twice, and that is load-bearing. A property with a single definition is folded into its consumers by the compiler's inliner, which never reaches the runtime path under test — the first draft of these passed and failed for that reason rather than for the fix. Real Tailwind output always carries many definitions (one per ring-* / shadow-* utility), so two is the faithful shape rather than a trick. #413 scopes that inliner to its declaring block; once it lands these fixtures can be written the normal way.

Open questions

1. The wire format gains two slots, and one of them is a MOVE. vn is additive; vi relocates @property initial values out of vr, so identical CSS compiles to a different stylesheet shape. There is no version field on ReactNativeCssStyleSheet: an older runtime fed a newer sheet silently loses every @property initial value, and a newer runtime fed an older sheet gets them back in vr, where they are treated as inheritable :root declarations — the original bug. This is the largest ask here.
2. The inline-vars() merge order changes for everyone, registered properties or not.
3. * and :root stop sharing a slot. The resolver reads universal before root; that precedence held before only because one census was always empty.
4. A stylesheet reload now un-registers names the new sheet drops, both the inherits: false flag and the initial-value. A registered initial value therefore stops resolving the moment its @property rule leaves the sheet, which is the behaviour a Fast Refresh needs and a change for anyone relying on the old append-only registry.
   Also here: family gains a keys() accessor in src/native/reactivity.ts, and the variable observables' set argument widens to VariableValue[] | undefined. Both are additive, but family is a shared primitive rather than something this feature owns.
5. src/jest/index.ts resets the variable registries in its beforeEach, which changes cross-test isolation for every downstream consumer of the preset and makes the preset responsible for re-applying the __rn-css seeds.
6. Five new exports on react-native-css/native-internal — registeredInitialValues, nonInheritedVariables, assignInheritedVariables, resetVariableRegistries, replaceRegisteredInitialValues — and two globalThis keys with a declare global augmentation.
7. @property inside @media is not recorded, pinned by test rather than fixed.

Quality gates

Paired run on the same machine, this branch against its base f70c402:

f70c402   Test Suites: 2 failed, 4 skipped, 53 passed, 55 of 59 total
          Tests:       3 failed, 21 skipped, 1048 passed, 1072 total

this PR   Test Suites: 2 failed, 4 skipped, 56 passed, 58 of 62 total
          Tests:       3 failed, 21 skipped, 1102 passed, 1126 total

Both suite lines account for every suite (2 + 4 + 53 = 59; 2 + 4 + 56 = 62), so neither run silently subtracted one by failing to load it — I assert numTotalTests and a zero suite-load count out of --json rather than reading the summary.

The failing set is byte-identical and red on the base itself — src/__tests__/babel/react-native.test.ts (1) and src/__tests__/babel/react-native-web.test.ts (2), all babel-plugin-tester output mismatches from Windows path handling, which #390 addresses. yarn typecheck and yarn lint are clean.