react-native-css 0.0.0-nightly.008d479

package/src/components/index.cts

@@ -0,0 +1,263 @@
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-require-imports */
+
+module.exports = {
+  get ActivityIndicator() {
+    return require("./ActivityIndicator").ActivityIndicator;
+  },
+  get Button() {
+    return require("./Button").Button;
+  },
+  get FlatList() {
+    return require("./FlatList").FlatList;
+  },
+  get Image() {
+    return require("./Image").Image;
+  },
+  get ImageBackground() {
+    return require("./ImageBackground").ImageBackground;
+  },
+  get KeyboardAvoidingView() {
+    return require("./KeyboardAvoidingView").KeyboardAvoidingView;
+  },
+  get Pressable() {
+    return require("./Pressable").Pressable;
+  },
+  get ScrollView() {
+    return require("./ScrollView").ScrollView;
+  },
+  get Switch() {
+    return require("./Switch").Switch;
+  },
+  get Text() {
+    return require("./Text").Text;
+  },
+  get TextInput() {
+    return require("./TextInput").TextInput;
+  },
+  get TouchableHighlight() {
+    return require("./TouchableHighlight").TouchableHighlight;
+  },
+  get TouchableOpacity() {
+    return require("./TouchableOpacity").TouchableOpacity;
+  },
+  get View() {
+    return require("./View").View;
+  },
+  get VirtualizedList() {
+    return require("./VirtualizedList").VirtualizedList;
+  },
+
+  /**
+   * We need to return
+   */
+  get DrawerLayoutAndroid() {
+    return require("react-native").DrawerLayoutAndroid;
+  },
+  get InputAccessoryView() {
+    return require("react-native").InputAccessoryView;
+  },
+  get experimental_LayoutConformance() {
+    return require("react-native").experimental_LayoutConformance;
+  },
+  get Modal() {
+    return require("react-native").Modal;
+  },
+  get ProgressBarAndroid() {
+    return require("react-native").ProgressBarAndroid;
+  },
+  get RefreshControl() {
+    return require("react-native").RefreshControl;
+  },
+  get SafeAreaView() {
+    return require("react-native").SafeAreaView;
+  },
+  get SectionList() {
+    return require("react-native").SectionList;
+  },
+  get StatusBar() {
+    return require("react-native").StatusBar;
+  },
+  get unstable_TextAncestorContext() {
+    return require("react-native").unstable_TextAncestorContext;
+  },
+  get Touchable() {
+    return require("react-native").Touchable;
+  },
+  get TouchableNativeFeedback() {
+    return require("react-native").TouchableNativeFeedback;
+  },
+  get TouchableWithoutFeedback() {
+    return require("react-native").TouchableWithoutFeedback;
+  },
+  get VirtualizedSectionList() {
+    return require("react-native").VirtualizedSectionList;
+  },
+  get unstable_VirtualView() {
+    return require("react-native").unstable_VirtualView;
+  },
+  get AccessibilityInfo() {
+    return require("react-native").AccessibilityInfo;
+  },
+  get ActionSheetIOS() {
+    return require("react-native").ActionSheetIOS;
+  },
+  get Alert() {
+    return require("react-native").Alert;
+  },
+  get Animated() {
+    return require("react-native").Animated;
+  },
+  get Appearance() {
+    return require("react-native").Appearance;
+  },
+  get AppRegistry() {
+    return require("react-native").AppRegistry;
+  },
+  get AppState() {
+    return require("react-native").AppState;
+  },
+  get BackHandler() {
+    return require("react-native").BackHandler;
+  },
+  get Clipboard() {
+    return require("react-native").Clipboard;
+  },
+  get codegenNativeCommands() {
+    return require("react-native").codegenNativeCommands;
+  },
+  get codegenNativeComponent() {
+    return require("react-native").codegenNativeComponent;
+  },
+  get DeviceEventEmitter() {
+    return require("react-native").DeviceEventEmitter;
+  },
+  get DeviceInfo() {
+    return require("react-native").DeviceInfo;
+  },
+  get DevMenu() {
+    return require("react-native").DevMenu;
+  },
+  get DevSettings() {
+    return require("react-native").DevSettings;
+  },
+  get Dimensions() {
+    return require("react-native").Dimensions;
+  },
+  get DynamicColorIOS() {
+    return require("react-native").DynamicColorIOS;
+  },
+  get Easing() {
+    return require("react-native").Easing;
+  },
+  get findNodeHandle() {
+    return require("react-native").findNodeHandle;
+  },
+  get I18nManager() {
+    return require("react-native").I18nManager;
+  },
+  get InteractionManager() {
+    return require("react-native").InteractionManager;
+  },
+  get Keyboard() {
+    return require("react-native").Keyboard;
+  },
+  get LayoutAnimation() {
+    return require("react-native").LayoutAnimation;
+  },
+  get Linking() {
+    return require("react-native").Linking;
+  },
+  get LogBox() {
+    return require("react-native").LogBox;
+  },
+  get NativeAppEventEmitter() {
+    return require("react-native").NativeAppEventEmitter;
+  },
+  get NativeDialogManagerAndroid() {
+    return require("react-native").NativeDialogManagerAndroid;
+  },
+  get NativeEventEmitter() {
+    return require("react-native").NativeEventEmitter;
+  },
+  get NativeModules() {
+    return require("react-native").NativeModules;
+  },
+  get Networking() {
+    return require("react-native").Networking;
+  },
+  get PanResponder() {
+    return require("react-native").PanResponder;
+  },
+  get PermissionsAndroid() {
+    return require("react-native").PermissionsAndroid;
+  },
+  get PixelRatio() {
+    return require("react-native").PixelRatio;
+  },
+  get Platform() {
+    return require("react-native").Platform;
+  },
+  get PlatformColor() {
+    return require("react-native").PlatformColor;
+  },
+  get PushNotificationIOS() {
+    return require("react-native").PushNotificationIOS;
+  },
+  get processColor() {
+    return require("react-native").processColor;
+  },
+  get registerCallableModule() {
+    return require("react-native").registerCallableModule;
+  },
+  get requireNativeComponent() {
+    return require("react-native").requireNativeComponent;
+  },
+  get RootTagContext() {
+    return require("react-native").RootTagContext;
+  },
+  get Settings() {
+    return require("react-native").Settings;
+  },
+  get Share() {
+    return require("react-native").Share;
+  },
+  get StyleSheet() {
+    return require("react-native").StyleSheet;
+  },
+  get Systrace() {
+    return require("react-native").Systrace;
+  },
+  get ToastAndroid() {
+    return require("react-native").ToastAndroid;
+  },
+  get TurboModuleRegistry() {
+    return require("react-native").TurboModuleRegistry;
+  },
+  get UIManager() {
+    return require("react-native").UIManager;
+  },
+  get unstable_batchedUpdates() {
+    return require("react-native").unstable_batchedUpdates;
+  },
+  get useAnimatedValue() {
+    return require("react-native").useAnimatedValue;
+  },
+  get useColorScheme() {
+    return require("react-native").useColorScheme;
+  },
+  get useWindowDimensions() {
+    return require("react-native").useWindowDimensions;
+  },
+  get UTFSequence() {
+    return require("react-native").UTFSequence;
+  },
+  get Vibration() {
+    return require("react-native").Vibration;
+  },
+  get VirtualViewMode() {
+    return require("react-native").VirtualViewMode;
+  },
+};

