fix: improve public exports

example/metro.config.js

@@ -1,6 +1,6 @@
 const path = require("path");
 const { getDefaultConfig } = require("@expo/metro-config");
-const { withReactNativeCSS } = require("../dist/commonjs/metro");
+const { withReactNativeCSS } = require("react-native-css/metro");
 
 /**
  * Metro configuration
@@ -12,10 +12,6 @@ const config = getDefaultConfig(__dirname);
 
 config.resolver.unstable_enablePackageExports = true;
 
-config.resolver.extraNodeModules = {
-  "react-native-css": path.resolve(__dirname, "../"),
-};
-
 config.resolver.nodeModulesPaths = [
   path.resolve(__dirname, "node_modules"),
   path.resolve(__dirname, "../node_modules"),

example/package.json

@@ -20,6 +20,7 @@
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "react-native": "0.81.1",
+    "react-native-css": "link:../",
     "react-native-reanimated": "4.0.2",
     "react-native-web": "~0.21.1",
     "react-native-worklets": "0.4.1",

example/src/App.tsx

@@ -15,7 +15,7 @@ export default function App() {
           "--custom": "pink",
         }}
       >
-        <View className="bg-[var(--custom,purple)] w-10 h-10" />
+        <View className="bg-[var(--custom,green)] w-10 h-10" />
 
         <CustomView className="bg-[var(--custom,purple)] w-10 h-10" />
       </VariableContextProvider>

package.json

@@ -14,31 +14,6 @@
         "default": "./dist/commonjs/index.js"
       }
     },
-    "./types": {
-      "types": "./types.d.ts"
-    },
-    "./style-collection": {
-      "source": "./src/runtime/native/style-collection/index.ts",
-      "import": {
-        "types": "./dist/typescript/module/src/style-collection/index.d.ts",
-        "default": "./dist/module/style-collection/index.js"
-      },
-      "require": {
-        "types": "./dist/typescript/commonjs/src/style-collection/index.d.ts",
-        "default": "./dist/commonjs/style-collection/index.js"
-      }
-    },
-    "./metro": {
-      "source": "./src/metro/index.ts",
-      "import": {
-        "types": "./dist/typescript/module/src/metro/index.d.ts",
-        "default": "./dist/module/metro/index.js"
-      },
-      "require": {
-        "types": "./dist/typescript/commonjs/src/metro/index.d.ts",
-        "default": "./dist/commonjs/metro/index.js"
-      }
-    },
     "./compiler": {
       "source": "./src/compiler/index.ts",
       "import": {
@@ -50,18 +25,6 @@
         "default": "./dist/commonjs/compiler/index.js"
       }
     },
-    "./jest": {
-      "source": "./src/jest/index.ts",
-      "react-native": "./src/jest/index.ts",
-      "import": {
-        "types": "./dist/typescript/module/src/jest/index.d.ts",
-        "default": "./dist/module/jest/index.js"
-      },
-      "require": {
-        "types": "./dist/typescript/commonjs/src/jest/index.d.ts",
-        "default": "./dist/commonjs/jest/index.js"
-      }
-    },
     "./babel": {
       "source": "./src/babel/index.ts",
       "import": {
@@ -97,14 +60,85 @@
         "default": "./dist/commonjs/components/*.js"
       }
     },
-    "./package.json": "./package.json"
+    "./jest": {
+      "source": "./src/jest/index.ts",
+      "react-native": "./src/jest/index.ts",
+      "import": {
+        "types": "./dist/typescript/module/src/jest/index.d.ts",
+        "default": "./dist/module/jest/index.js"
+      },
+      "require": {
+        "types": "./dist/typescript/commonjs/src/jest/index.d.ts",
+        "default": "./dist/commonjs/jest/index.js"
+      }
+    },
+    "./metro": {
+      "source": "./src/metro/index.ts",
+      "import": {
+        "types": "./dist/typescript/module/src/metro/index.d.ts",
+        "default": "./dist/module/metro/index.js"
+      },
+      "require": {
+        "types": "./dist/typescript/commonjs/src/metro/index.d.ts",
+        "default": "./dist/commonjs/metro/index.js"
+      }
+    },
+    "./native": {
+      "source": "./src/native/index.ts",
+      "import": {
+        "types": "./dist/typescript/module/src/native/index.d.ts",
+        "default": "./dist/module/native/index.js"
+      },
+      "require": {
+        "types": "./dist/typescript/commonjs/src/native/index.d.ts",
+        "default": "./dist/commonjs/native/index.js"
+      }
+    },
+    "./native-internal": {
+      "source": "./src/native-internal/index.ts",
+      "import": {
+        "types": "./dist/typescript/module/src/native-internal/index.d.ts",
+        "default": "./dist/module/native-internal/index.js"
+      },
+      "require": {
+        "types": "./dist/typescript/commonjs/src/native-internal/index.d.ts",
+        "default": "./dist/commonjs/native-internal/index.js"
+      }
+    },
+    "./package.json": "./package.json",
+    "./types": {
+      "types": "./types.d.ts"
+    },
+    "./utilities": {
+      "source": "./src/utilities/index.ts",
+      "import": {
+        "types": "./dist/typescript/module/src/utilities/index.d.ts",
+        "default": "./dist/module/utilities/index.js"
+      },
+      "require": {
+        "types": "./dist/typescript/commonjs/src/utilities/index.d.ts",
+        "default": "./dist/commonjs/utilities/index.js"
+      }
+    },
+    "./web": {
+      "source": "./src/web/index.ts",
+      "import": {
+        "types": "./dist/typescript/module/src/web/index.d.ts",
+        "default": "./dist/module/web/index.js"
+      },
+      "require": {
+        "types": "./dist/typescript/commonjs/src/web/index.d.ts",
+        "default": "./dist/commonjs/web/index.js"
+      }
+    }
   },
   "main": "./dist/commonjs/index.js",
   "module": "./dist/module/index.js",
   "types": "./dist/typescript/commonjs/src/index.d.ts",
   "workspaces": [
     "example",
-    "configs"
+    "configs",
+    "."
   ],
   "scripts": {
     "build": "bob build",

src/__tests__/native/keywords.test.tsx

@@ -2,7 +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-native-css/runtime/native";
+import { useNativeCss } from "react-native-css/native";
 
 test("unset", () => {
   registerCSS(`.my-class { background-color: unset; }`);

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

@@ -5,7 +5,7 @@ import { View } from "react-native-css/components/View";
 import { registerCSS, testID } from "react-native-css/jest";
 import { colorScheme } from "react-native-css/runtime";
 
-import { dimensions } from "../../runtime/native/reactivity";
+import { dimensions } from "../../native/reactivity";
 
 jest.mock("react-native", () => {
   const RN = jest.requireActual("react-native");

src/__tests__/native/units.test.tsx

@@ -2,16 +2,10 @@ 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 { VariableContext } from "react-native-css/style-collection";
-
-import {
-  dimensions,
-  VAR_SYMBOL,
-  vh,
-  vw,
-} from "../../runtime/native/reactivity";
-import { emVariableName } from "../../runtime/native/styles/constants";
+import { useNativeCss, VariableContext } from "react-native-css/native";
+
+import { dimensions, VAR_SYMBOL, vh, vw } from "../../native/reactivity";
+import { emVariableName } from "../../native/styles/constants";
 
 test("px", () => {
   registerCSS(`.my-class { width: 10px; }`);

src/compiler/compiler.types.ts

@@ -5,7 +5,7 @@ import type {
   TokenOrValue,
 } from "lightningcss";
 
-import { VAR_SYMBOL } from "../runtime/native/reactivity";
+import { VAR_SYMBOL } from "../native/reactivity";
 
 export interface CompilerOptions {
   filename?: string;

src/compiler/declarations.ts

@@ -36,7 +36,7 @@ import type {
   UnresolvedColor,
 } from "lightningcss";
 
-import { isStyleFunction } from "../runtime/utils";
+import { isStyleFunction } from "../utilities";
 import type {
   StyleDescriptor,
   StyleFunction,
@@ -2593,16 +2593,17 @@ export function parseEnv(
         case "safe-area-inset-top":
         case "safe-area-inset-right":
         case "safe-area-inset-bottom":
-        case "safe-area-inset-left":
-          return [
-            {},
-            "var",
-            [
-              `--react-native-css-${value.name.value}`,
-              parseUnparsed(value.fallback, builder, value.name.value),
-            ],
-            1,
-          ];
+        case "safe-area-inset-left": {
+          const fallback = parseUnparsed(
+            value.fallback,
+            builder,
+            value.name.value,
+          );
+
+          return fallback
+            ? [{}, "var", [`react-native-css-${value.name.value}`, fallback], 1]
+            : [{}, "var", [`react-native-css-${value.name.value}`], 1];
+        }
         case "viewport-segment-width":
         case "viewport-segment-height":
         case "viewport-segment-top":

src/compiler/pseudo-elements.ts

@@ -1,4 +1,4 @@
-import { isStyleFunction } from "../runtime/utils";
+import { isStyleFunction } from "../utilities";
 import type { StyleDeclaration, StyleRule } from "./compiler.types";
 
 export function modifyRuleForSelection(rule: StyleRule): StyleRule | undefined {

src/compiler/selector-builder.ts

@@ -1,6 +1,6 @@
 import type { AttrOperation, Selector, SelectorList } from "lightningcss";
 
-import { Specificity } from "../runtime/utils";
+import { Specificity } from "../utilities";
 import type {
   AttributeQuery,
   AttrSelectorOperator,

src/compiler/selectors.ts

@@ -1,7 +1,7 @@
 /* eslint-disable */
 import type { Selector, SelectorList } from "lightningcss";
 
