fix: circular imports with rootVariables (#75)

Author: marklawlor

src/runtime/native/injection.ts

@@ -7,9 +7,9 @@ import {
   family,
   observable,
   observableBatch,
-  rootVariables,
   type Observable,
 } from "./reactivity";
+import { rootVariables } from "./root";
 
 export function StyleCollection() {
   return null;

src/runtime/native/reactivity.ts

@@ -7,8 +7,7 @@ import {
   type LayoutRectangle,
 } from "react-native";
 
-import type { StyleDescriptor, VariableValue } from "../../compiler";
-import { testMediaQuery } from "./conditions/media-query";
+import type { StyleDescriptor } from "../../compiler";
 
 export type Effect = {
   observers: Set<Effect>;
@@ -190,33 +189,6 @@ export const VariableContext = createContext<VariableContextValue>({
   [VAR_SYMBOL]: true,
 });
 
-const rootVariableFamily = () => {
-  return family<string, Observable<StyleDescriptor, VariableValue[]>>(() => {
-    const obs = observable<StyleDescriptor, VariableValue[]>(
-      (read, variableValue) => {
-        if (!variableValue) return undefined;
-
-        for (const [value, mediaQuery] of variableValue) {
-          if (!mediaQuery) {
-            return value;
-          }
-
-          if (testMediaQuery(mediaQuery, read)) {
-            return value;
-          }
-        }
-
-        return undefined;
-      },
-    );
-
-    return obs;
-  });
-};
-
-export const rootVariables = rootVariableFamily();
-export const universalVariables = rootVariableFamily();
-
 /** Units *********************************************************************/
 
 export const rem = observable(14);

src/runtime/native/root.ts

@@ -0,0 +1,31 @@
+import type { StyleDescriptor, VariableValue } from "react-native-css/compiler";
+
+import { testMediaQuery } from "./conditions/media-query";
+import { family, observable, type Observable } from "./reactivity";
+
+const rootVariableFamily = () => {
+  return family<string, Observable<StyleDescriptor, VariableValue[]>>(() => {
+    const obs = observable<StyleDescriptor, VariableValue[]>(
+      (read, variableValue) => {
+        if (!variableValue) return undefined;
+
+        for (const [value, mediaQuery] of variableValue) {
+          if (!mediaQuery) {
+            return value;
+          }
+
+          if (testMediaQuery(mediaQuery, read)) {
+            return value;
+          }
+        }
+
+        return undefined;
+      },
+    );
+
+    return obs;
+  });
+};
+
+export const rootVariables = rootVariableFamily();
+export const universalVariables = rootVariableFamily();

src/runtime/native/styles/variables.ts

@@ -1,11 +1,7 @@
 import type { StyleDescriptor, StyleFunction } from "../../../compiler";
 import { isStyleDescriptorArray } from "../../utils";
-import {
-  rootVariables,
-  universalVariables,
-  VAR_SYMBOL,
-  type Getter,
-} from "../reactivity";
+import { VAR_SYMBOL, type Getter } from "../reactivity";
+import { rootVariables, universalVariables } from "../root";
 import type { ResolveValueOptions, SimpleResolveValue } from "./resolve";
 
 export function varResolver(