react-native-css 2.1.2 → 3.0.0-nightly.19372e8

package/src/components/ActivityIndicator.tsx

@@ -0,0 +1,27 @@
+import {
+  ActivityIndicator as RNActivityIndicator,
+  type ActivityIndicatorProps,
+} from "react-native";
+
+import {
+  useCssElement,
+  type StyledConfiguration,
+  type StyledProps,
+} from "../runtime";
+
+const mapping = {
+  className: {
+    target: "style",
+    nativeStyleMapping: {
+      color: "color",
+    },
+  },
+} satisfies StyledConfiguration<typeof RNActivityIndicator>;
+
+export function ActivityIndicator(
+  props: StyledProps<ActivityIndicatorProps, typeof mapping>,
+) {
+  return useCssElement(RNActivityIndicator, props, mapping);
+}
+
+export default ActivityIndicator;

package/src/components/Button.tsx

@@ -0,0 +1,22 @@
+import { Button as RNButton, type ButtonProps } from "react-native";
+
+import {
+  useCssElement,
+  type StyledConfiguration,
+  type StyledProps,
+} from "../runtime";
+
+const mapping = {
+  className: {
+    target: false,
+    nativeStyleMapping: {
+      color: "color",
+    },
+  },
+} satisfies StyledConfiguration<typeof RNButton>;
+
+export function Button(props: StyledProps<ButtonProps, typeof mapping>) {
+  return useCssElement(RNButton, props, mapping);
+}
+
+export default Button;

package/src/components/FlatList.tsx

@@ -0,0 +1,21 @@
+import { FlatList as RNFlatList, type FlatListProps } from "react-native";
+
+import {
+  useCssElement,
+  type StyledConfiguration,
+  type StyledProps,
+} from "../runtime";
+
+const mapping = {
+  columnWrapperStyle: "columnWrapperStyle",
+  listFooterComponentClassName: "ListFooterComponentStyle",
+  listHeaderComponentClassName: "ListHeaderComponentStyle",
+} satisfies StyledConfiguration<typeof RNFlatList>;
+
+export function FlatList<ItemT>(
+  props: StyledProps<FlatListProps<ItemT>, typeof mapping>,
+) {
+  return useCssElement(RNFlatList, props, mapping);
+}
+
+export default FlatList;

package/src/components/Image.tsx

@@ -0,0 +1,17 @@
+import { Image as RNImage, type ImageProps } from "react-native";
+
+import {
+  useCssElement,
+  type StyledConfiguration,
+  type StyledProps,
+} from "../runtime";
+
+const mapping = {
+  className: "style",
+} satisfies StyledConfiguration<typeof RNImage>;
+
+export function Image(props: StyledProps<ImageProps, typeof mapping>) {
+  return useCssElement(RNImage, props, mapping);
+}
+
+export default Image;

package/src/components/Switch.tsx

@@ -0,0 +1,17 @@
+import { Switch as RNSwitch, type SwitchProps } from "react-native";
+
+import {
+  useCssElement,
+  type StyledConfiguration,
+  type StyledProps,
+} from "../runtime";
+
+const mapping = {
+  className: "style",
+} satisfies StyledConfiguration<typeof RNSwitch>;
+
+export function Switch(props: StyledProps<SwitchProps, typeof mapping>) {
+  return useCssElement(RNSwitch, props, mapping);
+}
+
+export default Switch;

package/src/components/Text.tsx

@@ -0,0 +1,17 @@
+import { Text as RNText, type TextProps } from "react-native";
+
+import {
+  useCssElement,
+  type StyledConfiguration,
+  type StyledProps,
+} from "../runtime";
+
+const mapping = {
+  className: "style",
+} satisfies StyledConfiguration<typeof RNText>;
+
+export function Text(props: StyledProps<TextProps, typeof mapping>) {
+  return useCssElement(RNText, props, mapping);
+}
+
+export default Text;

package/src/components/TextInput.tsx

@@ -0,0 +1,17 @@
+import { TextInput as RNTextInput, type TextInputProps } from "react-native";
+
+import {
+  useCssElement,
+  type StyledConfiguration,
+  type StyledProps,
+} from "../runtime";
+
+const mapping = {
+  className: "style",
+} satisfies StyledConfiguration<typeof RNTextInput>;
+
+export function TextInput(props: StyledProps<TextInputProps, typeof mapping>) {
+  return useCssElement(RNTextInput, props, mapping);
+}
+
+export default TextInput;

package/src/components/View.tsx

@@ -0,0 +1,17 @@
+import { View as RNView, type ViewProps } from "react-native";
+
+import {
+  useCssElement,
+  type StyledConfiguration,
+  type StyledProps,
+} from "../runtime";
+
+const mapping = {
+  className: "style",
+} satisfies StyledConfiguration<typeof RNView>;
+
+export function View(props: StyledProps<ViewProps, typeof mapping>) {
+  return useCssElement(RNView, props, mapping);
+}
+
+export default View;