-import { Specificity } from "../runtime/utils/specificity";
+import { Specificity } from "../utilities";
 import type {
   AttributeQuery,
   AttrSelectorOperator,

src/compiler/stylesheet.ts

@@ -4,7 +4,7 @@ import {
   isStyleDescriptorArray,
   Specificity,
   specificityCompareFn,
-} from "../runtime/utils";
+} from "../utilities";
 import type {
   AnimationKeyframes,
   AnimationRecord,

src/components/Text.tsx

@@ -4,7 +4,7 @@ import {
   useCssElement,
   type StyledConfiguration,
   type StyledProps,
-} from "../runtime";
+} from "react-native-css/native";
 
 const mapping = {
   className: "style",

src/components/View.tsx

@@ -4,7 +4,7 @@ import {
   useCssElement,
   type StyledConfiguration,
   type StyledProps,
-} from "../runtime";
+} from "react-native-css/native";
 
 const mapping = {
   className: "style",

src/components/react-native-safe-area-context.native.tsx

@@ -1,6 +1,9 @@
 import { useContext, useMemo, type PropsWithChildren } from "react";
 
-import { VariableContext } from "react-native-css/style-collection";
+import {
+  VariableContext,
+  VariableContextProvider,
+} from "react-native-css/native-internal";
 import {
   SafeAreaProvider as OriginalSafeAreaProvider,
   useSafeAreaInsets,
@@ -35,5 +38,7 @@ function SafeAreaEnv({ children }: PropsWithChildren) {
     [parentVars, insets],
   );
 
-  return <VariableContext value={value}>{children}</VariableContext>;
+  return (
+    <VariableContextProvider value={value}>{children}</VariableContextProvider>
+  );
 }

src/jest/index.ts

@@ -3,9 +3,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 { StyleCollection } from "react-native-css/native";
 
-import { colorScheme, dimensions } from "../runtime/native/reactivity";
+import { colorScheme, dimensions } from "../native/reactivity";
 
 declare global {
   /* eslint-disable @typescript-eslint/no-namespace */

src/metro/index.ts

@@ -5,8 +5,11 @@ import { versions } from "node:process";
 import debug from "debug";
 import type { MetroConfig } from "metro-config";
 
-import type { CompilerOptions, ReactNativeCssStyleSheet } from "../compiler";
-import { compile } from "../compiler/compiler";
+import {
+  compile,
+  type CompilerOptions,
+  type ReactNativeCssStyleSheet,
+} from "../compiler";
 import { getNativeInjectionCode, getWebInjectionCode } from "./injection-code";
 import { nativeResolver, webResolver } from "./resolver";
 import { setupTypeScript } from "./typescript";
@@ -97,9 +100,7 @@ export function withReactNativeCSS<
           >();
           const webCSSFiles = new Set<string>();
 
-          const nativeInjectionPath = require.resolve(
-            "../runtime/native/metro",
-          );
+          const nativeInjectionPath = require.resolve("../native/metro");
           const nativeInjectionFilepaths = [
             // CommonJS
             nativeInjectionPath,
@@ -114,7 +115,7 @@ export function withReactNativeCSS<
               .replace(".js", ".ts"),
           ];
 
-          const webInjectionPath = require.resolve("../runtime/web/metro");
+          const webInjectionPath = require.resolve("../web/metro");
           const webInjectionFilepaths = [
             // CommonJS
             webInjectionPath,

src/metro/injection-code.ts

@@ -29,6 +29,6 @@ export function getNativeInjectionCode(
     .join("\n");
 
   return Buffer.from(
-    `import { StyleCollection } from "react-native-css/style-collection";\n${importStatements}\n${contents};export {};`,
+    `import { StyleCollection } from "react-native-css/native-internal";\n${importStatements}\n${contents};export {};`,
   );
 }

src/native-internal/README.md

@@ -0,0 +1,11 @@
+# native-internal
+
+This package is separate from `native` to prevent a circular dependency.
+
+- The `native/index.ts` needs to import the `metro.ts`,
+- `metro.ts` import the `.css` files (as a work around for lazy bundles)
+- `.css` files import the `StyleCollection`
+
+To prevent multiple versions of `StyleCollection` and relative path issues, we created `native-internal` to break the dependency chain.
+
+This package should contain all the singular globals.

src/native-internal/index.ts

@@ -0,0 +1,3 @@
+export * from "./root";
+export * from "./style-collection";
+export * from "./variables";