fix: babel compilation

__tests__/tailwindcss/runner/index.tsx

@@ -14,10 +14,8 @@ import {
   TestStyleSheetRuntime,
   TestStyleSheetStoreConstructor,
 } from "../../style-sheet/tests";
-import {
-  isRuntimeFunction,
-  parseString,
-} from "../../../src/style-sheet/style-functions";
+import { parseString } from "../../../src/style-sheet/style-functions";
+import { isRuntimeFunction } from "../../../src/style-sheet/style-function-helpers";
 
 export type Test = [string, TestValues] | [string, StyleRecord, true];
 

src/postcss/serialize.ts

@@ -17,7 +17,7 @@ import {
 import {
   isRuntimeFunction,
   matchRuntimeFunction,
-} from "../style-sheet/style-functions";
+} from "../style-sheet/style-function-helpers";
 import { ExtractedValues } from "./plugin";
 
 export function serializer({

src/style-sheet/color-scheme.ts

@@ -5,35 +5,28 @@ export type ColorSchemeSystem = "light" | "dark" | "system";
 
 export abstract class ColorSchemeStore {
   colorSchemeListeners = new Set<() => void>();
-  colorScheme: ColorSchemeName;
-  colorSchemeSystem: ColorSchemeSystem;
-
-  constructor(colorSchemeSystem?: ColorSchemeSystem) {
-    if (colorSchemeSystem === "system" || colorSchemeSystem === undefined) {
-      this.colorScheme = Appearance.getColorScheme() || "light";
-      this.colorSchemeSystem = "system";
-    } else {
-      this.colorScheme = colorSchemeSystem;
-      this.colorSchemeSystem = colorSchemeSystem;
-    }
+  colorScheme: ColorSchemeName = Appearance.getColorScheme() || "light";
+  colorSchemeSystem: ColorSchemeSystem = "system";
 
+  constructor() {
     if (typeof localStorage !== "undefined") {
+      const isDarkMode = window.matchMedia(
+        "(prefers-color-scheme: dark)"
+      ).matches;
+
       if (
         localStorage.theme === "dark" ||
-        (!("theme" in localStorage) &&
-          window.matchMedia("(prefers-color-scheme: dark)").matches)
+        (!("theme" in localStorage) && isDarkMode)
       ) {
         document.documentElement.classList.add("dark");
+        this.colorScheme = "dark";
       } else {
         document.documentElement.classList.remove("dark");
+        this.colorScheme = "light";
       }
 
       this.subscribeColorScheme(() => {
-        if (this.colorSchemeSystem === "system") {
-          localStorage.removeItem("theme");
-        } else {
-          localStorage.theme = this.colorSchemeSystem;
-        }
+        localStorage.theme = this.colorScheme;
       });
     }
   }

src/style-sheet/style-function-helpers.ts

@@ -0,0 +1,26 @@
+/**
+ * These need to be in a separate file as they are also used by Babel
+ *
+ * The main file imports 'react-native' which needs to be compiled
+ */
+export function isRuntimeFunction(input: string | number) {
+  if (typeof input !== "string") return false;
+
+  return (
+    input === "hairlineWidth()" ||
+    input.startsWith("roundToNearestPixel(") ||
+    input.startsWith("getPixelSizeForLayoutSize(") ||
+    input.startsWith("getFontSizeForLayoutSize(") ||
+    input.startsWith("roundToNearestFontScale(") ||
+    input.startsWith("platformColor(") ||
+    input.startsWith("platform(")
+  );
+}
+
+export function matchRuntimeFunction(
+  input: string
+): [string, string] | [undefined, undefined] {
+  const matches = input.match(/(.+?)\((.*)\)/);
+  if (!matches) return [undefined, undefined];
+  return [matches[1], matches[2]];
+}

src/style-sheet/style-functions.ts

@@ -1,4 +1,8 @@
 import { PixelRatio, Platform, PlatformColor, StyleSheet } from "react-native";
+import {
+  isRuntimeFunction,
+  matchRuntimeFunction,
+} from "./style-function-helpers";
 
 export function parseStyleFunction(
   functionString?: string,
@@ -33,28 +37,6 @@ export function parseStyleFunction(
   throw new Error(`Unknown functionString: ${functionString}`);
 }
 
-export function isRuntimeFunction(input: string | number) {
-  if (typeof input !== "string") return false;
-
-  return (
-    input === "hairlineWidth()" ||
-    input.startsWith("roundToNearestPixel(") ||
-    input.startsWith("getPixelSizeForLayoutSize(") ||
-    input.startsWith("getFontSizeForLayoutSize(") ||
-    input.startsWith("roundToNearestFontScale(") ||
-    input.startsWith("platformColor(") ||
-    input.startsWith("platform(")
-  );
-}
-
-export function matchRuntimeFunction(
-  input: string
-): [string, string] | [undefined, undefined] {
-  const matches = input.match(/(.+?)\((.*)\)/);
-  if (!matches) return [undefined, undefined];
-  return [matches[1], matches[2]];
-}
-
 export function parseString<T extends (value: string) => S, S>(
   input: string,
   callback: T