package/src/components/index.ts

@@ -0,0 +1,17 @@
+export * from "react-native";
+export { ActivityIndicator } from "./ActivityIndicator";
+export { Button } from "./Button";
+export { FlatList } from "./FlatList";
+export { Image } from "./Image";
+export { ImageBackground } from "./ImageBackground";
+export { KeyboardAvoidingView } from "./KeyboardAvoidingView";
+export { Pressable } from "./Pressable";
+export { ScrollView } from "./ScrollView";
+export { Switch } from "./Switch";
+export { Text } from "./Text";
+export { TextInput } from "./TextInput";
+export { TouchableHighlight } from "./TouchableHighlight";
+export { TouchableOpacity } from "./TouchableOpacity";
+export { TouchableWithoutFeedback } from "./TouchableWithoutFeedback";
+export { View } from "./View";
+export { VirtualizedList } from "./VirtualizedList";

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

@@ -0,0 +1,44 @@
+import { useContext, useMemo, type PropsWithChildren } from "react";
+
+import {
+  VariableContext,
+  VariableContextProvider,
+} from "react-native-css/native-internal";
+import {
+  SafeAreaProvider as OriginalSafeAreaProvider,
+  useSafeAreaInsets,
+  type SafeAreaProviderProps,
+} from "react-native-safe-area-context";
+
+export * from "react-native-safe-area-context";
+
+export function SafeAreaProvider({
+  children,
+  ...props
+}: SafeAreaProviderProps) {
+  return (
+    <OriginalSafeAreaProvider {...props}>
+      <SafeAreaEnv>{children}</SafeAreaEnv>
+    </OriginalSafeAreaProvider>
+  );
+}
+
+function SafeAreaEnv({ children }: PropsWithChildren) {
+  const insets = useSafeAreaInsets();
+  const parentVars = useContext(VariableContext);
+
+  const value = useMemo(
+    () => ({
+      ...parentVars,
+      "--react-native-css-safe-area-inset-bottom": insets.bottom,
+      "--react-native-css-safe-area-inset-left": insets.left,
+      "--react-native-css-safe-area-inset-right": insets.right,
+      "--react-native-css-safe-area-inset-top": insets.top,
+    }),
+    [parentVars, insets],
+  );
+
+  return (
+    <VariableContextProvider value={value}>{children}</VariableContextProvider>
+  );
+}

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