package/src/components/index.tsx

@@ -0,0 +1,10 @@
+export * from "react-native";
+
+export { ActivityIndicator } from "./ActivityIndicator";
+export { Button } from "./Button";
+export { FlatList } from "./FlatList";
+export { Image } from "./Image";
+export { Switch } from "./Switch";
+export { Text } from "./Text";
+export { TextInput } from "./TextInput";
+export { View } from "./View";

package/src/doctor/index.ts

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

package/src/index.ts

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

package/src/jest/expect.d.ts

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

package/src/jest/index.ts

@@ -0,0 +1,74 @@
+import { Appearance, Dimensions } from "react-native";
+
+import { inspect } from "node:util";
+
+import { compile, type CompilerOptions } from "../compiler";
+import { StyleCollection } from "../runtime/native/injection";
+import { colorScheme, dimensions, rem } from "../runtime/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"));
+  rem.set(14);
+  Appearance.setColorScheme(null);
+  colorScheme.set(null);
+});
+
+const debugDefault = Boolean(
+  process.env.REACT_NATIVE_CSS_TEST_DEBUG &&
+    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 } = {},
+) {
+  const logger = debug
+    ? (text: string) => {
+        // Just log the rules
+        if (text.startsWith("[")) {
+          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,237 @@
+/* eslint-disable */
+import { dirname, relative, sep } from "node:path";
+import { versions } from "node:process";
+
+import connect from "connect";
+import debug from "debug";
+import type { MetroConfig } from "metro-config";
+
+import type { CompilerOptions, ReactNativeCssStyleSheet_V2 } from "../compiler";
+import { compile } from "../compiler/compiler";
+import { getNativeInjectionCode, getWebInjectionCode } from "./injection-code";
+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 defaultLogger = debug("react-native-css:metro");
+
+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,
+    logger = defaultLogger,
+  } = options || {};
+
+  const loggerEnabled = "enabled" in logger ? logger.enabled : true;
+
+  if (disableTypeScriptGeneration !== true) {
+    setupTypeScript(typescriptEnvPath);
+  }
+
+  const originalMiddleware = config.server?.enhanceMiddleware;
+  const originalResolver = config.resolver?.resolveRequest;
+
+  const poisonPillPath = "./poison.pill";
+
+  return {
+    ...config,
+    transformerPath: require.resolve("./metro-transformer"),
+    resolver: {
+      ...config.resolver,
+      sourceExts: [...(config?.resolver?.sourceExts || []), "css"],
+      resolveRequest: (context, moduleName, platform) => {
+        if (moduleName === poisonPillPath) {
+          return { type: "empty" };
+        }
+
+        // Don't hijack the resolution of react-native imports
+        if (!globalClassNamePolyfill) {
+          const parentResolver = originalResolver ?? context.resolveRequest;
+          return parentResolver(context, moduleName, platform);
+        }
+
+        const parentResolver = originalResolver ?? context.resolveRequest;
+        const resolver = platform === "web" ? webResolver : nativeResolver;
+        const resolved = resolver(
+          parentResolver,
+          context,
+          moduleName,
+          platform,
+        );
+
+        return resolved;
+      },
+    },
+    server: {
+      ...config.server,
+      enhanceMiddleware(middleware, metroServer) {
+        const server = connect();
+        const bundler: any = metroServer.getBundler().getBundler();
+
+        if (!bundler.__react_native_css__patched) {
+          bundler.__react_native_css__patched = true;
+
+          const nativeCSSFiles = new Map<
+            string,
+            [string, ReactNativeCssStyleSheet_V2]
+          >();
+          const webCSSFiles = new Set<string>();
+
+          const nativeInjectionPath = require.resolve(
+            "../runtime/native/metro",
+          );
+          const nativeInjectionFilepaths = [
+            // CommonJS
+            nativeInjectionPath,
+            // ES Module
+            nativeInjectionPath.replace(
+              `dist${sep}commonjs`,
+              `dist${sep}module`,
+            ),
+            // TypeScript
+            nativeInjectionPath
+              .replace(`dist${sep}commonjs`, `src`)
+              .replace(".js", ".ts"),
+          ];
+
+          const webInjectionPath = require.resolve("../runtime/web/metro");
+          const webInjectionFilepaths = [
+            // CommonJS
+            webInjectionPath,
+            // ES Module
+            webInjectionPath.replace(`dist${sep}commonjs`, `dist${sep}module`),
+            // TypeScript
+            webInjectionPath
+              .replace(`dist${sep}commonjs`, `src`)
+              .replace(".js", ".ts"),
+          ];
+
+          // Keep the original
+          const transformFile = bundler.transformFile.bind(bundler);
+
+          const watcher = bundler.getWatcher();
+
+          // Patch with our functionality
+          bundler.transformFile = async function (
+            filePath: string,
+            transformOptions: any,
+            fileBuffer?: Buffer,
+          ) {
+            const isCss = /\.(s?css|sass)$/.test(filePath);
+
+            if (transformOptions.platform === "web") {
+              if (isCss) {
+                webCSSFiles.add(filePath);
+              } else if (webInjectionFilepaths.includes(filePath)) {
+                fileBuffer = getWebInjectionCode(Array.from(webCSSFiles));
+              }
+
+              return transformFile(filePath, transformOptions, fileBuffer);
+            } else {
+              // Handle CSS files on native platforms
+              if (isCss) {
+                const webTransform = await transformFile(
+                  filePath,
+                  {
+                    ...transformOptions,
+                    // Force the platform to web for CSS files
+                    platform: "web",
+                    // Let the transformer know that we will handle compilation
+                    customTransformOptions: {
+                      ...transformOptions.customTransformOptions,
+                      reactNativeCSSCompile: false,
+                    },
+                  },
+                  fileBuffer,
+                );
+
+                const lastTransform = nativeCSSFiles.get(filePath);
+                const last = lastTransform?.[0];
+                const next = webTransform.output[0].data.css.code.toString();
+
+                // The CSS file has changed, we need to recompile the injection file
+                if (next !== last) {
+                  nativeCSSFiles.set(filePath, [
+                    next,
+                    compile(next, {
+                      hexColors: options?.hexColors,
+                    }).stylesheet(),
+                  ]);
+
+                  watcher.emit("change", {
+                    eventsQueue: nativeInjectionFilepaths.map((filePath) => ({
+                      filePath,
+                      metadata: {
+                        modifiedTime: Date.now(),
+                        size: 1, // Can be anything
+                        type: "virtual", // Can be anything
+                      },
+                      type: "change",
+                    })),
+                  });
+                }
+
+                const nativeTransform = await transformFile(
+                  filePath,
+                  transformOptions,
+                  fileBuffer,
+                );
+
+                // Tell Expo to skip caching this file
+                nativeTransform.output[0].data.css = {
+                  skipCache: true,
+                  // Expo requires a `code` property
+                  code: "",
+                };
+
+                return nativeTransform;
+              } else if (nativeInjectionFilepaths.includes(filePath)) {
+                // If this is the injection file, we to swap its content with the
+                // compiled CSS files
+                fileBuffer = getNativeInjectionCode(
+                  Array.from(nativeCSSFiles.keys()).map((key) =>
+                    relative(dirname(filePath), key),
+                  ),
+                  Array.from(nativeCSSFiles.values()).map(([, value]) => value),
+                );
+
+                if (loggerEnabled && fileBuffer) {
+                  logger(`Transformed ${filePath}`);
+                  logger(fileBuffer?.toString());
+                }
+              }
+
+              return transformFile(filePath, transformOptions, fileBuffer);
+            }
+          };
+        }
+
+        return originalMiddleware
+          ? server.use(originalMiddleware(middleware, metroServer))
+          : server.use(middleware);
+      },
+    },
+  };
+}

package/src/metro/injection-code.ts

@@ -0,0 +1,38 @@
+/**
+ * This is a hack around Expo's handling of CSS files.
+ * 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.
+ *
+ * To fix this, we force our code to always import the CSS files.
+ * Now the CSS files are in every bundle.
+ *
+ * We achieve this by collecting all CSS files and injecting them into a special file
+ * which is included inside react-native-css's runtime.
+ *
+ * This is why both of these function add imports for the CSS files.
+ */
+
+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 importPath = `import { StyleCollection } from "./api";`;
+  const contents = values
+    .map((value) => `StyleCollection.inject(${JSON.stringify(value)});`)
+    .join("\n");
+
+  return Buffer.from(
+    `${importStatements}\n${importPath}\n${contents};export {};`,
+  );
+}

package/src/metro/metro-transformer.ts

@@ -0,0 +1,31 @@
+import type {
+  JsTransformerConfig,
+  JsTransformOptions,
+  TransformResponse,
+} from "metro-transform-worker";
+
+const worker =
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
+  require("@expo/metro-config/build/transform-worker/transform-worker.js") as typeof import("metro-transform-worker");
+
+export function transform(
+  config: JsTransformerConfig,
+  projectRoot: string,
+  filePath: string,
+  data: Buffer,
+  options: JsTransformOptions,
+): Promise<TransformResponse> {
+  const isCss = options.type !== "asset" && /\.(s?css|sass)$/.test(filePath);
+  const skipCompile =
+    options.customTransformOptions &&
+    "reactNativeCSSCompile" in options.customTransformOptions &&
+    options.customTransformOptions.reactNativeCSSCompile === false;
+
+  if (!isCss || skipCompile) {
+    return worker.transform(config, projectRoot, filePath, data, options);
+  }
+
+  // TODO - compile the CSS file inline
+
+  return worker.transform(config, projectRoot, filePath, data, options);
+}

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");