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";