@@ -0,0 +1 @@
+export * from "react-native-safe-area-context";

package/src/index.ts

@@ -0,0 +1 @@
+export * from "./runtime";

package/src/jest/expect.d.ts

@@ -0,0 +1 @@
+declare module "expect/build/matchers";

package/src/jest/index.ts

@@ -0,0 +1,75 @@
+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/native";
+
+import { colorScheme, dimensions } from "../native/reactivity";
+
+declare global {
+  /* eslint-disable @typescript-eslint/no-namespace */
+  namespace jest {
+    interface Matchers<R> {
+      toHaveAnimatedStyle(style?: unknown): R;
+    }
+  }
+}
+
+export const testID = "react-native-css";
+
+beforeEach(() => {
+  StyleCollection.styles.clear();
+  dimensions.set(Dimensions.get("window"));
+  Appearance.setColorScheme(null);
+  colorScheme.set(null);
+});
+
+const debugDefault = Boolean(
+  process.env.REACT_NATIVE_CSS_TEST_DEBUG &&
+    typeof process.env.NODE_OPTIONS === "string" &&
+    process.env.NODE_OPTIONS.includes("--inspect"),
+);
+
+export function registerCSS(
+  css: string,
+  options: CompilerOptions & { debug?: boolean } = {},
+) {
+  const { debug = debugDefault } = options;
+  const compiled = compileWithAutoDebug(css, options);
+
+  if (debug) {
+    console.log(
+      `Compiled:\n---\n${inspect(
+        {
+          stylesheet: compiled.stylesheet(),
+          warnings: compiled.warnings(),
+        },
+        { depth: null, colors: true, compact: false },
+      )}`,
+    );
+  }
+
+  StyleCollection.inject(compiled.stylesheet());
+
+  return compiled;
+}
+
+export function compileWithAutoDebug(
+  css: string,
+  {
+    debug = debugDefault,
+    ...options
+  }: CompilerOptions & { debug?: boolean | "verbose" } = {},
+) {
+  const logger = debug
+    ? (text: string) => {
+        // Just log the rules
+        if (text.startsWith("[") && debug === "verbose") {
+          console.log(`Rules:\n---\n${text}`);
+        }
+      }
+    : undefined;
+
+  return compile(css, { ...options, logger });
+}

package/src/jest/setup.ts

@@ -0,0 +1 @@
+// require("react-native-reanimated").setUpTests();

package/src/jest/setupAfterEnv.ts

@@ -0,0 +1,13 @@
+// import matchers from "expect/build/matchers";
+
+// // I do not know why this is needed
+// matchers.customTesters = [];
+
+// expect.extend({
+//   toHaveStyle(received, style) {
+//     const receivedStyle = received?.props?.style
+//       ? Object.fromEntries(Object.entries(received?.props?.style))
+//       : undefined;
+//     return matchers.toStrictEqual(receivedStyle, style);
+//   },
+// });

package/src/metro/index.ts

