fix(native): re-resolve a :root / fallback var() when an ancestor later provides it

src/__tests__/native/variables.test.tsx

@@ -242,6 +242,60 @@ test("VariableContextProvider", () => {
   expect(component.props.style).toStrictEqual({ color: "red" });
 });
 
+test("VariableContextProvider later provides a :root variable", () => {
+  registerCSS(
+    `
+    :root { --my-var: red; }
+    .test { color: var(--my-var); }
+  `,
+    { inlineVariables: false },
+  );
+
+  const child = <View testID={testID} className="test" />;
+
+  const { rerender } = render(
+    <VariableContextProvider value={{}}>{child}</VariableContextProvider>,
+  );
+
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({
+    color: "red",
+  });
+
+  rerender(
+    <VariableContextProvider value={{ "--my-var": "blue" }}>
+      {child}
+    </VariableContextProvider>,
+  );
+
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({
+    color: "blue",
+  });
+});
+
+test("VariableContextProvider later provides a variable with a fallback", () => {
+  registerCSS(`.test { color: var(--my-var, red); }`);
+
+  const child = <View testID={testID} className="test" />;
+
+  const { rerender } = render(
+    <VariableContextProvider value={{}}>{child}</VariableContextProvider>,
+  );
+
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({
+    color: "red",
+  });
+
+  rerender(
+    <VariableContextProvider value={{ "--my-var": "blue" }}>
+      {child}
+    </VariableContextProvider>,
+  );
+
+  expect(screen.getByTestId(testID).props.style).toStrictEqual({
+    color: "blue",
+  });
+});
+
 test("variable overriding with classes", () => {
   registerCSS(`
   :root {

src/native/styles/variables.ts

@@ -83,6 +83,10 @@ export function varResolver(
       return variableCycles.has(name) ? resolve(fallback) : value;
     }
 
+    // Guard the absence too, so an ancestor that later provides the variable
+    // replaces the :root / fallback value.
+    renderGuards?.push(["v", name, undefined]);
+
     value = resolve(get(rootVariables(name)));
     if (variableCycles.has(name)) return resolve(fallback);
     if (value !== undefined) {