fix: nested variables set via class rules (#162)

Author: marklawlor

src/__tests__/native/variables.test.tsx

@@ -241,3 +241,33 @@ test("VariableContextProvider", () => {
   const component = screen.getByTestId(testID);
   expect(component.props.style).toStrictEqual({ color: "red" });
 });
+
+test("variable overriding with classes", () => {
+  registerCSS(`
+  :root {
+   --tier-red-500: red;
+   --tier-red-700: red;
+
+   --tier-blue-500: blue;
+   --tier-blue-700: blue;
+  }
+
+  .tier-red {
+    --tier-500: var(--tier-red-500);
+    --tier-700: var(--tier-red-700);
+  }
+
+  .test {
+    color: var(--tier-500)
+  }
+`);
+
+  render(
+    <View className="tier-red">
+      <View testID={testID} className="test" />
+    </View>,
+  );
+
+  const component = screen.getByTestId(testID);
+  expect(component.props.style).toStrictEqual({ color: "red" });
+});

src/runtime/native/styles/variables.ts

@@ -48,7 +48,7 @@ export function varResolver(
 
   if (name in variables) {
     renderGuards?.push(["v", name, variables[name]]);
-    return variables[name];
+    return resolve(variables[name]);
   }
 
   variableHistory.add(name);