@@ -0,0 +1,83 @@
+/* eslint-disable */
+import { versions } from "node:process";
+
+import type { MetroConfig } from "metro-config";
+
+import { type CompilerOptions } from "../compiler";
+import { nativeResolver, webResolver } from "./resolver";
+import { setupTypeScript } from "./typescript";
+
+export interface WithReactNativeCSSOptions extends CompilerOptions {
+  /* Specify the path to the TypeScript environment file. Defaults types-env.d.ts */
+  typescriptEnvPath?: string;
+  /* Disable generation of the types-env.d.ts file. Defaults false */
+  disableTypeScriptGeneration?: boolean;
+  /** Add className to all React Native primitives. Defaults false */
+  globalClassNamePolyfill?: boolean;
+  hexColors?: boolean;
+}
+
+const metroOverrideResolution = {
+  type: "sourceFile",
+  filePath: require.resolve("./override"),
+};
+
+export function withReactNativeCSS<
+  T extends MetroConfig | (() => Promise<MetroConfig>),
+>(config: T, options?: WithReactNativeCSSOptions): T {
+  if (typeof config === "function") {
+    return (async () => {
+      return withReactNativeCSS(await config(), options);
+    }) as T;
+  }
+
+  if (Number(versions.node.split(".")[0]) < 20) {
+    throw new Error("react-native-css only supports NodeJS >20");
+  }
+
+  const {
+    disableTypeScriptGeneration,
+    typescriptEnvPath,
+    globalClassNamePolyfill = false,
+  } = options || {};
+
+  if (disableTypeScriptGeneration !== true) {
+    setupTypeScript(typescriptEnvPath);
+  }
+
+  return {
+    ...config,
+    transformerPath: require.resolve("./metro-transformer"),
+    transformer: {
+      ...config.transformer,
+      reactNativeCSS: options,
+    },
+    resolver: {
+      ...config.resolver,
+      sourceExts: [...(config?.resolver?.sourceExts || []), "css"],
+      resolveRequest: (context, moduleName, platform) => {
+        if (moduleName.includes("react-native-css-metro-override")) {
+          return metroOverrideResolution;
+        }
+
+        const parentResolver =
+          config.resolver?.resolveRequest ?? context.resolveRequest;
+
+        // Don't hijack the resolution of react-native imports
+        if (!globalClassNamePolyfill) {
+          return parentResolver(context, moduleName, platform);
+        }
+
+        const resolver = platform === "web" ? webResolver : nativeResolver;
+        const resolved = resolver(
+          parentResolver,
+          context,
+          moduleName,
+          platform,
+        );
+
+        return resolved;
+      },
+    },
+  };
+}

package/src/metro/injection-code.ts

@@ -0,0 +1,34 @@
+/**
+ * This is a hack around Metro's handling of bundles.
+ * When a component is inside a lazy() barrier, it is inside a different JS bundle.
+ * So when it updates, it only updates its local bundle, not the global one which contains the CSS files.
+ *
+ * This means that the CSS file will not be re-evaluated when a component in a different bundle updates,
+ * breaking tools like Tailwind CSS
+ *
+ * To fix this, we force our code to always import the CSS files, so now the CSS files are in every bundle.
+ */
+export function getWebInjectionCode(filePaths: string[]) {
+  const importStatements = filePaths
+    .map((filePath) => `import "${filePath}";`)
+    .join("\n");
+
+  return Buffer.from(importStatements);
+}
+
+export function getNativeInjectionCode(
+  cssFilePaths: string[],
+  values: unknown[],
+) {
+  const importStatements = cssFilePaths
+    .map((filePath) => `import "${filePath}";`)
+    .join("\n");
+
+  const contents = values
+    .map((value) => `StyleCollection.inject(${JSON.stringify(value)});`)
+    .join("\n");
+
+  return Buffer.from(
+    `import { StyleCollection } from "react-native-css/native-internal";\n${importStatements}\n${contents};export {};`,
+  );
+}

package/src/metro/metro-transformer.ts

@@ -0,0 +1,62 @@
+import { unstable_transformerPath } from "@expo/metro-config";
+import type {
+  JsTransformerConfig,
+  JsTransformOptions,
+  TransformResponse,
+} from "metro-transform-worker";
+
+import { compile, type CompilerOptions } from "../compiler";
+import { getNativeInjectionCode } from "./injection-code";
+
+const worker =
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
+  require(unstable_transformerPath) as typeof import("metro-transform-worker");
+
+export async function transform(
+  config: JsTransformerConfig,
+  projectRoot: string,
+  filePath: string,
+  data: Buffer,
+  options: JsTransformOptions & {
+    reactNativeCSS?: CompilerOptions | undefined;
+  },
+): Promise<TransformResponse> {
+  const isCss = options.type !== "asset" && /\.(s?css|sass)$/.test(filePath);
+
+  if (options.platform === "web" || !isCss) {
+    return worker.transform(config, projectRoot, filePath, data, options);
+  }
+
+  const cssFile = (await worker.transform(config, projectRoot, filePath, data, {
+    ...options,
+    platform: "web",
+  })) as TransformResponse & {
+    output: [{ data: { css: { code: Buffer } } }];
+  };
+
+  const css = cssFile.output[0].data.css.code.toString();
+
+  const productionJS = compile(css, {
+    ...options.reactNativeCSS,
+    filename: filePath,
+    projectRoot: projectRoot,
+  }).stylesheet();
+
+  data = Buffer.from(getNativeInjectionCode([], [productionJS]));
+
+  const transform = await worker.transform(
+    config,
+    projectRoot,
+    `${filePath}.js`,
+    data,
+    options,
+  );
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access
+  (transform as any).output[0].data.css = {
+    skipCache: true,
+    code: "",
+  };
+
+  return transform;
+}

