From 18b31321eb927c762bed91a122312bbeb836a75b Mon Sep 17 00:00:00 2001
From: Yevhenii <evgeny.kotyrlo@gmail.com>
Date: Thu, 22 Oct 2026 15:41:27 +0300
Subject: [PATCH] fix: honour `inherits: false` on registered custom properties
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

@property { inherits: false } stops a custom property at the element that
declares it (css-properties-values-api-1 §3). The native runtime inherited
every custom property, so a descendant resolved a value it must not see.
Every Tailwind v4 shadow-* utility composes var(--tw-ring-shadow), so a
shadow-none descendant painted its ancestor's ring.

The compiler publishes each registration (vp): its name, whether it
inherits and its initial value, separate from :root's variables, since a
declaration wins over a property's default wherever the @property rule
sits. Its first pass decides every registration, the last valid @property
of a name at the top level, in a layer, in @container or under an
@supports that holds, as browsers register them, since lightningcss prints
only the last @property of a name. A registration whose initial value
depends on the element (em, rem, ch, lh, cq* units, inside calc() or a
transform too) is ignored, as browsers do. One whose initial value has no
descriptor here (a <time>, <resolution>, <image>, <url> or transform, a
viewport unit other than vw and vh, a math function over one, or a token
list the compiler cannot reduce) is left out, so the property inherits as
on main.

The inliner folds a single declaration into every consumer, so a
non-inheriting property declared once on a class reached elements without
that class: a ring-2 element painted shadow-sm's shadow. It now leaves a
non-inheriting property to the runtime unless universal rules outside
@media and @container are all that declare it, which every element does
for itself.

At runtime varResolver reads a non-inheriting property only from the
element itself (its rules, an inline vars(), a universal rule) or from its
registered initial value, the last rung before the var() fallback: no
ancestor's variables, whoever publishes them, and not :root. Its guard on
an ancestor's value holds until a later registration lets the name
inherit, so a descendant is not styled again when an ancestor's
non-inheriting value changes. A variable that inherits is computed where
it is declared (css-variables-1 §2), so an element's published variables
and :root's take the non-inheriting properties they refer to from their
own scope, and the inliner leaves such a variable where it is declared. An
ancestor's guaranteed-invalid value inherits as such, so the reader takes
its own fallback. inject adds each stylesheet's registrations by name, the
last one winning, as it does for :root and universal variables, since
Metro injects every CSS file apart. Each name's inheritance and initial
value are an observable of their own, so a mounted element follows a later
stylesheet that changes a property's inherits, either way, or its initial
value, and only that name's readers run again. The jest preset resets the
registries between tests. Both registries are pinned to globalThis, like
the style collection, so a second copy of the module reads the same ones.
---
 DEVELOPMENT.md                                |    2 +-
 README.md                                     |    2 +-
 src/__tests__/compiler/property.test.ts       |  560 ++++++-
 .../native/non-inheriting-variables.test.tsx  | 1315 +++++++++++++++++
 src/__tests__/native/variable-cycles.test.tsx |   22 +
 src/__tests__/native/vars.test.tsx            |  146 ++
 src/compiler/compiler.ts                      |  151 +-
 src/compiler/compiler.types.ts                |    8 +
 src/compiler/computational-independence.ts    |  169 +++
 src/compiler/inline-variables.ts              |   67 +
 src/compiler/selector-builder.ts              |    2 +-
 src/compiler/stylesheet.ts                    |   20 +-
 src/jest/index.ts                             |    2 +
 src/native-internal/root.ts                   |   68 +-
 src/native-internal/style-collection.ts       |   65 +-
 src/native/conditions/guards.ts               |   14 +-
 src/native/react/rules.ts                     |   25 +-
 src/native/styles/variables.ts                |  246 ++-
 src/utilities/equality.ts                     |   41 +
 src/utilities/index.ts                        |    1 +
 20 files changed, 2765 insertions(+), 161 deletions(-)
 create mode 100644 src/__tests__/native/non-inheriting-variables.test.tsx
 create mode 100644 src/compiler/computational-independence.ts
 create mode 100644 src/utilities/equality.ts

diff --git a/DEVELOPMENT.md b/DEVELOPMENT.md
index 4ce58467..5125ac7c 100644
--- a/DEVELOPMENT.md
+++ b/DEVELOPMENT.md
@@ -47,7 +47,7 @@ This enables `className` prop support on all React Native components.
 - **Reactive style system** (`src/native/reactivity.ts`) — custom observables for media queries, container queries, color scheme changes
 - **StyleCollection singleton** (`src/native-internal/`) — isolated to prevent circular dependencies between native runtime and CSS file imports
 - **Platform-aware compilation** — different outputs for native (JSON) vs web (browser CSS)
-- **Inline variable optimization** — single-use CSS variables are inlined at compile time; multi-use preserved
+- **Inline variable optimization** — single-use CSS variables are inlined at compile time; multi-use, those an `@property` registers `inherits: false` (unless declared only on `*` outside `@media` and `@container`), and those whose value refers to one, preserved
 
 ## Package Entry Points
 
