chore: move native tests

src/runtime/native/__tests__/keywords.test.tsx → src/__tests__/native/keywords.test.tsx

@@ -2,8 +2,7 @@ import { View } from "react-native";
 
 import { renderHook } from "@testing-library/react-native";
 import { registerCSS } from "react-native-css/jest";
-
-import { useNativeCss } from "../react/useNativeCss";
+import { useNativeCss } from "react-native-css/runtime/native";
 
 test("unset", () => {
   registerCSS(`.my-class { background-color: unset; }`);

src/runtime/native/__tests__/media-query.test.tsx → src/__tests__/native/media-query.test.tsx

@@ -3,9 +3,9 @@ import { PixelRatio } from "react-native";
 import { act, render, screen } from "@testing-library/react-native";
 import { View } from "react-native-css/components/View";
 import { registerCSS, testID } from "react-native-css/jest";
+import { colorScheme } from "react-native-css/runtime";
 
-import { colorScheme } from "../api";
-import { dimensions } from "../reactivity";
+import { dimensions } from "../../runtime/native/reactivity";
 
 jest.mock("react-native", () => {
   const RN = jest.requireActual("react-native");
@@ -105,10 +105,7 @@ test("width (range)", () => {
   });
 
   act(() => {
-    dimensions.set({
-      ...dimensions.get(),
-      width: 500,
-    });
+    dimensions.set({ ...dimensions.get(), width: 500 });
   });
 
   expect(component.props.style).toStrictEqual({

src/runtime/native/__tests__/selectors.test.tsx → src/__tests__/native/selectors.test.tsx

@@ -1,8 +1,7 @@
 import { act, render, screen } from "@testing-library/react-native";
 import { View } from "react-native-css/components/View";
 import { registerCSS, testID } from "react-native-css/jest";
-
-import { colorScheme } from "../api";
+import { colorScheme } from "react-native-css/runtime";
 
 test.skip(":is(.dark *)", () => {
   registerCSS(`@cssInterop set darkMode class dark;

src/runtime/native/__tests__/specificity.test.tsx → src/__tests__/native/specificity.test.tsx

@@ -3,8 +3,7 @@ import { StyleSheet, type ViewProps } from "react-native";
 import { fireEvent, render } from "@testing-library/react-native";
 import { Text } from "react-native-css/components/Text";
 import { registerCSS, testID } from "react-native-css/jest";
-
-import { styled } from "../api";
+import { styled } from "react-native-css/runtime";
 
 test("inline styles", () => {
   registerCSS(`.red { background-color: red; }`);

src/runtime/native/__tests__/styled.test.ios.tsx → src/__tests__/native/styled.test.ios.tsx

@@ -2,8 +2,7 @@ import { View } from "react-native";
 
 import { render, screen } from "@testing-library/react-native";
 import { registerCSS, testID } from "react-native-css/jest";
-
-import { styled } from "../api";
+import { styled } from "react-native-css/runtime";
 
 const children = undefined;
 

src/runtime/native/__tests__/units.test.tsx → src/__tests__/native/units.test.tsx

@@ -2,17 +2,17 @@ import { View } from "react-native";
 
 import { act, renderHook } from "@testing-library/react-native";
 import { registerCSS } from "react-native-css/jest";
+import { useNativeCss } from "react-native-css/runtime/native";
 
-import { useNativeCss } from "../react/useNativeCss";
 import {
   dimensions,
   rem,
   VAR_SYMBOL,
   VariableContext,
   vh,
   vw,
-} from "../reactivity";
-import { emVariableName } from "../styles/constants";
+} from "../../runtime/native/reactivity";
+import { emVariableName } from "../../runtime/native/styles/constants";
 
 test("px", () => {
   registerCSS(`.my-class { width: 10px; }`);

src/runtime/native/__tests__/variables.test.tsx → src/__tests__/native/variables.test.tsx

@@ -4,8 +4,7 @@ import type { ViewProps } from "react-native";
 import { render, screen } from "@testing-library/react-native";
 import { View } from "react-native-css/components/View";
 import { registerCSS, testID } from "react-native-css/jest";
-
-import { styled } from "../api";
+import { styled } from "react-native-css/runtime";
 
 test("inline variable", () => {
   registerCSS(`.my-class { width: var(--my-var); --my-var: 10px; }`);

src/runtime/native/__tests__/vars.test.tsx → src/__tests__/native/vars.test.tsx

@@ -1,8 +1,7 @@
 import { render, screen } from "@testing-library/react-native";
 import { View } from "react-native-css/components/View";
 import { registerCSS, testID } from "react-native-css/jest";
-
-import { vars } from "../api";
+import { vars } from "react-native-css/runtime";
 
 test("vars", () => {
   registerCSS(

src/__tests__/vendor/tailwind/_tailwind.tsx

@@ -9,11 +9,10 @@ import {
   type RenderOptions,
 } from "@testing-library/react-native";
 import postcss from "postcss";
+import type { compile } from "react-native-css/compiler";
+import { View } from "react-native-css/components";
 import { registerCSS } from "react-native-css/jest";
 
-import type { compile } from "../../../compiler";
-import { View } from "../../../components";
-
 const testID = "tailwind";
 
 export type NativewindRenderOptions = RenderOptions & {

src/jest/index.ts

@@ -2,9 +2,9 @@ import { Appearance, Dimensions } from "react-native";
 
 import { inspect } from "node:util";
 
+import { compile, type CompilerOptions } from "react-native-css/compiler";
 import { StyleCollection } from "react-native-css/style-collection";
 
-import { compile, type CompilerOptions } from "../compiler";
 import { colorScheme, dimensions, rem } from "../runtime/native/reactivity";
 
 declare global {

src/runtime/native/api.ts

@@ -23,6 +23,8 @@ import { resolveValue } from "./styles/resolve";
 
 export { StyleCollection } from "react-native-css/style-collection";
 
+export { useNativeCss };
+
 /**
  * Generates a new Higher-Order component the wraps the base component and applies the styles.
  * This is added to the `interopComponents` map so that it can be used in the `wrapJSX` function

src/runtime/native/reactivity.ts

@@ -209,6 +209,18 @@ export const vh = observable<number>(
   (read, value) => value ?? read(dimensions)?.height,
 );
 
+Dimensions.addEventListener("change", ({ window }) => {
+  observableBatch.current = new Set();
+  vw.set(window.width);
+  vh.set(window.height);
+
+  for (const effect of observableBatch.current) {
+    effect.run();
+  }
+
+  observableBatch.current = undefined;
+});
+
 /** Color Scheme **************************************************************/
 
 export const colorScheme = observable<ColorSchemeName>(

src/runtime/web/api.ts

@@ -66,7 +66,7 @@ export const colorScheme: ColorScheme = {
   },
 };
 
-export function vars(variables: Record<`--${string}`, string | number>) {
+export function vars(variables: Record<string, string | number>) {
   const $variables: Record<string, string> = {};
 
   for (const [key, value] of Object.entries(variables)) {

src/style-collection/index.ts

@@ -2,7 +2,8 @@ import type {
   Animation_V2,
   ReactNativeCssStyleSheet,
   StyleRuleSet,
-} from "../compiler";
+} from "react-native-css/compiler";
+
 import { DEFAULT_CONTAINER_NAME } from "../runtime/native/conditions/container-query";
 import {
   family,