package/src/metro/override.ts

@@ -0,0 +1 @@
+export {};

package/src/metro/picocolors.ts

@@ -0,0 +1,77 @@
+/* eslint-disable */
+// ISC License
+
+// Copyright (c) 2021 Alexey Raspopov, Kostiantyn Denysov, Anton Verinov
+
+// Permission to use, copy, modify, and/or distribute this software for any
+// purpose with or without fee is hereby granted, provided that the above
+// copyright notice and this permission notice appear in all copies.
+
+// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+// WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+// MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+// ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+// WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+// ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+// OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+//
+// https://github.com/alexeyraspopov/picocolors/blob/b6261487e7b81aaab2440e397a356732cad9e342/picocolors.js#L1
+
+const { env, stdout } = globalThis?.process ?? {};
+
+const enabled =
+  env &&
+  !env.NO_COLOR &&
+  (env.FORCE_COLOR || (stdout?.isTTY && !env.CI && env.TERM !== "dumb"));
+
+const replaceClose = (
+  str: string,
+  close: string,
+  replace: string,
+  index: number,
+): string => {
+  const start = str.substring(0, index) + replace;
+  const end = str.substring(index + close.length);
+  const nextIndex = end.indexOf(close);
+  return ~nextIndex
+    ? start + replaceClose(end, close, replace, nextIndex)
+    : start + end;
+};
+
+const formatter = (open: string, close: string, replace = open) => {
+  if (!enabled) return String;
+  return (input: string) => {
+    const string = "" + input;
+    const index = string.indexOf(close, open.length);
+    return ~index
+      ? open + replaceClose(string, close, replace, index) + close
+      : open + string + close;
+  };
+};
+
+export const reset = enabled ? (s: string) => `\x1b[0m${s}\x1b[0m` : String;
+export const bold = formatter("\x1b[1m", "\x1b[22m", "\x1b[22m\x1b[1m");
+export const dim = formatter("\x1b[2m", "\x1b[22m", "\x1b[22m\x1b[2m");
+export const italic = formatter("\x1b[3m", "\x1b[23m");
+export const underline = formatter("\x1b[4m", "\x1b[24m");
+export const inverse = formatter("\x1b[7m", "\x1b[27m");
+export const hidden = formatter("\x1b[8m", "\x1b[28m");
+export const strikethrough = formatter("\x1b[9m", "\x1b[29m");
+export const black = formatter("\x1b[30m", "\x1b[39m");
+export const red = formatter("\x1b[31m", "\x1b[39m");
+export const green = formatter("\x1b[32m", "\x1b[39m");
+export const yellow = formatter("\x1b[33m", "\x1b[39m");
+export const blue = formatter("\x1b[34m", "\x1b[39m");
+export const magenta = formatter("\x1b[35m", "\x1b[39m");
+export const purple = formatter("\x1b[38;2;173;127;168m", "\x1b[39m");
+export const cyan = formatter("\x1b[36m", "\x1b[39m");
+export const white = formatter("\x1b[37m", "\x1b[39m");
+export const gray = formatter("\x1b[90m", "\x1b[39m");
+export const bgBlack = formatter("\x1b[40m", "\x1b[49m");
+export const bgRed = formatter("\x1b[41m", "\x1b[49m");
+export const bgGreen = formatter("\x1b[42m", "\x1b[49m");
+export const bgYellow = formatter("\x1b[43m", "\x1b[49m");
+export const bgBlue = formatter("\x1b[44m", "\x1b[49m");
+export const bgMagenta = formatter("\x1b[45m", "\x1b[49m");
+export const bgCyan = formatter("\x1b[46m", "\x1b[49m");
+export const bgWhite = formatter("\x1b[47m", "\x1b[49m");