diff --git a/README.md b/README.md
index bafb2302..e6ba9ca6 100644
--- a/README.md
+++ b/README.md
@@ -255,7 +255,7 @@ export default withReactNativeCSS(defaultConfig, {
 
 Custom properties (sometimes referred to as CSS variables or cascading variables) are a way to store values that can be reused throughout a CSS document. They are defined using a property name that starts with `--`, and their values can be accessed using the `var()` function.
 
-To improve performance, Custom properties that are only set **once** in the CSS file are inlined at build time.
+To improve performance, Custom properties that are only set **once** in the CSS file are inlined at build time. A property an `@property` rule registers with `inherits: false` is inlined only when that one declaration is on a universal selector outside a media or container query, and a property whose value refers to such a property is not inlined.
 
 For example
 
diff --git a/src/__tests__/compiler/property.test.ts b/src/__tests__/compiler/property.test.ts
index 119c85d7..31228b7a 100644
--- a/src/__tests__/compiler/property.test.ts
+++ b/src/__tests__/compiler/property.test.ts
@@ -9,15 +9,12 @@ test("@property with length initial value", () => {
 }
 `);
 
-  const result = compiled.stylesheet();
-  expect(result.vr).toBeDefined();
-
-  const vrMap = new Map(result.vr);
-  expect(vrMap.has("tw-translate-x")).toBe(true);
-  expect(vrMap.get("tw-translate-x")).toStrictEqual([[0]]);
+  expect(compiled.stylesheet().vp).toStrictEqual([
+    ["tw-translate-x", false, 0],
+  ]);
 });
 
-test("@property without initial value is skipped", () => {
+test("@property without an initial value registers none", () => {
   const compiled = compile(`
 @property --tw-ring-color {
   syntax: "*";
@@ -26,6 +23,7 @@ test("@property without initial value is skipped", () => {
 `);
 
   const result = compiled.stylesheet();
+  expect(result.vp).toStrictEqual([["tw-ring-color", false]]);
   expect(result.vr).toBeUndefined();
 });
 
@@ -38,11 +36,9 @@ test("@property with number initial value", () => {
 }
 `);
 
-  const result = compiled.stylesheet();
-  expect(result.vr).toBeDefined();
-
-  const vrMap = new Map(result.vr);
-  expect(vrMap.get("tw-backdrop-opacity")).toStrictEqual([[1]]);
+  expect(compiled.stylesheet().vp).toStrictEqual([
+    ["tw-backdrop-opacity", false, 1],
+  ]);
 });
 
 test("@property with color initial value", () => {
@@ -54,11 +50,9 @@ test("@property with color initial value", () => {
 }
 `);
 
-  const result = compiled.stylesheet();
-  expect(result.vr).toBeDefined();
-
-  const vrMap = new Map(result.vr);
-  expect(vrMap.get("tw-ring-offset-color")).toStrictEqual([["#fff"]]);
+  expect(compiled.stylesheet().vp).toStrictEqual([
+    ["tw-ring-offset-color", false, "#fff"],
+  ]);
 });
 
 test("@property with token-list initial value (shadow)", () => {
@@ -70,14 +64,12 @@ test("@property with token-list initial value (shadow)", () => {
 }
 `);
 
-  const result = compiled.stylesheet();
-  expect(result.vr).toBeDefined();
-
-  const vrMap = new Map(result.vr);
-  expect(vrMap.get("tw-shadow")).toStrictEqual([[[0, 0, "#0000"]]]);
+  expect(compiled.stylesheet().vp).toStrictEqual([
+    ["tw-shadow", false, [0, 0, "#0000"]],
+  ]);
 });
 
-test("@property defaults are root variables, not universal", () => {
+test("@property defaults are neither root nor universal variables", () => {
   const compiled = compile(`
 @property --tw-shadow {
   syntax: "*";
@@ -87,10 +79,27 @@ test("@property defaults are root variables, not universal", () => {
 `);
 
   const result = compiled.stylesheet();
-  expect(result.vr).toBeDefined();
+  expect(result.vp).toStrictEqual([["tw-shadow", false, [0, 0, "#0000"]]]);
+  expect(result.vr).toBeUndefined();
   expect(result.vu).toBeUndefined();
 });
 
+test("a :root declaration and a registered default land in different slots", () => {
+  const compiled = compile(`
+@property --my-var {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+:root { --my-var: 50px; }
+:root { --my-var: 50px; }
+`);
+
+  const result = compiled.stylesheet();
+  expect(new Map(result.vr).get("my-var")).toStrictEqual([[50]]);
+  expect(result.vp).toStrictEqual([["my-var", true, 0]]);
+});
+
 test("@supports -moz-orient fallback no longer fires", () => {
   const compiled = compile(`
 @supports (-moz-orient: inline) {
@@ -139,7 +148,13 @@ test("@property + class override produces valid stylesheet", () => {
 `);
 
   const result = compiled.stylesheet();
-  expect(result.vr).toBeDefined();
+  expect(result.vp).toStrictEqual([
+    ["tw-shadow", false, [0, 0, "#0000"]],
+    ["tw-inset-shadow", false, [0, 0, "#0000"]],
+    ["tw-ring-shadow", false, [0, 0, "#0000"]],
+    ["tw-inset-ring-shadow", false, [0, 0, "#0000"]],
+    ["tw-ring-offset-shadow", false, [0, 0, "#0000"]],
+  ]);
   expect(result.s).toBeDefined();
 
   const shadowRule = result.s?.find(([name]) => name === "shadow-md");
@@ -155,11 +170,9 @@ test("@property with percentage initial value", () => {
 }
 `);
 
-  const result = compiled.stylesheet();
-  expect(result.vr).toBeDefined();
-
-  const vrMap = new Map(result.vr);
-  expect(vrMap.get("tw-shadow-alpha")).toStrictEqual([["100%"]]);
+  expect(compiled.stylesheet().vp).toStrictEqual([
+    ["tw-shadow-alpha", false, "100%"],
+  ]);
 });
 
 test("multiple @property declarations with verified values", () => {
@@ -181,13 +194,11 @@ test("multiple @property declarations with verified values", () => {
 }
 `);
 
-  const result = compiled.stylesheet();
-  expect(result.vr).toBeDefined();
-
-  const vrMap = new Map(result.vr);
-  expect(vrMap.get("tw-translate-x")).toStrictEqual([[0]]);
-  expect(vrMap.get("tw-translate-y")).toStrictEqual([[0]]);
-  expect(vrMap.get("tw-rotate")).toStrictEqual([["0deg"]]);
+  expect(compiled.stylesheet().vp).toStrictEqual([
+    ["tw-translate-x", false, 0],
+    ["tw-translate-y", false, 0],
+    ["tw-rotate", false, "0deg"],
+  ]);
 });
 
 test("@property with repeated single-child unwraps to scalar", () => {
@@ -199,13 +210,260 @@ test("@property with repeated single-child unwraps to scalar", () => {
 }
 `);
 
-  const result = compiled.stylesheet();
-  expect(result.vr).toBeDefined();
-
-  const vrMap = new Map(result.vr);
   // Single-child repeated (<length>+ with one value) should unwrap
   // to the same shape as a direct <length-percentage> type
-  expect(vrMap.get("my-offset")).toStrictEqual([[10]]);
+  expect(compiled.stylesheet().vp).toStrictEqual([["my-offset", false, 10]]);
+});
+
+test("@property inherits: false is recorded, initial value or not", () => {
+  const compiled = compile(`
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+`);
+
+  expect(compiled.stylesheet().vp).toStrictEqual([
+    ["tw-ring-shadow", false, [0, 0, "#0000"]],
+    ["tw-ring-color", false],
+  ]);
+});
+
+test("vp carries each registration's inherits", () => {
+  const declarations: [name: string, inherits: boolean][] = [
+    ["--a-off", false],
+    ["--b-on", true],
+    ["--c-off", false],
+    ["--d-on", true],
+  ];
+
+  const compiled = compile(
+    declarations
+      .map(
+        ([name, inherits]) =>
+          `@property ${name} { syntax: "<length>"; inherits: ${inherits}; initial-value: 0px; }`,
+      )
+      .join("\n"),
+  );
+
+  expect(
+    compiled.stylesheet().vp?.map(([name, inherits]) => [name, inherits]),
+  ).toStrictEqual(
+    declarations.map(([name, inherits]) => [name.slice(2), inherits]),
+  );
+});
+
+test("a non-inheriting property is left to the runtime, however few rules declare it", () => {
+  const compiled = compile(`
+@property --pinned {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+.parent { --pinned: 10px; }
+.child { width: var(--pinned); }
+`);
+
+  expect(compiled.stylesheet().s).toStrictEqual([
+    ["parent", [{ s: [1, 1], v: [["pinned", 10]] }]],
+    [
+      "child",
+      [{ s: [2, 1], d: [[[{}, "var", "pinned", 1], "width", 1]], dv: 1 }],
+    ],
+  ]);
+});
+
+test("a single declaration that refers to a non-inheriting property is left to the runtime", () => {
+  const compiled = compile(`
+@property --my-var {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+.parent { --alias: var(--my-var); --my-var: 10px; }
+.child { width: var(--alias); }
+`);
+
+  expect(compiled.stylesheet().s).toStrictEqual([
+    [
+      "parent",
+      [
+        {
+          s: [1, 1],
+          v: [
+            ["alias", [{}, "var", "my-var", 1]],
+            ["my-var", 10],
+          ],
+        },
+      ],
+    ],
+    [
+      "child",
+      [{ s: [2, 1], d: [[[{}, "var", "alias", 1], "width", 1]], dv: 1 }],
+    ],
+  ]);
+});
+
+test("an inheriting property with one declaration is still inlined", () => {
+  const compiled = compile(`
+@property --folded {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+.parent { --folded: 10px; }
+.child { width: var(--folded); }
+`);
+
+  expect(compiled.stylesheet().s).toStrictEqual([
+    ["child", [{ s: [1, 1], d: [{ width: 10 }] }]],
+  ]);
+});
+
+test("@property inherits: true is recorded as inheriting", () => {
+  const compiled = compile(`
+@property --my-brand {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: red;
+}
+`);
+
+  expect(
+    compiled.stylesheet().vp?.map(([name, inherits]) => [name, inherits]),
+  ).toStrictEqual([["my-brand", true]]);
+});
+
+test("an unregistered custom property is not recorded", () => {
+  // Declared twice, since a single declaration is inlined away and the sheet would be empty
+  const compiled = compile(`
+.my-class { --my-var: 10px; }
+.other { --my-var: 20px; }
+`);
+
+  const result = compiled.stylesheet();
+  expect(result.s).toBeDefined();
+  expect(result.vp).toBeUndefined();
+});
+
+test("@property records a name once, however many rules declare it", () => {
+  // Different syntaxes, since lightningcss collapses identical @property rules
+  const compiled = compile(`
+@property --dup {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --dup {
+  syntax: "*";
+  inherits: false;
+}
+`);
+
+  expect(compiled.stylesheet().vp).toStrictEqual([["dup", false]]);
+});
+
+test("the last @property declaration of a name decides inherits", () => {
+  const inheritsLast = compile(`
+@property --flip { syntax: "*"; inherits: false; }
+@property --flip { syntax: "<length>"; inherits: true; initial-value: 0px; }
+`);
+  expect(inheritsLast.stylesheet().vp).toStrictEqual([["flip", true, 0]]);
+
+  const nonInheritingLast = compile(`
+@property --flip { syntax: "<length>"; inherits: true; initial-value: 0px; }
+@property --flip { syntax: "*"; inherits: false; }
+`);
+  expect(nonInheritingLast.stylesheet().vp).toStrictEqual([["flip", false]]);
+});
+
+test("an ignored @property leaves the earlier registration of its name", () => {
+  const result = compile(`
+@property --x { syntax: "<length>"; inherits: false; initial-value: 3px; }
+@property --x { syntax: "<length>"; inherits: true; initial-value: 2em; }
+`).stylesheet();
+
+  expect(result.vp).toStrictEqual([["x", false, 3]]);
+});
+
+test.each([
+  ["<time>", "1s"],
+  ["<resolution>", "2dppx"],
+  ["<image>", "linear-gradient(red, blue)"],
+  ["<url>", 'url("a.png")'],
+  ["<transform-function>", "rotate(45deg)"],
+  ["<transform-list>", "rotate(45deg) scale(2)"],
+  ["<time>+", "1s 2s"],
+])(
+  "a registration whose %s initial value has no descriptor is left out",
+  (syntax, initialValue) => {
+    const result = compile(
+      `@property --x { syntax: "${syntax}"; inherits: false; initial-value: ${initialValue}; }`,
+    ).stylesheet();
+
+    expect(result.vp).toBeUndefined();
+  },
+);
+
+test("a property left unregistered is inlined like any other declared once", () => {
+  const result = compile(`
+@property --t { syntax: "<transform-function>"; inherits: false; initial-value: rotate(45deg); }
+.parent { --t: rotate(10deg); }
+.child { transform: var(--t); }
+`).stylesheet();
+
+  expect(result.s).toStrictEqual([
+    [
+      "child",
+      [
+        {
+          s: [1, 1],
+          d: [[[{}, "transform", [[{}, "rotate", "10deg"]]], "transform"]],
+        },
+      ],
+    ],
+  ]);
+});
+
+test("an @property nested in @media is not registered", () => {
+  const result = compile(`
+@media (min-width: 1px) {
+  @property --x { syntax: "<length>"; inherits: false; initial-value: 3px; }
+}
+`).stylesheet();
+
+  expect(result.vp).toBeUndefined();
+});
+
+test("the last @property declaration of a name decides what the inliner folds", () => {
+  const consumers = `
+.parent { --flip: 10px; }
+.child { width: var(--flip); }
+`;
+  const child = (css: string) =>
+    JSON.stringify(
+      compile(css)
+        .stylesheet()
+        .s?.find(([name]) => name === "child"),
+    );
+
+  expect(
+    child(`
+@property --flip { syntax: "*"; inherits: false; }
+@property --flip { syntax: "<length>"; inherits: true; initial-value: 0px; }
+${consumers}`),
+  ).not.toContain('"var"');
+  expect(
+    child(`
+@property --flip { syntax: "<length>"; inherits: true; initial-value: 0px; }
+@property --flip { syntax: "*"; inherits: false; }
+${consumers}`),
+  ).toContain('"var"');
 });
 
 test("@property with repeated multi-child preserves array", () => {
@@ -217,10 +475,218 @@ test("@property with repeated multi-child preserves array", () => {
 }
 `);
 
-  const result = compiled.stylesheet();
-  expect(result.vr).toBeDefined();
-
-  const vrMap = new Map(result.vr);
   // Multi-child repeated (<length>+ with two values) keeps the array form
-  expect(vrMap.get("my-offsets")).toStrictEqual([[[10, 20]]]);
+  expect(compiled.stylesheet().vp).toStrictEqual([
+    ["my-offsets", false, [10, 20]],
+  ]);
+});
+
+// A valid registration decides its name over the earlier one, whether or not its initial value has a descriptor; an ignored one leaves the earlier one
+function afterAValidRegistration(syntax: string, initialValue: string) {
+  return compile(`
+@property --x { syntax: "<length>"; inherits: false; initial-value: 7px; }
+@property --x { syntax: "${syntax}"; inherits: false; initial-value: ${initialValue}; }
+`).stylesheet().vp;
+}
+
+const earlierRegistration = [["x", false, 7]];
+
+test.each([
+  "2em",
+  "1rem",
+  "1ch",
+  "2lh",
+  "1cqw",
+  "calc(1px + 1em)",
+  "min(1px, 1em)",
+  "calc(2 * min(1em, 1px))",
+  "round(1em, 1px)",
+  "round(1vw, 1em)",
+])(
+  "an initial value of %s depends on the element, so the registration is ignored",
+  (initialValue) => {
+    expect(afterAValidRegistration("<length>", initialValue)).toStrictEqual(
+      earlierRegistration,
+    );
+  },
+);
+
+test.each([
+  ["<length>", "3px", 3],
+  ["<length>", "calc(1px + 2px)", 3],
+  ["<length-percentage>", "30%", "30%"],
+])("a %s initial value of %s registers", (syntax, initialValue, expected) => {
+  const result = compile(
+    `@property --x { syntax: "${syntax}"; inherits: false; initial-value: ${initialValue}; }`,
+  ).stylesheet();
+
+  expect(result.vp).toStrictEqual([["x", false, expected]]);
+});
+
+test.each([
+  ["1vw", [["x", false, [{}, "vw", 1, 1]]]],
+  ["2svh", undefined],
+  ["max(1px, 2vw)", undefined],
+  ["calc(2 * min(2px, 1vw))", undefined],
+  ["round(1vw, 1px)", undefined],
+])(
+  "a viewport-relative initial value of %s decides its name",
+  (initialValue, expected) => {
+    expect(afterAValidRegistration("<length>", initialValue)).toStrictEqual(
+      expected,
+    );
+  },
+);
+
+test.each([
+  ["<transform-function>", "translateX(1em)", false],
+  ["<transform-function>", "translateX(30%)", true],
+  ["<transform-function>", "translate(1em, 0)", false],
+  ["<transform-function>", "translate(3px, 0)", true],
+  ["<transform-function>", "translate3d(0, 0, 1em)", false],
+  ["<transform-function>", "translate3d(3px, 0, 0)", true],
+  ["<transform-function>", "scale(2)", true],
+  ["<transform-function>", "rotate(45deg)", true],
+  ["<transform-function>", "skew(10deg)", true],
+  ["<transform-function>", "matrix(1, 0, 0, 1, 3, 0)", true],
+  ["<transform-list>", "translateX(1em) rotate(45deg)", false],
+  ["<transform-list>", "translateX(3px) rotate(45deg)", true],
+])(
+  "a %s initial value of %s decides its name only when it is element-independent",
+  (syntax, initialValue, independent) => {
+    expect(afterAValidRegistration(syntax, initialValue)).toStrictEqual(
+      independent ? undefined : earlierRegistration,
+    );
+  },
+);
+
+// Chromium and WebKit keep an <image> registration whose stops depend on the element, and Firefox ignores it; this follows the two
+test("an <image> registration with an element-relative stop still decides its name", () => {
+  expect(
+    afterAValidRegistration("<image>", "linear-gradient(red 1em, blue)"),
+  ).toStrictEqual(undefined);
+});
+
+test("an ignored registration leaves a single declaration to the inliner", () => {
+  const compiled = compile(`
+@property --ignored {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 2em;
+}
+.parent { --ignored: 10px; }
+.child { width: var(--ignored); }
+`);
+
+  const child = compiled.stylesheet().s?.find(([name]) => name === "child");
+
+  expect(JSON.stringify(child)).not.toContain('"var"');
+});
+
+test.each([
+  "--everywhere: dashed;",
+  "border-width: 1px; --everywhere: dashed;",
+  "--everywhere: dashed !important;",
+])(
+  "a non-inheriting property declared once on * is still inlined, from * { %s }",
+  (declarations) => {
+    const compiled = compile(`
+@property --everywhere {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+* { ${declarations} }
+.child { border-style: var(--everywhere); }
+`);
+
+    const child = compiled.stylesheet().s?.find(([name]) => name === "child");
+
+    expect(JSON.stringify(child)).not.toContain('"var"');
+    expect(JSON.stringify(child)).toContain('"dashed"');
+  },
+);
+
+test.each([
+  ["rgb()'s alpha", "rgb(255 0 0 / var(--a))", "color"],
+  ["hsl()'s alpha", "hsl(0 100% 50% / var(--a))", "color"],
+  ["light-dark()", "light-dark(rgb(255 0 0 / var(--a)), blue)", "color"],
+  [
+    "light-dark()'s dark branch",
+    "light-dark(blue, rgb(255 0 0 / var(--a)))",
+    "color",
+  ],
+  ["an env() fallback", "env(safe-area-inset-top, var(--a))", "width"],
+])(
+  "a single declaration that refers to a non-inheriting property through %s is left to the runtime",
+  (_place, value, property) => {
+    const result = compile(`
+@property --a { syntax: "*"; inherits: false; }
+.parent { --a: 0.5; --alias: ${value}; }
+.child { ${property}: var(--alias); }
+`).stylesheet();
+
+    expect(
+      result.s?.find(([name]) => name === "child")?.[1][0]?.d,
+    ).toStrictEqual([[[{}, "var", "alias", 1], property, 1]]);
+  },
+);
+
+test.each([
+  [
+    "both * and a class declare",
+    "* { --x: 1px; } .a { --x: 10px; --alias: var(--x); }",
+  ],
+  ["no rule in the sheet declares", ".b { --alias: var(--x); }"],
+  [
+    "a universal rule under a rejected @supports declares",
+    "@supports (-webkit-hyphens: none) { * { --x: initial; } } .a { --x: 10px; } .b { --alias: var(--x); }",
+  ],
+])(
+  "a single declaration that refers to a non-inheriting property %s is left to the runtime",
+  (_declarations, css) => {
+    const result = compile(`
+@property --x { syntax: "<length>"; inherits: false; initial-value: 0px; }
+${css}
+.child { width: var(--alias); }
+`).stylesheet();
+
+    expect(
+      result.s?.find(([name]) => name === "child")?.[1][0]?.d,
+    ).toStrictEqual([[[{}, "var", "alias", 1], "width", 1]]);
+  },
+);
+
+test("a non-inheriting property declared once on * under a media query is left to the runtime", () => {
+  const result = compile(`
+@property --x { syntax: "<length>"; inherits: false; initial-value: 0px; }
+@media (min-width: 9999px) { * { --x: 10px; } }
+.child { width: var(--x); }
+`).stylesheet();
+
+  expect(result.s?.find(([name]) => name === "child")?.[1][0]?.d).toStrictEqual(
+    [[[{}, "var", "x", 1], "width", 1]],
+  );
+});
+
+test("an @property after a rejected @supports and a @media block still registers", () => {
+  const result = compile(`
+@supports (-webkit-hyphens: none) { * { --y: initial; } }
+@media (min-width: 10px) {
+  @property --z { syntax: "<length>"; inherits: false; initial-value: 1px; }
+}
+@property --x { syntax: "<length>"; inherits: false; initial-value: 3px; }
+`).stylesheet();
+
+  expect(result.vp).toStrictEqual([["x", false, 3]]);
+});
+
+test("an @property under an @supports that fails is not registered", () => {
+  const result = compile(`
+@supports (-webkit-hyphens: none) {
+  @property --x { syntax: "<length>"; inherits: false; initial-value: 3px; }
+}
+`).stylesheet();
+
+  expect(result.vp).toBeUndefined();
 });
diff --git a/src/__tests__/native/non-inheriting-variables.test.tsx b/src/__tests__/native/non-inheriting-variables.test.tsx
new file mode 100644
index 00000000..28766a78
--- /dev/null
+++ b/src/__tests__/native/non-inheriting-variables.test.tsx
@@ -0,0 +1,1315 @@
+import { act, render, screen } from "@testing-library/react-native";
+import { VariableContextProvider } from "react-native-css";
+import { View } from "react-native-css/components/View";
+import { registerCSS, testID } from "react-native-css/jest";
+import {
+  registeredInheritance,
+  registeredInitialValues,
+  resetVariableRegistries,
+  VariableContext,
+} from "react-native-css/native-internal";
+import { colorScheme } from "react-native-css/runtime";
+
+import { VAR_SYMBOL } from "../../native/reactivity";
+
+const parentTestID = "parent";
+
+const registration = `
+  @property --my-var {
+    syntax: "<length>";
+    inherits: false;
+    initial-value: 0px;
+  }
+`;
+
+const inheritingRegistration = `
+  @property --my-var {
+    syntax: "<length>";
+    inherits: true;
+    initial-value: 0px;
+  }
+`;
+
+const loadRootCopy = () => {
+  jest.resetModules();
+  return jest.requireActual<typeof import("../../native-internal/root")>(
+    "../../native-internal/root",
+  );
+};
+
+// A custom property declared once is folded into its consumers at compile time, so these declare theirs twice
+
+test("a non-inheriting custom property does not reach a descendant", () => {
+  registerCSS(`
+    ${registration}
+    .parent { --my-var: 10px; }
+    .other { --my-var: 20px; }
+    .child { width: var(--my-var); }
+  `);
+
+  render(
+    <View testID={parentTestID} className="parent">
+      <View testID={testID} className="child" />
+    </View>,
+  );
+
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({ width: 0 });
+});
+
+test("a non-inheriting custom property does not reach a grandchild", () => {
+  registerCSS(`
+    ${registration}
+    .parent { --my-var: 11px; }
+    .other { --my-var: 20px; }
+    .mid { opacity: 1; }
+    .child { height: var(--my-var); }
+  `);
+
+  render(
+    <View testID={parentTestID} className="parent">
+      <View className="mid">
+        <View testID={testID} className="child" />
+      </View>
+    </View>,
+  );
+
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({ height: 0 });
+});
+
+test("an inheriting custom property still reaches a descendant", () => {
+  registerCSS(`
+    ${inheritingRegistration}
+    .parent { --my-var: 10px; }
+    .other { --my-var: 20px; }
+    .child { width: var(--my-var); }
+  `);
+
+  render(
+    <View testID={parentTestID} className="parent">
+      <View testID={testID} className="child" />
+    </View>,
+  );
+
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({ width: 10 });
+});
+
+test("an unregistered custom property still inherits", () => {
+  registerCSS(`
+    .parent { --my-var: 10px; }
+    .other { --my-var: 20px; }
+    .child { width: var(--my-var); }
+  `);
+
+  render(
+    <View testID={parentTestID} className="parent">
+      <View testID={testID} className="child" />
+    </View>,
+  );
+
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({ width: 10 });
+});
+
+test("a registration whose initial value depends on the element is ignored, so the property inherits", () => {
+  registerCSS(`
+    @property --my-var {
+      syntax: "<length>";
+      inherits: false;
+      initial-value: 2em;
+    }
+    .parent { --my-var: 10px; }
+    .other { --my-var: 20px; }
+    .child { width: var(--my-var); }
+  `);
+
+  render(
+    <View testID={parentTestID} className="parent">
+      <View testID={testID} className="child" />
+    </View>,
+  );
+
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({ width: 10 });
+});
+
+test("a non-inheriting custom property still applies to the element declaring it", () => {
+  registerCSS(`
+    ${registration}
+    .self { --my-var: 10px; width: var(--my-var); }
+    .other { --my-var: 20px; }
+  `);
+
+  render(<View testID={testID} className="self" />);
+
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({ width: 10 });
+});
+
+test("a descendant declaring the property itself wins over the ancestor", () => {
+  registerCSS(`
+    ${registration}
+    .parent { --my-var: 10px; }
+    .other { --my-var: 20px; }
+    .child { --my-var: 30px; width: var(--my-var); }
+  `);
+
+  render(
+    <View testID={parentTestID} className="parent">
+      <View testID={testID} className="child" />
+    </View>,
+  );
+
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({ width: 30 });
+});
+
+test("a descendant falls through to the var() fallback when the registration has no initial value", () => {
+  registerCSS(`
+    @property --no-init {
+      syntax: "*";
+      inherits: false;
+    }
+    .parent { --no-init: 10px; }
+    .other { --no-init: 20px; }
+    .child { width: var(--no-init, 99px); }
+  `);
+
+  render(
+    <View testID={parentTestID} className="parent">
+      <View testID={testID} className="child" />
+    </View>,
+  );
+
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({ width: 99 });
+});
+
+test("a non-inheriting property a VariableContextProvider sets does not reach a descendant", () => {
+  registerCSS(`
+    ${registration}
+    .parent { --my-var: 1px; }
+    .other { --my-var: 2px; }
+    .child { width: var(--my-var); }
+  `);
+
+  render(
+    <VariableContextProvider value={{ "--my-var": 10 }}>
+      <View testID={testID} className="child" />
+    </VariableContextProvider>,
+  );
+
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({ width: 0 });
+});
+
+test("an inheriting property a VariableContextProvider sets reaches a descendant", () => {
+  registerCSS(`
+    ${inheritingRegistration}
+    .parent { --my-var: 1px; }
+    .other { --my-var: 2px; }
+    .child { width: var(--my-var); }
+  `);
+
+  render(
+    <VariableContextProvider value={{ "--my-var": 10 }}>
+      <View testID={testID} className="child" />
+    </VariableContextProvider>,
+  );
+
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({ width: 10 });
+});
+
+test("a VariableContextProvider's non-inheriting property stops where its inheriting siblings go on", () => {
+  registerCSS(`
+    ${registration}
+    @property --kept {
+      syntax: "<length>";
+      inherits: true;
+      initial-value: 0px;
+    }
+    .parent { --my-var: 1px; --kept: 1px; }
+    .other { --my-var: 2px; --kept: 2px; }
+    .child { width: var(--my-var); height: var(--kept); }
+  `);
+
+  render(
+    <VariableContextProvider value={{ "--my-var": 10, "--kept": 20 }}>
+      <View testID={testID} className="child" />
+    </VariableContextProvider>,
+  );
+
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({
+    width: 0,
+    height: 20,
+  });
+});
+
+test.each([
+  [
+    "after",
+    `${registration} :root { --my-var: 50px; } :root { --my-var: 50px; }`,
+  ],
+  [
+    "before",
+    `:root { --my-var: 50px; } :root { --my-var: 50px; } ${registration}`,
+  ],
+  ["once, after", `${registration} :root { --my-var: 50px; }`],
+])(
+  ":root does not supply a non-inheriting property to an element, declared %s the registration",
+  (_, css) => {
+    registerCSS(`
+      ${css}
+      .child { width: var(--my-var); }
+    `);
+
+    render(<View testID={testID} className="child" />);
+
+    expect(screen.getByTestId(testID).props.style).toStrictEqual({ width: 0 });
+  },
+);
+
+test("an ancestor class with a single declaration does not supply a non-inheriting property", () => {
+  registerCSS(`
+    ${registration}
+    .parent { --my-var: 10px; }
+    .child { width: var(--my-var); }
+  `);
+
+  render(
+    <View testID={parentTestID} className="parent">
+      <View testID={testID} className="child" />
+    </View>,
+  );
+
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({ width: 0 });
+});
+
+test("a single-declaration non-inheriting property still applies to the element declaring it", () => {
+  registerCSS(`
+    ${registration}
+    .self { --my-var: 10px; width: var(--my-var); }
+  `);
+
+  render(<View testID={testID} className="self" />);
+
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({ width: 10 });
+});
+
+test(":root still supplies an inheriting property to an element", () => {
+  registerCSS(`
+    ${inheritingRegistration}
+    :root { --my-var: 50px; }
+    :root { --my-var: 50px; }
+    .child { width: var(--my-var); }
+  `);
+
+  render(<View testID={testID} className="child" />);
+
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({ width: 50 });
+});
+
+test("a :root declaration beats a registered initial value declared after it", () => {
+  registerCSS(`
+    :root { --my-var: 50px; }
+    :root { --my-var: 50px; }
+    ${inheritingRegistration}
+    .child { width: var(--my-var); }
+  `);
+
+  render(<View testID={testID} className="child" />);
+
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({ width: 50 });
+});
+
+test("an element declaring a non-inheriting property beats :root for itself", () => {
+  registerCSS(`
+    ${registration}
+    :root { --my-var: 50px; }
+    :root { --my-var: 50px; }
+    .self { --my-var: 30px; width: var(--my-var); }
+    .other { --my-var: 40px; }
+  `);
+
+  render(<View testID={testID} className="self" />);
+
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({ width: 30 });
+});
+
+describe.each([undefined, false] as const)(
+  "with inlineVariables=%s",
+  (inlineVariables) => {
+    test("* supplies a non-inheriting property to every element", () => {
+      registerCSS(
+        `
+        ${registration}
+        * { --my-var: 5px; }
+        .child { width: var(--my-var); }
+      `,
+        { inlineVariables },
+      );
+
+      render(<View testID={testID} className="child" />);
+
+      expect(screen.getByTestId(testID).props.style).toStrictEqual({
+        width: 5,
+      });
+    });
+
+    test("* supplies a non-inheriting property at every depth", () => {
+      registerCSS(
+        `
+        ${registration}
+        * { --my-var: 5px; }
+        .parent { opacity: 1; }
+        .child { width: var(--my-var); }
+      `,
+        { inlineVariables },
+      );
+
+      render(
+        <View testID={parentTestID} className="parent">
+          <View className="parent">
+            <View testID={testID} className="child" />
+          </View>
+        </View>,
+      );
+
+      expect(screen.getByTestId(testID).props.style).toStrictEqual({
+        width: 5,
+      });
+    });
+  },
+);
+
+test("* beats :root for the same name", () => {
+  registerCSS(`
+    ${inheritingRegistration}
+    :root { --my-var: 50px; }
+    :root { --my-var: 50px; }
+    * { --my-var: 5px; }
+    .child { width: var(--my-var); }
+  `);
+
+  render(<View testID={testID} className="child" />);
+
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({ width: 5 });
+});
+
+test("a later registration that inherits lets the property inherit", () => {
+  registerCSS(`
+    ${registration}
+    .parent { --my-var: 1px; }
+    .other { --my-var: 2px; }
+  `);
+  expect(registeredInheritance("my-var").get()).toBe(false);
+
+  registerCSS(`
+    ${inheritingRegistration}
+    .parent { --my-var: 1px; }
+    .other { --my-var: 2px; }
+  `);
+  expect(registeredInheritance("my-var").get()).toBe(true);
+});
+
+test("a stylesheet without the @property rule leaves the registration in place", () => {
+  registerCSS(`
+    ${registration}
+    .parent { --my-var: 1px; }
+    .other { --my-var: 2px; }
+  `);
+
+  registerCSS(`
+    .parent { --my-var: 1px; }
+    .other { --my-var: 2px; }
+  `);
+  expect(registeredInheritance("my-var").get()).toBe(false);
+});
+
+test("a re-registered property inherits again in a rendered tree", () => {
+  registerCSS(`
+    ${registration}
+    .parent { --my-var: 10px; }
+    .other { --my-var: 20px; }
+    .child { width: var(--my-var); }
+  `);
+
+  registerCSS(`
+    ${inheritingRegistration}
+    .parent { --my-var: 10px; }
+    .other { --my-var: 20px; }
+    .child { width: var(--my-var); }
+  `);
+
+  render(
+    <View testID={parentTestID} className="parent">
+      <View testID={testID} className="child" />
+    </View>,
+  );
+
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({ width: 10 });
+});
+
+test("re-registering keeps the observable a reader of the name holds", () => {
+  const before = registeredInheritance("my-var");
+
+  registerCSS(`
+    ${registration}
+    .parent { --my-var: 1px; }
+    .other { --my-var: 2px; }
+  `);
+
+  expect(registeredInheritance("my-var")).toBe(before);
+  expect(before.get()).toBe(false);
+});
+
+const initialValueRegistration = `
+  @property --my-var {
+    syntax: "<length>";
+    inherits: false;
+    initial-value: 3px;
+  }
+`;
+
+const initialValueConsumer = `
+  .probe { width: calc(2px + var(--my-var)); }
+  .a { --my-var: 10px; }
+  .b { --my-var: 20px; }
+`;
+
+test("a sheet registering nothing leaves the consumer no width", () => {
+  registerCSS(initialValueConsumer);
+
+  render(<View testID={testID} className="probe" />);
+
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({});
+});
+
+const registrationWithoutInitialValue = `
+  @property --my-var {
+    syntax: "*";
+    inherits: false;
+  }
+`;
+
+test("a re-registration without an initial value clears the earlier one", () => {
+  registerCSS(`
+    ${initialValueRegistration}
+    ${initialValueConsumer}
+  `);
+  expect(registeredInitialValues("my-var").get()).toBe(3);
+
+  registerCSS(registrationWithoutInitialValue);
+
+  expect(registeredInitialValues("my-var").get()).toBeUndefined();
+});
+
+test("a mounted element drops an initial value its re-registration clears", () => {
+  registerCSS(`
+    ${initialValueRegistration}
+    ${initialValueConsumer}
+  `);
+
+  render(<View testID={testID} className="probe" />);
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({ width: 5 });
+
+  act(() => {
+    registerCSS(registrationWithoutInitialValue);
+  });
+
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({});
+});
+
+test("clearing an initial value keeps the observable its readers hold", () => {
+  registerCSS(`
+    ${initialValueRegistration}
+    ${initialValueConsumer}
+  `);
+  const before = registeredInitialValues("my-var");
+
+  registerCSS(registrationWithoutInitialValue);
+
+  expect(registeredInitialValues("my-var")).toBe(before);
+});
+
+test("resetVariableRegistries retracts a registered initial value", () => {
+  registerCSS(`
+    ${initialValueRegistration}
+    ${initialValueConsumer}
+  `);
+  expect(registeredInitialValues("my-var").get()).toBe(3);
+
+  resetVariableRegistries();
+
+  expect(registeredInitialValues("my-var").get()).toBeUndefined();
+});
+
+test("a registration lasts for its test", () => {
+  registerCSS(initialValueRegistration);
+
+  expect(registeredInheritance("my-var").get()).toBe(false);
+  expect(registeredInitialValues("my-var").get()).toBe(3);
+});
+
+test("a registration does not outlive its test", () => {
+  expect(registeredInheritance("my-var").get()).toBe(true);
+  expect(registeredInitialValues("my-var").get()).toBeUndefined();
+});
+
+test("a second copy of the module shares the registered inheritance", () => {
+  registeredInheritance("tw-ring-shadow").set(false);
+
+  const secondCopy = loadRootCopy();
+
+  expect(secondCopy.registeredInheritance).toBe(registeredInheritance);
+  expect(secondCopy.registeredInheritance("tw-ring-shadow").get()).toBe(false);
+});
+
+test("a second copy of the module shares the registered initial values", () => {
+  registerCSS(`
+    @property --tw-ring-offset-width {
+      syntax: "<length>";
+      inherits: false;
+      initial-value: 0px;
+    }
+    .ring { width: calc(2px + var(--tw-ring-offset-width)); }
+    .offset { --tw-ring-offset-width: 4px; }
+  `);
+
+  const secondCopy = loadRootCopy();
+
+  expect(secondCopy.registeredInitialValues).toBe(registeredInitialValues);
+  expect(secondCopy.registeredInitialValues("tw-ring-offset-width").get()).toBe(
+    0,
+  );
+});
+
+const tailwindRingCss = `
+  @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
+  @property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
+  @property --tw-ring-color { syntax: "*"; inherits: false; }
+  @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
+
+  .ring-2 {
+    --tw-ring-shadow: 0 0 0 2px var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .ring-4 {
+    --tw-ring-shadow: 0 0 0 4px var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .ring-red-500 { --tw-ring-color: #fb2c36; }
+  .ring-blue-500 { --tw-ring-color: #2c36fb; }
+  .shadow-none {
+    --tw-shadow: 0 0 #0000;
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-sm {
+    --tw-shadow: 0 1px 3px 0 #0000001a;
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+`;
+
+test("a shadow-none descendant of a ringed ancestor paints no ring", () => {
+  registerCSS(tailwindRingCss);
+
+  render(
+    <View testID={parentTestID} className="ring-2 ring-red-500">
+      <View testID={testID} className="shadow-none" />
+    </View>,
+  );
+
+  expect(screen.getByTestId(parentTestID).props.style).toStrictEqual({
+    boxShadow: [
+      {
+        offsetX: 0,
+        offsetY: 0,
+        blurRadius: 0,
+        spreadDistance: 2,
+        color: "#fb2c36",
+      },
+    ],
+  });
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({
+    boxShadow: [],
+  });
+});
+
+test("a ringed descendant of a ringed ancestor paints only its own ring", () => {
+  registerCSS(tailwindRingCss);
+
+  render(
+    <View testID={parentTestID} className="ring-2 ring-red-500">
+      <View testID={testID} className="ring-4 ring-blue-500" />
+    </View>,
+  );
+
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({
+    boxShadow: [
+      {
+        offsetX: 0,
+        offsetY: 0,
+        blurRadius: 0,
+        spreadDistance: 4,
+        color: "#2c36fb",
+      },
+    ],
+  });
+});
+
+test("a ringed descendant inherits neither the ring width nor the ring colour", () => {
+  registerCSS(`${tailwindRingCss} .text-ink { color: #123456; }`);
+
+  render(
+    <View testID={parentTestID} className="ring-2 ring-red-500 text-ink">
+      <View testID={testID} className="ring-4" />
+    </View>,
+  );
+
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({
+    boxShadow: [
+      {
+        offsetX: 0,
+        offsetY: 0,
+        blurRadius: 0,
+        spreadDistance: 4,
+        color: "#123456",
+      },
+    ],
+  });
+});
+
+test("a ring-only element does not paint another utility's shadow", () => {
+  registerCSS(`
+    @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
+    @property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
+    .shadow-sm {
+      --tw-shadow: 0 1px 3px 0 #ff0000;
+      box-shadow: var(--tw-ring-shadow), var(--tw-shadow);
+    }
+    .ring-2 {
+      --tw-ring-shadow: 0 0 0 2px #0000ff;
+      box-shadow: var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  `);
+
+  render(<View testID={testID} className="ring-2" />);
+
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({
+    boxShadow: [
+      {
+        offsetX: 0,
+        offsetY: 0,
+        blurRadius: 0,
+        spreadDistance: 2,
+        color: "#00f",
+      },
+    ],
+  });
+});
+
+const tailwindRingOffsetCss = `
+  @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
+  @property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
+  @property --tw-ring-color { syntax: "*"; inherits: false; }
+  @property --tw-ring-offset-width { syntax: "<length>"; inherits: false; initial-value: 0px; }
+
+  .ring-2 {
+    --tw-ring-shadow: 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .ring-4 {
+    --tw-ring-shadow: 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .ring-red-500 { --tw-ring-color: #fb2c36; }
+  .shadow-none {
+    --tw-shadow: 0 0 #0000;
+    box-shadow: var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-sm {
+    --tw-shadow: 0 1px 3px 0 #0000001a;
+    box-shadow: var(--tw-ring-shadow), var(--tw-shadow);
+  }
+`;
+
+// Metro compiles and injects every CSS file of an app apart
+test("a second stylesheet keeps the first one's registrations", () => {
+  registerCSS(tailwindRingOffsetCss, { filename: "global.css" });
+  registerCSS(`.other { color: red; }`, { filename: "other.css" });
+
+  render(
+    <View testID={parentTestID} className="ring-2 ring-red-500">
+      <View testID={testID} className="shadow-none" />
+    </View>,
+  );
+
+  expect(screen.getByTestId(parentTestID).props.style).toStrictEqual({
+    boxShadow: [
+      {
+        offsetX: 0,
+        offsetY: 0,
+        blurRadius: 0,
+        spreadDistance: 2,
+        color: "#fb2c36",
+      },
+    ],
+  });
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({
+    boxShadow: [],
+  });
+});
+
+const declaringTree = `
+  .parent { --my-var: 10px; }
+  .other { --my-var: 20px; }
+  .child { width: var(--my-var); }
+`;
+
+function renderDeclaringTree() {
+  render(
+    <View testID={parentTestID} className="parent">
+      <View testID={testID} className="child" />
+    </View>,
+  );
+}
+
+test("a second stylesheet registering another name keeps the first one's registrations", () => {
+  registerCSS(`${registration} ${declaringTree}`, { filename: "global.css" });
+  registerCSS(
+    `@property --other-var { syntax: "<length>"; inherits: false; initial-value: 0px; }`,
+    { filename: "other.css" },
+  );
+
+  renderDeclaringTree();
+
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({ width: 0 });
+});
+
+test("a mounted element follows a later stylesheet that stops the property inheriting", () => {
+  registerCSS(declaringTree, { filename: "global.css" });
+  renderDeclaringTree();
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({ width: 10 });
+
+  act(() => {
+    registerCSS(
+      `@property --my-var { syntax: "<length>"; inherits: false; initial-value: 1px; }`,
+      { filename: "other.css" },
+    );
+  });
+
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({ width: 1 });
+});
+
+test("a VariableContextProvider follows a later stylesheet that stops the property inheriting", () => {
+  registerCSS(
+    `.child { width: var(--my-var); } .other { width: var(--my-var); }`,
+    {
+      filename: "global.css",
+    },
+  );
+  render(
+    <VariableContextProvider value={{ "--my-var": 10 }}>
+      <View testID={testID} className="child" />
+    </VariableContextProvider>,
+  );
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({ width: 10 });
+
+  act(() => {
+    registerCSS(
+      `@property --my-var { syntax: "<length>"; inherits: false; initial-value: 1px; }`,
+      { filename: "other.css" },
+    );
+  });
+
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({ width: 1 });
+});
+
+test("an ignored @property leaves the earlier registration of its name in force", () => {
+  registerCSS(`
+    @property --my-var { syntax: "<length>"; inherits: false; initial-value: 3px; }
+    @property --my-var { syntax: "<length>"; inherits: true; initial-value: 2em; }
+    ${declaringTree}
+  `);
+
+  renderDeclaringTree();
+
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({ width: 3 });
+});
+
+test("an element reading :root follows a later stylesheet that stops the property inheriting", () => {
+  registerCSS(
+    `:root { --my-var: 10px; } :root { --my-var: 10px; } .child { width: var(--my-var); }`,
+    { filename: "global.css" },
+  );
+  render(<View testID={testID} className="child" />);
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({ width: 10 });
+
+  act(() => {
+    registerCSS(
+      `@property --my-var { syntax: "<length>"; inherits: false; initial-value: 1px; }`,
+      { filename: "other.css" },
+    );
+  });
+
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({ width: 1 });
+});
+
+test("an inheriting variable that refers to a non-inheriting one carries the declaring element's value", () => {
+  registerCSS(`
+    ${registration}
+    .parent { --my-var: 10px; --alias: var(--my-var); }
+    .other { --my-var: 20px; --alias: var(--my-var); }
+    .child { width: var(--alias); }
+  `);
+
+  renderDeclaringTree();
+
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({ width: 10 });
+});
+
+test("currentcolor below a color that reads a non-inheriting property", () => {
+  registerCSS(`
+    @property --brand { syntax: "<color>"; inherits: false; initial-value: black; }
+    .parent { --brand: red; color: var(--brand); }
+    .other { --brand: blue; color: var(--brand); }
+    .child { border-color: currentcolor; }
+  `);
+
+  render(
+    <View testID={parentTestID} className="parent">
+      <View testID={testID} className="child" />
+    </View>,
+  );
+
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({
+    borderColor: "red",
+  });
+});
+
+test("an element under VariableContext itself skips a non-inheriting property", () => {
+  registerCSS(`${registration} .child { width: var(--my-var); }`);
+
+  render(
+    <VariableContext value={{ [VAR_SYMBOL]: true, "my-var": 10 }}>
+      <View testID={testID} className="child" />
+    </VariableContext>,
+  );
+
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({ width: 0 });
+});
+
+test("a mounted element follows a later stylesheet that lets the property inherit", () => {
+  registerCSS(`${registration} ${declaringTree}`, { filename: "global.css" });
+  renderDeclaringTree();
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({ width: 0 });
+
+  act(() => {
+    registerCSS(inheritingRegistration, { filename: "other.css" });
+  });
+
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({ width: 10 });
+});
+
+test("after a later stylesheet lets the property inherit, the ancestor's next value reaches a mounted element", () => {
+  registerCSS(`${registration} ${declaringTree}`, { filename: "global.css" });
+  const tree = (className: string) => (
+    <View testID={parentTestID} className={className}>
+      <View testID={testID} className="child" />
+    </View>
+  );
+  render(tree("parent"));
+
+  act(() => {
+    registerCSS(inheritingRegistration, { filename: "other.css" });
+  });
+  act(() => {
+    screen.rerender(tree("other"));
+  });
+
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({ width: 20 });
+});
+
+test("an inheriting variable takes a non-inheriting one from its own element, not from an ancestor", () => {
+  registerCSS(`
+    ${registration}
+    .grandparent { --my-var: 10px; }
+    .parent { --alias: var(--my-var); }
+    .child { width: var(--alias); }
+  `);
+
+  render(
+    <View className="grandparent">
+      <View className="parent">
+        <View testID={testID} className="child" />
+      </View>
+    </View>,
+  );
+
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({ width: 0 });
+});
+
+test("a single declaration that refers to a non-inheriting property carries its element's value", () => {
+  registerCSS(`
+    ${registration}
+    .parent { --alias: var(--my-var); --my-var: 10px; }
+    .child { width: var(--alias); }
+  `);
+
+  renderDeclaringTree();
+
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({ width: 10 });
+});
+
+test("a :root variable that refers to a non-inheriting property carries :root's value", () => {
+  registerCSS(`
+    ${registration}
+    :root { --my-var: 10px; --alias: var(--my-var); }
+    .child { width: var(--alias); }
+  `);
+
+  render(<View testID={testID} className="child" />);
+
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({ width: 10 });
+});
+
+test("a fallback inside an inheriting variable takes the declaring element's non-inheriting value", () => {
+  registerCSS(`
+    ${registration}
+    .parent { --my-var: 10px; --alias: var(--unset, var(--my-var)); }
+    .child { width: var(--alias); }
+  `);
+
+  renderDeclaringTree();
+
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({ width: 10 });
+});
+
+test("a cycle of non-inheriting properties leaves an inheriting variable its fallback", () => {
+  registerCSS(`
+    @property --a { syntax: "*"; inherits: false; }
+    @property --b { syntax: "*"; inherits: false; }
+    .parent { --a: var(--b, 1px); --b: var(--a, 2px); --alias: var(--a, 5px); }
+    .child { width: var(--alias); }
+  `);
+
+  renderDeclaringTree();
+
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({ width: 5 });
+});
+
+test("a reference inside calc() in an inheriting variable takes the declaring element's value", () => {
+  registerCSS(`
+    ${registration}
+    .parent { --my-var: 10px; --alias: calc(var(--my-var) * 2); }
+    .child { width: var(--alias); }
+  `);
+
+  renderDeclaringTree();
+
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({ width: 20 });
+});
+
+test("an unchanged inheriting variable keeps a descendant's styles across its element's update", () => {
+  registerCSS(`
+    ${registration}
+    .parent { --my-var: 10px; --alias: calc(var(--my-var) * 2); }
+    .faded { opacity: 0.5; }
+    .child { width: var(--alias); }
+  `);
+  const tree = (className: string) => (
+    <View testID={parentTestID} className={className}>
+      <View testID={testID} className="child" />
+    </View>
+  );
+  render(tree("parent"));
+  const before = screen.getByTestId(testID).props.style;
+
+  act(() => {
+    screen.rerender(tree("parent faded"));
+  });
+
+  expect(screen.getByTestId(parentTestID).props.style).toStrictEqual({
+    opacity: 0.5,
+  });
+  expect(screen.getByTestId(testID).props.style).toBe(before);
+});
+
+test("a chain of single declarations ending at a non-inheriting property takes the declaring element's value", () => {
+  registerCSS(`
+    ${registration}
+    .parent { --outer: var(--inner); --inner: var(--my-var); }
+    .grandparent { --my-var: 10px; }
+    .child { width: var(--outer); }
+  `);
+
+  render(
+    <View className="grandparent">
+      <View className="parent">
+        <View testID={testID} className="child" />
+      </View>
+    </View>,
+  );
+
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({ width: 0 });
+});
+
+test("a stylesheet repeating a registration leaves a mounted element's styles in place", () => {
+  const shadowRegistration = `@property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }`;
+  registerCSS(
+    `${shadowRegistration} .child { box-shadow: var(--tw-shadow); }`,
+    {
+      filename: "global.css",
+    },
+  );
+  render(<View testID={testID} className="child" />);
+  const before = screen.getByTestId(testID).props.style;
+
+  act(() => {
+    registerCSS(shadowRegistration, { filename: "other.css" });
+  });
+
+  expect(screen.getByTestId(testID).props.style).toBe(before);
+});
+
+test("a later stylesheet that swaps which property inherits reaches a mounted reader of each", () => {
+  registerCSS(
+    `
+    @property --a { syntax: "<length>"; inherits: false; initial-value: 0px; }
+    @property --b { syntax: "<length>"; inherits: true; initial-value: 0px; }
+    .parent { --a: 10px; --b: 10px; }
+    .other { --a: 20px; --b: 20px; }
+    .child-a { width: var(--a); }
+    .child-b { height: var(--b); }
+  `,
+    { filename: "global.css" },
+  );
+  render(
+    <View className="parent">
+      <View testID="child-a" className="child-a" />
+      <View testID="child-b" className="child-b" />
+    </View>,
+  );
+
+  act(() => {
+    registerCSS(
+      `
+      @property --a { syntax: "<length>"; inherits: true; initial-value: 0px; }
+      @property --b { syntax: "<length>"; inherits: false; initial-value: 0px; }
+    `,
+      { filename: "other.css" },
+    );
+  });
+
+  expect(screen.getByTestId("child-a").props.style).toStrictEqual({
+    width: 10,
+  });
+  expect(screen.getByTestId("child-b").props.style).toStrictEqual({
+    height: 0,
+  });
+});
+
+test("a cycle referenced twice in an inheriting variable gives each reference its fallback", () => {
+  registerCSS(`
+    @property --a { syntax: "*"; inherits: false; }
+    @property --b { syntax: "*"; inherits: false; }
+    .parent { --a: var(--b, 1px); --b: var(--a, 2px); --alias: calc(var(--a, 5px) + var(--a, 6px)); }
+    .child { width: var(--alias); }
+  `);
+
+  renderDeclaringTree();
+
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({ width: 11 });
+});
+
+test("a property that depends on a cycle takes its own fallback for it", () => {
+  registerCSS(`
+    @property --a { syntax: "*"; inherits: false; }
+    @property --b { syntax: "*"; inherits: false; }
+    @property --c { syntax: "*"; inherits: false; }
+    .parent { --c: var(--a, 3px); --a: var(--b, 1px); --b: var(--a, 2px); --alias: var(--c, 5px); }
+    .child { width: var(--alias); }
+  `);
+
+  renderDeclaringTree();
+
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({ width: 3 });
+});
+
+test("a calc() of an inheriting property in an inheriting variable resolves on the reader", () => {
+  registerCSS(`
+    ${registration}
+    .parent { --x: 10px; --alias: calc(var(--x) * 2); }
+    .other { --x: 20px; --alias: calc(var(--x) * 3); }
+    .child { width: var(--alias); }
+  `);
+
+  renderDeclaringTree();
+
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({ width: 20 });
+});
+
+test("a descendant keeps its styles when an ancestor's non-inheriting value changes", () => {
+  registerCSS(`${registration} ${declaringTree}`);
+  const tree = (className: string) => (
+    <View testID={parentTestID} className={className}>
+      <View testID={testID} className="child" />
+    </View>
+  );
+  render(tree("parent"));
+  const before = screen.getByTestId(testID).props.style;
+
+  act(() => {
+    screen.rerender(tree("other"));
+  });
+
+  expect(screen.getByTestId(testID).props.style).toBe(before);
+});
+
+test("an inheriting variable follows a universal value it refers to into dark mode", () => {
+  registerCSS(`
+    @property --b { syntax: "<color>"; inherits: false; initial-value: black; }
+    * { --b: red; }
+    @media (prefers-color-scheme: dark) { * { --b: blue; } }
+    .parent { --border: var(--b); }
+    .other { --border: green; }
+    .child { border-color: var(--border); }
+  `);
+  renderDeclaringTree();
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({
+    borderColor: "red",
+  });
+
+  act(() => {
+    colorScheme.set("dark");
+  });
+
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({
+    borderColor: "blue",
+  });
+});
+
+test("an inheriting variable follows a later stylesheet that changes the initial value it refers to", () => {
+  registerCSS(
+    `
+    @property --b { syntax: "<length>"; inherits: false; initial-value: 3px; }
+    .parent { --border: var(--b); }
+    .other { --border: 1px; }
+    .child { width: var(--border); }
+  `,
+    { filename: "global.css" },
+  );
+  renderDeclaringTree();
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({ width: 3 });
+
+  act(() => {
+    registerCSS(
+      `@property --b { syntax: "<length>"; inherits: false; initial-value: 7px; }`,
+      { filename: "other.css" },
+    );
+  });
+
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({ width: 7 });
+});
+
+test("an inheriting variable follows a later stylesheet that lets the property it refers to inherit", () => {
+  registerCSS(
+    `
+    @property --b { syntax: "<length>"; inherits: false; initial-value: 3px; }
+    .grandparent { --b: 10px; }
+    .grandparent-too { --b: 20px; }
+    .parent { --border: var(--b); }
+    .other { --border: 1px; }
+    .child { width: var(--border); }
+  `,
+    { filename: "global.css" },
+  );
+  render(
+    <View className="grandparent">
+      <View className="parent">
+        <View testID={testID} className="child" />
+      </View>
+    </View>,
+  );
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({ width: 3 });
+
+  act(() => {
+    registerCSS(
+      `@property --b { syntax: "<length>"; inherits: true; initial-value: 3px; }`,
+      { filename: "other.css" },
+    );
+  });
+
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({ width: 10 });
+});
+
+test("an inheriting variable of a property both * and its element declare carries the element's value", () => {
+  registerCSS(`
+    ${registration}
+    * { --my-var: 1px; }
+    .parent { --my-var: 10px; --alias: var(--my-var); }
+    .child { width: var(--alias); }
+  `);
+
+  renderDeclaringTree();
+
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({ width: 10 });
+});
+
+test("an inheriting variable whose reference has no value leaves the reader its fallback", () => {
+  registerCSS(`
+    @property --none { syntax: "*"; inherits: false; }
+    .parent { --alias: var(--none); }
+    .other { --alias: 1px; }
+    .child { width: var(--alias, 7px); }
+  `);
+
+  renderDeclaringTree();
+
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({ width: 7 });
+});
+
+const tailwindPropertiesLayer = `
+  @layer properties {
+    @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+      *, :before, :after, ::backdrop { --tw-ring-color: initial; }
+    }
+  }
+  @property --tw-ring-color { syntax: "*"; inherits: false; }
+`;
+
+test("an alias of a Tailwind property keeps the declaring element's value beside the properties layer", () => {
+  registerCSS(`
+    ${tailwindPropertiesLayer}
+    .ring-red { --tw-ring-color: red; }
+    .card { --card-ring: var(--tw-ring-color); }
+    .child { border-color: var(--card-ring); }
+  `);
+
+  render(
+    <View className="card ring-red">
+      <View testID={testID} className="child" />
+    </View>,
+  );
+
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({
+    borderColor: "red",
+  });
+});
+
+test("a non-inheriting property declared only under a media query is not folded into its readers", () => {
+  registerCSS(`
+    ${registration}
+    @media (min-width: 9999px) { * { --my-var: 10px; } }
+    .child { width: var(--my-var); }
+  `);
+
+  render(<View testID={testID} className="child" />);
+
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({ width: 0 });
+});
+
+test("a :root variable whose reference has no value leaves the reader its fallback", () => {
+  registerCSS(`
+    @property --none { syntax: "*"; inherits: false; }
+    :root { --alias: var(--none); }
+    .child { width: var(--alias, 7px); }
+  `);
+
+  render(<View testID={testID} className="child" />);
+
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({ width: 7 });
+});
diff --git a/src/__tests__/native/variable-cycles.test.tsx b/src/__tests__/native/variable-cycles.test.tsx
index 0bcf5ef7..6854317f 100644
--- a/src/__tests__/native/variable-cycles.test.tsx
+++ b/src/__tests__/native/variable-cycles.test.tsx
@@ -31,6 +31,28 @@ test.each([
   });
 });
 
+test("a cycle through :root resolves to the reader's fallback, not an internal one", () => {
+  registerCSS(
+    `:root { --a: var(--b, 12px); --b: var(--a); } .sample { width: var(--a, 37px); }`,
+    { inlineVariables: false },
+  );
+  render(<View testID="sample" className="sample" />);
+  expect(screen.getByTestId("sample").props.style).toStrictEqual({ width: 37 });
+});
+
+test("a cycle through an ancestor's variables resolves to the reader's fallback, not an internal one", () => {
+  registerCSS(
+    `.parent { --a: var(--b, 3px); --b: var(--a); } .sample { width: var(--a, 5px); }`,
+    { inlineVariables: false },
+  );
+  render(
+    <View className="parent">
+      <View testID="sample" className="sample" />
+    </View>,
+  );
+  expect(screen.getByTestId("sample").props.style).toStrictEqual({ width: 5 });
+});
+
 test("a variable outside a cycle can use a fallback for the invalid variable", () => {
   registerCSS(
     `.sample { --a: var(--b); --b: var(--a); --c: var(--a, 42px); width: var(--c); }`,
diff --git a/src/__tests__/native/vars.test.tsx b/src/__tests__/native/vars.test.tsx
index d87eb7c4..c7604726 100644
--- a/src/__tests__/native/vars.test.tsx
+++ b/src/__tests__/native/vars.test.tsx
@@ -36,3 +36,149 @@ test("vars", () => {
     color: "blue",
   });
 });
+
+const parentTestID = "parent";
+
+const registration = `
+  @property --my-var {
+    syntax: "<length>";
+    inherits: false;
+    initial-value: 0px;
+  }
+`;
+
+const inheritingRegistration = `
+  @property --my-var {
+    syntax: "<length>";
+    inherits: true;
+    initial-value: 0px;
+  }
+`;
+
+test("an inline vars() non-inheriting property does not reach a descendant", () => {
+  registerCSS(`
+    ${registration}
+    .parent { --my-var: 1px; }
+    .other { --my-var: 2px; }
+    .child { width: var(--my-var); }
+  `);
+
+  render(
+    <View testID={parentTestID} style={vars({ "--my-var": 10 })}>
+      <View testID={testID} className="child" />
+    </View>,
+  );
+
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({ width: 0 });
+});
+
+test("an inline vars() non-inheriting property still applies to the element carrying it", () => {
+  registerCSS(`
+    ${registration}
+    .parent { --my-var: 1px; }
+    .other { --my-var: 2px; }
+    .self { width: var(--my-var); }
+  `);
+
+  render(
+    <View testID={testID} className="self" style={vars({ "--my-var": 10 })} />,
+  );
+
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({ width: 10 });
+});
+
+test("an inline vars() inheriting property still reaches a descendant", () => {
+  registerCSS(`
+    ${inheritingRegistration}
+    .parent { --my-var: 1px; }
+    .other { --my-var: 2px; }
+    .child { width: var(--my-var); }
+  `);
+
+  render(
+    <View testID={parentTestID} style={vars({ "--my-var": 10 })}>
+      <View testID={testID} className="child" />
+    </View>,
+  );
+
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({ width: 10 });
+});
+
+test("an inline vars() does not hand an ancestor's variable to the subtree", () => {
+  registerCSS(`
+    .ancestor { --shared: 1px; }
+    .ancestor-too { --shared: 2px; }
+    .middle { --shared: 50px; }
+    .middle-too { --shared: 60px; }
+    .child { width: var(--shared); }
+  `);
+
+  render(
+    <View className="ancestor">
+      <View className="middle" style={vars({ "--unrelated": 7 })}>
+        <View testID={testID} className="child" />
+      </View>
+    </View>,
+  );
+
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({ width: 50 });
+});
+
+test("an inline vars() unregistered property still reaches a descendant", () => {
+  registerCSS(`
+    .parent { --my-var: 1px; }
+    .other { --my-var: 2px; }
+    .child { width: var(--my-var); }
+  `);
+
+  render(
+    <View testID={parentTestID} style={vars({ "--my-var": 10 })}>
+      <View testID={testID} className="child" />
+    </View>,
+  );
+
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({ width: 10 });
+});
+
+test("an inline vars() value is the element's own for a variable that refers to it", () => {
+  registerCSS(`
+    ${registration}
+    .parent { --alias: var(--my-var); }
+    .child { width: var(--alias); }
+  `);
+
+  render(
+    <View
+      testID={parentTestID}
+      className="parent"
+      style={vars({ "--my-var": 10 })}
+    >
+      <View testID={testID} className="child" />
+    </View>,
+  );
+
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({ width: 10 });
+});
+
+test("an inline vars() of another name leaves a variable's reference to the initial value", () => {
+  registerCSS(`
+    ${registration}
+    .grandparent { --my-var: 20px; }
+    .parent { --alias: var(--my-var); }
+    .child { width: var(--alias); }
+  `);
+
+  render(
+    <View className="grandparent">
+      <View
+        testID={parentTestID}
+        className="parent"
+        style={vars({ "--other": 10 })}
+      >
+        <View testID={testID} className="child" />
+      </View>
+    </View>,
+  );
+
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({ width: 0 });
+});
diff --git a/src/compiler/compiler.ts b/src/compiler/compiler.ts
index 363ded58..eccfbd7d 100644
--- a/src/compiler/compiler.ts
+++ b/src/compiler/compiler.ts
@@ -24,6 +24,7 @@ import type {
   StyleRuleMapping,
   UniqueVarInfo,
 } from "./compiler.types";
+import { isComputationallyIndependent } from "./computational-independence";
 import { parseContainerCondition } from "./container-query";
 import {
   parseAngle,
@@ -37,6 +38,7 @@ import { inlineVariables } from "./inline-variables";
 import { extractKeyFrames } from "./keyframes";
 import { lightningcssLoader } from "./lightningcss-loader";
 import { parseMediaQuery } from "./media-query";
+import { isUniversalSelector } from "./selector-builder";
 import { StylesheetBuilder } from "./stylesheet";
 import { supportsConditionValid } from "./supports";
 
@@ -98,8 +100,32 @@ export function compile(code: Buffer | string, options: CompilerOptions = {}) {
     options.inlineRem = effectiveRem;
   }
 
+  // Decided in the first pass, since lightningcss prints only the last @property of a name, valid or not
+  const registrations = new Map<string, PropertyRule>();
+  // Browsers register an @property in a layer, in @container and under an @supports that holds, and one in @media only while it matches
+  const conditionalRegistrations = new Set<string>();
+
   const firstPassVisitor: Visitor<CustomAtRules> = {
     Rule(rule) {
+      switch (rule.type) {
+        case "property":
+          if (
+            !conditionalRegistrations.has(locationKey(rule.value.loc)) &&
+            isValidRegistration(rule.value)
+          ) {
+            registrations.set(rule.value.name, rule.value);
+          }
+          break;
+        case "media":
+          markRegistrations(rule.value.rules, conditionalRegistrations);
+          break;
+        case "supports":
+          if (!supportsConditionValid(rule.value.condition)) {
+            markRegistrations(rule.value.rules, conditionalRegistrations);
+          }
+          break;
+      }
+
       if (
         rule.type === "unknown" &&
         ["cssInterop", "react-native"].includes(rule.value.name)
@@ -148,6 +174,25 @@ export function compile(code: Buffer | string, options: CompilerOptions = {}) {
   if (options.inlineVariables !== false) {
     const exclusionList: string[] = options.inlineVariables?.exclude ?? [];
 
+    firstPassVisitor.StyleSheetExit = (sheet) => {
+      const universalDeclarations = countUniversalDeclarations(sheet.rules);
+
+      // A non-inheriting property has one value on every element only when universal rules are all that declare it
+      const runtimeVariables = new Set(
+        Array.from(registerProperties(registrations, builder)).filter(
+          (name) => {
+            const declarations = vars.get(name)?.count;
+            return (
+              declarations === undefined ||
+              universalDeclarations.get(name) !== declarations
+            );
+          },
+        ),
+      );
+
+      return inlineVariables(sheet, vars, runtimeVariables);
+    };
+
     firstPassVisitor.Declaration = (decl) => {
       if (
         decl.property === "custom" &&
@@ -165,9 +210,6 @@ export function compile(code: Buffer | string, options: CompilerOptions = {}) {
         vars.set(decl.value.name, entry);
       }
     };
-    firstPassVisitor.StyleSheetExit = (sheet) => {
-      return inlineVariables(sheet, vars);
-    };
   }
 
   const { code: firstPass } = lightningcss({
@@ -179,6 +221,10 @@ export function compile(code: Buffer | string, options: CompilerOptions = {}) {
     projectRoot: options.projectRoot ?? process.cwd(),
   });
 
+  if (options.inlineVariables === false) {
+    registerProperties(registrations, builder);
+  }
+
   if (isLoggerEnabled) {
     const MAX_LOG_SIZE = 100 * 1024; // 100KB
     if (firstPass.length <= MAX_LOG_SIZE) {
@@ -338,8 +384,6 @@ function extractRule(
       }
       break;
     case "property":
-      extractPropertyRule(rule.value, builder);
-      break;
     case "custom":
     case "font-face":
     case "font-palette-values":
@@ -421,22 +465,90 @@ function extractContainer(
   }
 }
 
-function extractPropertyRule(
-  propertyRule: PropertyRule,
+function isValidRegistration({ initialValue }: PropertyRule): boolean {
+  return initialValue == null || isComputationallyIndependent(initialValue);
+}
+
+// Known by location, since lightningcss calls no typed RuleExit visitor (parcel-bundler/lightningcss#480) and an untyped one serializes every rule again
+function markRegistrations(rules: readonly Rule[], marked: Set<string>) {
+  for (const rule of rules) {
+    switch (rule.type) {
+      case "property":
+        marked.add(locationKey(rule.value.loc));
+        break;
+      case "media":
+      case "supports":
+      case "container":
+      case "layer-block":
+        markRegistrations(rule.value.rules, marked);
+        break;
+    }
+  }
+}
+
+function locationKey({ source_index, line, column }: PropertyRule["loc"]) {
+  return `${source_index}:${line}:${column}`;
+}
+
+// Registers the properties whose initial value has a descriptor, and returns the names that do not inherit
+function registerProperties(
+  registrations: ReadonlyMap<string, PropertyRule>,
   builder: StylesheetBuilder,
-) {
-  const { initialValue, name } = propertyRule;
+): ReadonlySet<string> {
+  const nonInheriting = new Set<string>();
 
-  if (initialValue == null) {
-    return;
+  for (const [name, { inherits, initialValue }] of registrations) {
+    const value =
+      initialValue == null
+        ? undefined
+        : parsePropertyInitialValue(initialValue, builder);
+
+    // Left unregistered, since without its initial value the property would fall back where CSS gives that value
+    if (initialValue != null && value === undefined) {
+      continue;
+    }
+
+    builder.registerProperty(name.slice(2), inherits, value);
+    if (!inherits) {
+      nonInheriting.add(name);
+    }
   }
 
-  const varName = name.startsWith("--") ? name.slice(2) : name;
-  const value = parsePropertyInitialValue(initialValue, builder);
+  return nonInheriting;
+}
 
-  if (value !== undefined) {
-    builder.addRootVariable(varName, value);
+// Counts each custom property's declarations in universal rules every element shares: at the top level, in a layer or under an @supports, whose declarations the inliner reads too, and not under @media or @container
+function countUniversalDeclarations(
+  rules: readonly Rule[],
+  counts = new Map<string, number>(),
+) {
+  for (const rule of rules) {
+    switch (rule.type) {
+      case "style":
+        if (rule.value.selectors.some(isUniversalSelector)) {
+          const { declarations = [], importantDeclarations = [] } =
+            rule.value.declarations ?? {};
+          for (const declaration of [
+            ...declarations,
+            ...importantDeclarations,
+          ]) {
+            if (declaration.property === "custom") {
+              const { name } = declaration.value;
+              counts.set(name, (counts.get(name) ?? 0) + 1);
+            }
+          }
+        }
+        break;
+      case "layer-block":
+        countUniversalDeclarations(rule.value.rules, counts);
+        break;
+      case "supports":
+        countUniversalDeclarations(rule.value.rules, counts);
+        break;
+    }
   }
+
+  return counts;
 }
 
 function parsePropertyInitialValue(
@@ -463,9 +575,12 @@ function parsePropertyInitialValue(
     case "literal":
       return component.value;
     case "repeated": {
-      const results = component.value.components
-        .map((c) => parsePropertyInitialValue(c, builder))
-        .filter((v): v is NonNullable<StyleDescriptor> => v !== undefined);
+      const results = component.value.components.map((item) =>
+        parsePropertyInitialValue(item, builder),
+      );
+      if (results.includes(undefined)) {
+        return undefined;
+      }
       // Unwrap single-child repeated values so downstream consumers get a
       // scalar instead of a 1-element array. For example, `<length>+` with
       // initial-value `10px` should produce the same shape as `<length>`.
diff --git a/src/compiler/compiler.types.ts b/src/compiler/compiler.types.ts
index 00e08785..ac10e294 100644
--- a/src/compiler/compiler.types.ts
+++ b/src/compiler/compiler.types.ts
@@ -40,6 +40,8 @@ export interface ReactNativeCssStyleSheet {
   vr?: RootVariables;
   /** Universal Variables */
   vu?: RootVariables;
+  /** Registered Properties */
+  vp?: PropertyRegistration[];
 }
 
 /********************************    Styles    ********************************/
@@ -154,6 +156,12 @@ export type VariableValue =
 
 export type RootVariables = [string, VariableValue[]][];
 
+export type PropertyRegistration = readonly [
+  string, // name
+  boolean, // inherits
+  StyleDescriptor?, // initial value
+];
+
 export type InlineVariable = {
   [VAR_SYMBOL]: "inline";
   [key: string]: unknown | undefined;
diff --git a/src/compiler/computational-independence.ts b/src/compiler/computational-independence.ts
new file mode 100644
index 00000000..5080f209
--- /dev/null
+++ b/src/compiler/computational-independence.ts
@@ -0,0 +1,169 @@
+import type {
+  CalcFor_DimensionPercentageFor_LengthValue,
+  CalcFor_Length,
+  DimensionPercentageFor_LengthValue,
+  Length,
+  LengthUnit,
+  LengthValue,
+  MathFunctionFor_DimensionPercentageFor_LengthValue,
+  MathFunctionFor_Length,
+  ParsedComponent,
+  Transform,
+} from "lightningcss";
+
+// An @property initial-value may not depend on the element, so a font- or container-relative unit invalidates the rule (css-properties-values-api-1 §3)
+const ELEMENT_RELATIVE_UNITS: ReadonlySet<LengthUnit> = new Set<LengthUnit>([
+  "em",
+  "rem",
+  "ex",
+  "rex",
+  "ch",
+  "rch",
+  "cap",
+  "rcap",
+  "ic",
+  "ric",
+  "lh",
+  "rlh",
+  "cqw",
+  "cqh",
+  "cqi",
+  "cqb",
+  "cqmin",
+  "cqmax",
+]);
+
+type LengthOperand = Length | DimensionPercentageFor_LengthValue;
+
+type LengthCalculation =
+  | CalcFor_Length
+  | CalcFor_DimensionPercentageFor_LengthValue;
+
+type LengthMathFunction =
+  | MathFunctionFor_Length
+  | MathFunctionFor_DimensionPercentageFor_LengthValue;
+
+export function isComputationallyIndependent(
+  component: ParsedComponent,
+): boolean {
+  switch (component.type) {
+    case "length":
+    case "length-percentage":
+      return isIndependentOperand(component.value);
+    case "transform-function":
+      return isIndependentTransform(component.value);
+    case "transform-list":
+      return component.value.every(isIndependentTransform);
+    case "repeated":
+      return component.value.components.every(isComputationallyIndependent);
+    case "number":
+    case "integer":
+    case "percentage":
+    case "color":
+    case "image":
+    case "url":
+    case "angle":
+    case "time":
+    case "resolution":
+    case "custom-ident":
+    case "literal":
+    case "token-list":
+      return true;
+    default:
+      (component) satisfies never;
+      return false;
+  }
+}
+
+function isIndependentLength(length: LengthValue): boolean {
+  return !ELEMENT_RELATIVE_UNITS.has(length.unit);
+}
+
+function isIndependentOperand(operand: LengthOperand): boolean {
+  switch (operand.type) {
+    case "value":
+    case "dimension":
+      return isIndependentLength(operand.value);
+    case "percentage":
+      return true;
+    case "calc":
+      return isIndependentCalculation(operand.value);
+    default:
+      operand satisfies never;
+      return false;
+  }
+}
+
+function isIndependentCalculation(calculation: LengthCalculation): boolean {
+  switch (calculation.type) {
+    case "number":
+      return true;
+    case "value":
+      return isIndependentOperand(calculation.value);
+    case "sum":
+      return calculation.value.every(isIndependentCalculation);
+    case "product":
+      return isIndependentCalculation(calculation.value[1]);
+    case "function":
+      return isIndependentMathFunction(calculation.value);
+    default:
+      calculation satisfies never;
+      return false;
+  }
+}
+
+function isIndependentMathFunction(mathFunction: LengthMathFunction): boolean {
+  switch (mathFunction.type) {
+    case "calc":
+    case "abs":
+    case "sign":
+      return isIndependentCalculation(mathFunction.value);
+    case "min":
+    case "max":
+    case "hypot":
+    case "clamp":
+    case "rem":
+    case "mod":
+      return mathFunction.value.every(isIndependentCalculation);
+    case "round":
+      return (
+        isIndependentCalculation(mathFunction.value[1]) &&
+        isIndependentCalculation(mathFunction.value[2])
+      );
+    default:
+      mathFunction satisfies never;
+      return false;
+  }
+}
+
+function isIndependentTransform(transform: Transform): boolean {
+  switch (transform.type) {
+    case "translate":
+    case "translate3d":
+      return transform.value.every(isIndependentOperand);
+    case "translateX":
+    case "translateY":
+    case "translateZ":
+    case "perspective":
+      return isIndependentOperand(transform.value);
+    case "scale":
+    case "scaleX":
+    case "scaleY":
+    case "scaleZ":
+    case "scale3d":
+    case "rotate":
+    case "rotateX":
+    case "rotateY":
+    case "rotateZ":
+    case "rotate3d":
+    case "skew":
+    case "skewX":
+    case "skewY":
+    case "matrix":
+    case "matrix3d":
+      return true;
+    default:
+      transform satisfies never;
+      return false;
+  }
+}
diff --git a/src/compiler/inline-variables.ts b/src/compiler/inline-variables.ts
index 609760c1..9158c5db 100644
--- a/src/compiler/inline-variables.ts
+++ b/src/compiler/inline-variables.ts
@@ -3,6 +3,7 @@ import type {
   DeclarationBlock,
   StyleSheet,
   TokenOrValue,
+  UnresolvedColor,
 } from "lightningcss";
 
 import type { UniqueVarInfo } from "./compiler.types";
@@ -10,7 +11,18 @@ import type { UniqueVarInfo } from "./compiler.types";
 export function inlineVariables(
   stylesheet: StyleSheet,
   vars: Map<string, UniqueVarInfo>,
+  runtimeVariables: ReadonlySet<string>,
 ) {
+  // Removed before any value flattens, since a value that refers to one is computed where it is declared
+  for (const [name, info] of [...vars]) {
+    if (
+      runtimeVariables.has(name) ||
+      refersToAny(info.value, runtimeVariables)
+    ) {
+      vars.delete(name);
+    }
+  }
+
   for (const [name, info] of [...vars]) {
     if (info.count !== 1) {
       vars.delete(name);
@@ -207,3 +219,58 @@ function flattenVar(
 
   vars.set(name, varInfo);
 }
+
+function refersToAny(
+  value: readonly TokenOrValue[] | null | undefined,
+  names: ReadonlySet<string>,
+): boolean {
+  return value?.some((part) => partRefersToAny(part, names)) ?? false;
+}
+
+function partRefersToAny(
+  part: TokenOrValue,
+  names: ReadonlySet<string>,
+): boolean {
+  switch (part.type) {
+    case "var":
+      return (
+        names.has(part.value.name.ident) ||
+        refersToAny(part.value.fallback, names)
+      );
+    case "env":
+      return refersToAny(part.value.fallback, names);
+    case "function":
+      return refersToAny(part.value.arguments, names);
+    case "unresolved-color":
+      return unresolvedColorRefersToAny(part.value, names);
+    case "token":
+    case "color":
+    case "url":
+    case "length":
+    case "angle":
+    case "time":
+    case "resolution":
+    case "dashed-ident":
+    case "animation-name":
+      return false;
+    default:
+      part satisfies never;
+      return false;
+  }
+}
+
+function unresolvedColorRefersToAny(
+  color: UnresolvedColor,
+  names: ReadonlySet<string>,
+): boolean {
+  switch (color.type) {
+    case "rgb":
+    case "hsl":
+      return refersToAny(color.alpha, names);
+    case "light-dark":
+      return refersToAny(color.light, names) || refersToAny(color.dark, names);
+    default:
+      color satisfies never;
+      return false;
+  }
+}
diff --git a/src/compiler/selector-builder.ts b/src/compiler/selector-builder.ts
index 6787c0ca..c1da24ab 100644
--- a/src/compiler/selector-builder.ts
+++ b/src/compiler/selector-builder.ts
@@ -593,7 +593,7 @@ function isRootVariableSelector([first, ...rest]: Selector) {
   );
 }
 
-function isUniversalSelector([first, second]: Selector) {
+export function isUniversalSelector([first, second]: Selector) {
   return first && first.type === "universal" && !second;
 }
 
diff --git a/src/compiler/stylesheet.ts b/src/compiler/stylesheet.ts
index a77fdf89..ca97f07f 100644
--- a/src/compiler/stylesheet.ts
+++ b/src/compiler/stylesheet.ts
@@ -11,6 +11,7 @@ import type {
   CompilerOptions,
   ContainerQuery,
   MediaCondition,
+  PropertyRegistration,
   ReactNativeCssStyleSheet,
   StyleDeclaration,
   StyleDescriptor,
@@ -63,6 +64,7 @@ export class StylesheetBuilder {
       ruleSets: Record<string, StyleRuleSet>;
       rootVariables?: VariableRecord;
       universalVariables?: VariableRecord;
+      propertyRegistrations?: Record<string, PropertyRegistration>;
       animations?: AnimationRecord;
       rem: number;
       ruleOrder: number;
@@ -173,6 +175,10 @@ export class StylesheetBuilder {
       );
     }
 
+    if (this.shared.propertyRegistrations) {
+      stylesheetOptions.vp = Object.values(this.shared.propertyRegistrations);
+    }
+
     if (this.shared.animations) {
       stylesheetOptions.k = Object.entries(this.shared.animations);
     }
@@ -577,10 +583,16 @@ export class StylesheetBuilder {
     this.ruleTemplate.cq.push(query);
   }
 
-  addRootVariable(name: string, value: StyleDescriptor) {
-    this.shared.rootVariables ??= {};
-    this.shared.rootVariables[name] ??= [];
-    this.shared.rootVariables[name].push([value]);
+  registerProperty(
+    name: string,
+    inherits: boolean,
+    initialValue: StyleDescriptor,
+  ) {
+    this.shared.propertyRegistrations ??= {};
+    this.shared.propertyRegistrations[name] =
+      initialValue === undefined
+        ? [name, inherits]
+        : [name, inherits, initialValue];
   }
 
   newAnimationFrames(name: string) {
diff --git a/src/jest/index.ts b/src/jest/index.ts
index a8d249f5..9647447f 100644
--- a/src/jest/index.ts
+++ b/src/jest/index.ts
@@ -4,6 +4,7 @@ import { inspect } from "node:util";
 
 import { compile, type CompilerOptions } from "react-native-css/compiler";
 import { StyleCollection } from "react-native-css/native";
+import { resetVariableRegistries } from "react-native-css/native-internal";
 
 import { colorScheme, dimensions } from "../native/reactivity";
 
@@ -20,6 +21,7 @@ export const testID = "react-native-css";
 
 beforeEach(() => {
   StyleCollection.styles.clear();
+  resetVariableRegistries();
   dimensions.set(Dimensions.get("window"));
   Appearance.setColorScheme("unspecified");
   colorScheme.set(null);
diff --git a/src/native-internal/root.ts b/src/native-internal/root.ts
index 520c0833..a9855036 100644
--- a/src/native-internal/root.ts
+++ b/src/native-internal/root.ts
@@ -1,6 +1,7 @@
 import { Platform, PlatformColor } from "react-native";
 
 import type { StyleDescriptor, VariableValue } from "react-native-css/compiler";
+import { isDeepEqual } from "react-native-css/utilities";
 
 import { testMediaQuery } from "../native/conditions/media-query";
 import { family, observable, type Observable } from "../native/reactivity";
@@ -29,27 +30,40 @@ const rootVariableFamily = () => {
   });
 };
 
+type RootVariableRegistry = ReturnType<typeof rootVariableFamily>;
+
+// Static, since the compiler records only the @property rules no condition wraps
+const registeredInitialValueFamily = () => {
+  return family<string, Observable<StyleDescriptor>>(() =>
+    observable<StyleDescriptor>(undefined, isDeepEqual),
+  );
+};
+
+const registeredInheritanceFamily = () => {
+  return family<string, Observable<boolean>>(() => observable(true));
+};
+
 interface RootVariableRegistries {
-  root: ReturnType<typeof rootVariableFamily>;
-  universal: ReturnType<typeof rootVariableFamily>;
+  root: RootVariableRegistry;
+  universal: RootVariableRegistry;
 }
 
 declare global {
   var __react_native_css_root_variable_registries:
     | RootVariableRegistries
     | undefined;
+  var __react_native_css_registered_initial_values:
+    | ReturnType<typeof registeredInitialValueFamily>
+    | undefined;
+  var __react_native_css_registered_inheritance:
+    | ReturnType<typeof registeredInheritanceFamily>
+    | undefined;
 }
 
-// Seeded with the registries, so a copy that loads after the stylesheet inject keeps the project's rem
-function createRootVariableRegistries(): RootVariableRegistries {
-  const registries: RootVariableRegistries = {
-    root: rootVariableFamily(),
-    universal: rootVariableFamily(),
-  };
-
-  registries.root("__rn-css-rem").set([[14]]);
+function seedRootRegistry(root: RootVariableRegistry) {
+  root("__rn-css-rem").set([[14]]);
   // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-  registries.root("__rn-css-color").set([
+  root("__rn-css-color").set([
     [
       Platform.OS === "ios"
         ? PlatformColor("label", "labelColor")
@@ -57,6 +71,16 @@ function createRootVariableRegistries(): RootVariableRegistries {
     ],
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
   ] as any);
+}
+
+// Seeded with the registries, so a copy that loads after the stylesheet inject keeps the project's rem
+function createRootVariableRegistries(): RootVariableRegistries {
+  const registries: RootVariableRegistries = {
+    root: rootVariableFamily(),
+    universal: rootVariableFamily(),
+  };
+
+  seedRootRegistry(registries.root);
 
   return registries;
 }
@@ -69,3 +93,25 @@ export const rootVariables =
   globalThis.__react_native_css_root_variable_registries.root;
 export const universalVariables =
   globalThis.__react_native_css_root_variable_registries.universal;
+
+// Pinned to globalThis, since Metro can load two copies of this module and StyleCollection injects through one
+globalThis.__react_native_css_registered_initial_values ??=
+  registeredInitialValueFamily();
+globalThis.__react_native_css_registered_inheritance ??=
+  registeredInheritanceFamily();
+
+export const registeredInitialValues =
+  globalThis.__react_native_css_registered_initial_values;
+
+export const registeredInheritance =
+  globalThis.__react_native_css_registered_inheritance;
+
+// Clearing suffices between tests, where nothing stays mounted to strand
+export function resetVariableRegistries() {
+  rootVariables.clear();
+  universalVariables.clear();
+  registeredInitialValues.clear();
+  registeredInheritance.clear();
+
+  seedRootRegistry(rootVariables);
+}
diff --git a/src/native-internal/style-collection.ts b/src/native-internal/style-collection.ts
index 21a296a6..8f1bb4f2 100644
--- a/src/native-internal/style-collection.ts
+++ b/src/native-internal/style-collection.ts
@@ -5,6 +5,7 @@ import type {
   ReactNativeCssStyleSheet,
   StyleRuleSet,
 } from "react-native-css/compiler";
+import { isDeepEqual } from "react-native-css/utilities";
 
 import { DEFAULT_CONTAINER_NAME } from "../native/conditions/container-query";
 import {
@@ -14,9 +15,19 @@ import {
   type Observable,
   type VariableContextValue,
 } from "../native/reactivity";
-import { rootVariables, universalVariables } from "./root";
-
-export { rootVariables, universalVariables };
+import {
+  registeredInheritance,
+  registeredInitialValues,
+  rootVariables,
+  universalVariables,
+} from "./root";
+
+export {
+  registeredInheritance,
+  registeredInitialValues,
+  rootVariables,
+  universalVariables,
+};
 
 interface StyleCollectionType {
   styles: ReturnType<typeof family<string, Observable<StyleRuleSet>>>;
@@ -95,6 +106,12 @@ globalThis.__react_native_css_style_collection ??= {
       }
     }
 
+    // Added by name like vr and vu, since Metro injects each CSS file apart and a registration holds across them
+    for (const [name, inherits, initialValue] of options.vp ?? []) {
+      registeredInheritance(name).set(inherits);
+      registeredInitialValues(name).set(initialValue);
+    }
+
     for (const effect of observableBatch.current) {
       effect.run();
     }
@@ -104,45 +121,3 @@ globalThis.__react_native_css_style_collection ??= {
 };
 
 export const StyleCollection = globalThis.__react_native_css_style_collection;
-
-function isDeepEqual(a: unknown, b: unknown): boolean {
-  const aArray = Array.isArray(a);
-  const bArray = Array.isArray(b);
-  const requiresKeyComparison =
-    typeof a === "object" && typeof b === "object" && aArray === bArray;
-
-  // Only compare keys when both are an object or array
-  // This does not account for complex types like Date/Regex, because we don't use them
-  if (!requiresKeyComparison) return a === b;
-
-  // Make either are not null
-  if (!a || !b) {
-    return a === b;
-  }
-
-  // Shortcut for arrays
-  if (aArray && bArray && a.length !== b.length) {
-    return false;
-  }
-
-  // Compare a to b
-  for (const key in a) {
-    if (
-      !isDeepEqual(
-        (a as Record<string, unknown>)[key],
-        (b as Record<string, unknown>)[key],
-      )
-    ) {
-      return false;
-    }
-  }
-
-  // Compare b to a
-  for (const key in b) {
-    if (!(key in a)) {
-      return false;
-    }
-  }
-
-  return true;
-}
diff --git a/src/native/conditions/guards.ts b/src/native/conditions/guards.ts
index d3c9dd84..4edd6007 100644
--- a/src/native/conditions/guards.ts
+++ b/src/native/conditions/guards.ts
@@ -1,4 +1,7 @@
 /* eslint-disable */
+import type { StyleDescriptor } from "react-native-css/compiler";
+import { registeredInheritance } from "react-native-css/native-internal";
+
 import type { ComponentState } from "../react/useNativeCss";
 import type {
   ContainerContextValue,
@@ -8,7 +11,8 @@ import type {
 export type RenderGuard =
   | ["a", string, any]
   | ["d", string, any]
-  | ["v", string, any]
+  | ["v", string, StyleDescriptor]
+  | ["n", string, StyleDescriptor]
   | ["c", string, WeakKey];
 
 export function testGuards(
@@ -33,10 +37,18 @@ export function testGuards(
         // Variables
         result = inheritedVariables[guard[1]] !== guard[2];
         break;
+      case "n":
+        // A non-inheriting variable's value counts only once a later registration lets it inherit
+        result =
+          registeredInheritance(guard[1]).get() &&
+          inheritedVariables[guard[1]] !== guard[2];
+        break;
       case "c":
         // Containers
         result = inheritedContainers[guard[1]] !== guard[2];
         break;
+      default:
+        guard satisfies never;
     }
 
     return result;
diff --git a/src/native/react/rules.ts b/src/native/react/rules.ts
index e0fe8d1a..551ce612 100644
--- a/src/native/react/rules.ts
+++ b/src/native/react/rules.ts
@@ -18,6 +18,7 @@ import {
   type VariableContextValue,
 } from "../reactivity";
 import { stylesFamily } from "../styles";
+import { substituteOwnReferences } from "../styles/variables";
 import type { ComponentState, Config } from "./useNativeCss";
 
 export const INLINE_RULE_SYMBOL = Symbol("react-native-css.inlineRule");
@@ -41,6 +42,8 @@ export function updateRules(
   let usesVariables = false;
 
   let variables: VariableContextValue | undefined;
+  let ruleVariableNames: Set<string> | undefined;
+  let publishedChanged = false;
   let containers: ContainerContextValue | undefined;
   const inlineVariables = new Set<InlineVariable>();
 
@@ -135,8 +138,10 @@ export function updateRules(
           variables = { ...inheritedVariables };
         }
 
+        ruleVariableNames ??= new Set();
         for (const v of rule.v) {
           variables![v[0]] = v[1];
+          ruleVariableNames.add(v[0]);
         }
       }
 
@@ -233,6 +238,16 @@ export function updateRules(
       );
     }
 
+    if (variables && ruleVariableNames) {
+      publishedChanged = substituteOwnReferences(
+        variables,
+        ruleVariableNames,
+        inlineVariables,
+        state.variables,
+        state.ruleEffectGetter,
+      );
+    }
+
     for (const variable of inlineVariables) {
       rules.add(variable);
     }
@@ -246,12 +261,18 @@ export function updateRules(
   guards.push(...stylesObs.get().guards);
 
   // If these are the same styles with no inline variables, we can skip the update
-  if (state.stylesObs === stylesObs && !inlineVariables.size) {
+  if (
+    state.stylesObs === stylesObs &&
+    !inlineVariables.size &&
+    !publishedChanged
+  ) {
     return state;
   }
 
   // Remove this component from the old observer
-  state.stylesObs?.unsubscribe(state.styleEffect);
+  if (state.stylesObs !== stylesObs) {
+    state.stylesObs?.unsubscribe(state.styleEffect);
+  }
 
   return {
     ...state,
diff --git a/src/native/styles/variables.ts b/src/native/styles/variables.ts
index 0b785645..839b2ff2 100644
--- a/src/native/styles/variables.ts
+++ b/src/native/styles/variables.ts
@@ -1,11 +1,25 @@
-import type { StyleDescriptor, StyleFunction } from "react-native-css/compiler";
+import type {
+  InlineVariable,
+  StyleDescriptor,
+  StyleFunction,
+} from "react-native-css/compiler";
 import {
+  registeredInheritance,
+  registeredInitialValues,
   rootVariables,
   universalVariables,
 } from "react-native-css/native-internal";
-import { isStyleDescriptorArray } from "react-native-css/utilities";
+import {
+  isDeepEqual,
+  isStyleDescriptorArray,
+  isStyleFunction,
+} from "react-native-css/utilities";
 
-import { VAR_SYMBOL, type Getter } from "../reactivity";
+import {
+  VAR_SYMBOL,
+  type Getter,
+  type VariableContextValue,
+} from "../reactivity";
 import type { ResolveValueOptions, SimpleResolveValue } from "./resolve";
 
 export function varResolver(
@@ -22,35 +36,19 @@ export function varResolver(
     variableCycles = (options.variableCycles ??= new Set()),
   } = options;
 
-  const args = fn[2];
-
-  let name: string | undefined;
-  let fallback: StyleDescriptor | undefined;
-
-  if (typeof args === "string") {
-    name = args;
-  } else {
-    // Fallbacks are substituted only when needed, after reading the variable.
-    if (isStyleDescriptorArray(args)) {
-      name = args[0] as string;
-      fallback = args[1];
-    }
-  }
-
-  if (typeof name !== "string") {
+  const name = variableName(fn[2]);
+  if (name === undefined) {
     return;
   }
 
+  // Fallbacks are substituted only when needed, after reading the variable.
+  const fallback = variableFallback(fn[2]);
+
   if (variableCycles.has(name)) return resolve(fallback);
 
-  // Share the active resolution path with recursive calls. Mark only the
-  // actual cycle, so a dependent variable can still use its own fallback.
+  // Share the active resolution path with recursive calls.
   if (variableHistory.has(name)) {
-    let inCycle = false;
-    for (const dependency of variableHistory) {
-      if (dependency === name) inCycle = true;
-      if (inCycle) variableCycles.add(dependency);
-    }
+    markCycle(variableHistory, name, variableCycles);
     return;
   }
 
@@ -76,14 +74,42 @@ export function varResolver(
       return value;
     }
 
+    // An ancestor's variables and :root reach an element only by inheritance, which a non-inheriting registration switches off
     // Guards retain the ancestor's raw descriptor, matching the context value.
     if (name in variables) {
-      renderGuards?.push(["v", name, variables[name]]);
-      value = resolve(variables[name]);
-      return variableCycles.has(name) ? resolve(fallback) : value;
+      if (inherits(name, get)) {
+        renderGuards?.push(["v", name, variables[name]]);
+        value = resolve(variables[name]);
+        // An ancestor's guaranteed-invalid value inherits as such, so the reader takes its own fallback
+        return value === undefined || variableCycles.has(name)
+          ? resolve(fallback)
+          : value;
+      }
+
+      renderGuards?.push(["n", name, variables[name]]);
+    }
+
+    const rootValue = get(rootVariables(name));
+    if (rootValue !== undefined && inherits(name, get)) {
+      value = resolve(
+        Array.isArray(rootValue)
+          ? substituteOwnValues(
+              rootValue,
+              (reference) => get(rootVariables(reference)),
+              get,
+            )
+          : rootValue,
+      );
+      if (variableCycles.has(name)) return resolve(fallback);
+      if (value !== undefined) {
+        options.inlineVariables ??= { [VAR_SYMBOL]: "inline" };
+        options.inlineVariables[name] = value;
+        return value;
+      }
     }
 
-    value = resolve(get(rootVariables(name)));
+    // A registered initial value applies only where no declaration reaches the element
+    value = resolve(get(registeredInitialValues(name)));
     if (variableCycles.has(name)) return resolve(fallback);
     if (value !== undefined) {
       options.inlineVariables ??= { [VAR_SYMBOL]: "inline" };
@@ -96,3 +122,163 @@ export function varResolver(
     variableHistory.delete(name);
   }
 }
+
+function inherits(name: string, get: Getter) {
+  return get(registeredInheritance(name));
+}
+
+// A value that inherits is computed where it is declared, so its references to non-inheriting properties take that scope's own values
+function substituteOwnValues(
+  value: StyleDescriptor,
+  ownValue: (name: string) => StyleDescriptor,
+  get: Getter,
+  history = new Set<string>(),
+  cycles = new Set<string>(),
+): StyleDescriptor {
+  if (!Array.isArray(value)) {
+    return value;
+  }
+
+  const substitute = (descriptor: StyleDescriptor) =>
+    substituteOwnValues(descriptor, ownValue, get, history, cycles);
+
+  if (!isStyleFunction(value)) {
+    let substituted: StyleDescriptor[] | undefined;
+    value.forEach((item, index) => {
+      const substitutedItem = substitute(item);
+      if (substitutedItem !== item) {
+        substituted ??= [...value];
+        substituted[index] = substitutedItem;
+      }
+    });
+    return substituted ?? value;
+  }
+
+  const name = value[1] === "var" ? variableName(value[2]) : undefined;
+
+  if (name === undefined) {
+    const substitutedArguments = substitute(value[2]);
+    return substitutedArguments === value[2]
+      ? value
+      : withArguments(value, substitutedArguments);
+  }
+
+  const fallback = variableFallback(value[2]);
+
+  if (inherits(name, get)) {
+    const substitutedFallback = substitute(fallback);
+    return substitutedFallback === fallback
+      ? value
+      : withArguments(value, [name, substitutedFallback]);
+  }
+
+  if (cycles.has(name)) {
+    return substitute(fallback);
+  }
+
+  if (history.has(name)) {
+    markCycle(history, name, cycles);
+    return;
+  }
+
+  history.add(name);
+  try {
+    const own = substitute(
+      ownValue(name) ??
+        get(universalVariables(name)) ??
+        get(registeredInitialValues(name)),
+    );
+    return own === undefined || cycles.has(name) ? substitute(fallback) : own;
+  } finally {
+    history.delete(name);
+  }
+}
+
+// Returns whether a value the element publishes differs from the one it published last
+export function substituteOwnReferences(
+  variables: VariableContextValue,
+  ruleVariableNames: ReadonlySet<string>,
+  inlineVariables: ReadonlySet<InlineVariable>,
+  previous: Readonly<VariableContextValue> | undefined,
+  get: Getter,
+): boolean {
+  // Only inheriting values are rewritten, so a non-inheriting one still reads as declared
+  const ownValue = (name: string) =>
+    ruleVariableNames.has(name) || declaresInline(inlineVariables, name)
+      ? variables[name]
+      : undefined;
+
+  let changed = false;
+
+  // An inline vars() value is a value, never a reference, so only the rules' variables need rewriting
+  for (const name of ruleVariableNames) {
+    // Read without subscribing, so a later flip of the element's own name reaches this publication when the element next updates
+    if (registeredInheritance(name).get()) {
+      const declared = variables[name];
+      const value = substituteOwnValues(declared, ownValue, get);
+
+      if (value !== declared) {
+        // The previous descriptor keeps descendants' guards holding while nothing changed
+        variables[name] =
+          previous && isDeepEqual(previous[name], value)
+            ? previous[name]
+            : value;
+      }
+    }
+
+    changed ||= previous?.[name] !== variables[name];
+  }
+
+  return changed;
+}
+
+function declaresInline(
+  inlineVariables: ReadonlySet<InlineVariable>,
+  name: string,
+) {
+  for (const inlineVariable of inlineVariables) {
+    if (name in inlineVariable) {
+      return true;
+    }
+  }
+  return false;
+}
+
+function withArguments(
+  styleFunction: StyleFunction,
+  functionArguments: StyleDescriptor,
+): StyleFunction {
+  return styleFunction.length === 4
+    ? [styleFunction[0], styleFunction[1], functionArguments, styleFunction[3]]
+    : [styleFunction[0], styleFunction[1], functionArguments];
+}
+
+function variableName(variableArguments: StyleDescriptor): string | undefined {
+  if (typeof variableArguments === "string") {
+    return variableArguments;
+  }
+
+  return isStyleDescriptorArray(variableArguments) &&
+    typeof variableArguments[0] === "string"
+    ? variableArguments[0]
+    : undefined;
+}
+
+function variableFallback(variableArguments: StyleDescriptor): StyleDescriptor {
+  return isStyleDescriptorArray(variableArguments)
+    ? variableArguments[1]
+    : undefined;
+}
+
+// Marks only the actual cycle, so a variable that depends on it can still use its own fallback
+function markCycle(
+  history: ReadonlySet<string>,
+  name: string,
+  cycles: Set<string>,
+) {
+  let inCycle = false;
+  for (const dependency of history) {
+    if (dependency === name) inCycle = true;
+    if (inCycle) cycles.add(dependency);
+  }
+}
diff --git a/src/utilities/equality.ts b/src/utilities/equality.ts
new file mode 100644
index 00000000..bd1a6d51
--- /dev/null
+++ b/src/utilities/equality.ts
@@ -0,0 +1,41 @@
+export function isDeepEqual(a: unknown, b: unknown): boolean {
+  const aArray = Array.isArray(a);
+  const bArray = Array.isArray(b);
+  const requiresKeyComparison =
+    typeof a === "object" && typeof b === "object" && aArray === bArray;
+
+  // Only compare keys when both are an object or array
+  // This does not account for complex types like Date/Regex, because we don't use them
+  if (!requiresKeyComparison) return a === b;
+
+  // Make either are not null
+  if (!a || !b) {
+    return a === b;
+  }
+
+  // Shortcut for arrays
+  if (aArray && bArray && a.length !== b.length) {
+    return false;
+  }
+
+  // Compare a to b
+  for (const key in a) {
+    if (
+      !isDeepEqual(
+        (a as Record<string, unknown>)[key],
+        (b as Record<string, unknown>)[key],
+      )
+    ) {
+      return false;
+    }
+  }
+
+  // Compare b to a
+  for (const key in b) {
+    if (!(key in a)) {
+      return false;
+    }
+  }
+
+  return true;
+}
diff --git a/src/utilities/index.ts b/src/utilities/index.ts
index 0c95da63..a421c7b6 100644
--- a/src/utilities/index.ts
+++ b/src/utilities/index.ts
@@ -1,3 +1,4 @@
+export * from "./equality";
 export * from "./specificity";
 export * from "./style-descriptor";
 export * from "./dot-notation.types";