react-native-css 2.1.1 → 3.0.0-nightly.4723140

package/src/metro/index.ts

@@ -0,0 +1,137 @@
+/* eslint-disable */
+import { versions } from "node:process";
+import { sep } from "node:path";
+
+import connect from "connect";
+import type { MetroConfig } from "metro-config";
+
+import { compile } from "../compiler/compiler";
+import { setupTypeScript } from "./typescript";
+import { getInjectionCode } from "./injection-code";
+
+export interface WithReactNativeCSSOptions {
+  browserslist?: string | null;
+  browserslistEnv?: string | null;
+  libName?: string;
+  typescriptEnvPath?: string;
+  disableTypeScriptGeneration?: boolean;
+}
+
+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]) < 18) {
+    throw new Error("react-native-css only supports NodeJS >18");
+  }
+
+  if (options?.disableTypeScriptGeneration !== true) {
+    setupTypeScript(options?.typescriptEnvPath, options?.libName);
+  }
+
+  const originalMiddleware = config.server?.enhanceMiddleware;
+
+  return {
+    ...config,
+    transformerPath: require.resolve("./metro-transformer"),
+    transformer: {
+      ...config.transformer,
+      browserslist: options?.browserslist,
+      browserslistEnv: options?.browserslistEnv,
+    },
+    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 cssFiles = new Map();
+
+          const injectionCommonJS = require.resolve("../runtime/native/metro");
+          const injectionFilePaths = [
+            // CommonJS
+            injectionCommonJS,
+            // ES Module
+            injectionCommonJS.replace(`dist${sep}commonjs`, `dist${sep}module`),
+            // TypeScript
+            injectionCommonJS
+              .replace(`dist${sep}commonjs`, `src`)
+              .replace(".js", ".ts"),
+          ];
+
+          // Keep the original
+          const transformFile = bundler.transformFile.bind(bundler);
+
+          // Patch with our functionality
+          bundler.transformFile = async function (
+            filePath: string,
+            transformOptions: any,
+            fileBuffer?: Buffer,
+          ) {
+            const isCss = /\.(s?css|sass)$/.test(filePath);
+
+            // Handle CSS files on native platforms
+            if (isCss && transformOptions.platform !== "web") {
+              const real = 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 = cssFiles.get(filePath);
+              const last = lastTransform?.[0];
+              const next = real.output[0].data.css.code.toString();
+
+              // The CSS file has changed, we need to recompile the injection file
+              if (next !== last) {
+                cssFiles.set(filePath, [next, compile(next, {})]);
+
+                bundler.getWatcher().emit("change", {
+                  eventsQueue: injectionFilePaths.map((filePath) => ({
+                    filePath,
+                    metadata: {
+                      modifiedTime: Date.now(),
+                      size: 1, // Can be anything
+                      type: "virtual", // Can be anything
+                    },
+                    type: "change",
+                  })),
+                });
+              }
+            } else if (injectionFilePaths.includes(filePath)) {
+              // If this is the injection file, we to swap its content with the
+              // compiled CSS files
+              fileBuffer = getInjectionCode(
+                "./api",
+                Array.from(cssFiles.values()).map(([, value]) => value),
+              );
+            }
+
+            return transformFile(filePath, transformOptions, fileBuffer);
+          };
+        }
+
+        return originalMiddleware
+          ? server.use(originalMiddleware(middleware, metroServer))
+          : server.use(middleware);
+      },
+    },
+  };
+}

package/src/metro/injection-code.ts

@@ -0,0 +1,8 @@
+export function getInjectionCode(filePath: string, values: unknown[]) {
+  const importPath = `import { StyleCollection } from "${filePath}";`;
+  const contents = values
+    .map((value) => `StyleCollection.inject(${JSON.stringify(value)});`)
+    .join("\n");
+
+  return Buffer.from(`${importPath}\n${contents}`);
+}

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

package/src/metro/stringify.ts

@@ -0,0 +1,59 @@
+/* eslint-disable */
+/**
+ * Convert a data structure to JavaScript.
+ * The output should be similar to JSON, but without the extra characters.
+ * This is simply to reduce file size in production
+ */
+export function stringify(data: unknown): string {
+  switch (typeof data) {
+    case "bigint":
+    case "symbol":
+    case "function":
+      throw new Error(`Cannot stringify ${typeof data}`);
+    case "string":
+      return `"${data}"`;
+    case "number":
+      // Reduce to 3 decimal places
+      return `${Math.round(data * 1000) / 1000}`;
+    case "boolean":
+      return `${data}`;
+    case "undefined":
+      // null is processed faster than undefined
+      // JSON.stringify also converts undefined to null
+      return "null";
+    case "object": {
+      if (data === null) {
+        return "null";
+      } else if (Array.isArray(data)) {
+        return `[${data
+          .map((value) => {
+            // These values can be omitted to create a holey array
+            // This is slightly slower to parse at runtime, but keeps the
+            // file size smaller
+            return value === null || value === undefined
+              ? ""
+              : stringify(value);
+          })
+          .join(",")}]`;
+      } else {
+        return `{${Object.entries(data)
+          .flatMap(([key, value]) => {
+            // If an object's property is undefined or null we can just skip it
+            if (value === null || value === undefined) {
+              return [];
+            }
+
+            // Make sure we quote strings that require quotes
+            if (key.match(/[^a-zA-Z]/)) {
+              key = `"${key}"`;
+            }
+
+            value = stringify(value);
+
+            return [`${key}:${value}`];
+          })
+          .join(",")}}`;
+      }
+    }
+  }
+}

package/src/metro/typescript.ts

@@ -0,0 +1,73 @@
+/* eslint-disable */
+import { existsSync, readFileSync, writeFileSync } from "fs";
+
+import { CommentArray, parse, stringify } from "comment-json";
+
+import { bold, cyan } from "./picocolors";
+
+export function setupTypeScript(
+  envPath = "react-native-css-env.d.ts",
+  name = "react-native-css",
+) {
+  try {
+    const ts = require("typescript");
+    if (!ts) {
+      return;
+    }
+
+    const configFileName = ts.findConfigFile(
+      "./",
+      ts.sys.fileExists,
+      "tsconfig.json",
+    );
+
+    const userConfig = parse(
+      readFileSync(configFileName, {
+        encoding: "utf-8",
+      }),
+    );
+
+    if (
+      typeof userConfig !== "object" ||
+      !userConfig ||
+      Array.isArray(userConfig)
+    ) {
+      return;
+    }
+
+    const output: string[] = [];
+    let updatedConfig = false;
+
+    if (!existsSync(envPath)) {
+      writeFileSync(
+        envPath,
+        `/// <reference types="react-native-css/react-env" />
+
+// NOTE: This file should not be edited and should be committed with your source code. It is generated by ${name}. If you need to move or disable this file, please see the documentation.`,
+      );
+      output.push(`Created ${cyan(envPath)}`);
+    }
+
+    userConfig.include ??= new CommentArray(envPath);
+    if (
+      Array.isArray(userConfig.include) &&
+      !userConfig.include.includes(envPath)
+    ) {
+      userConfig.include.push(envPath);
+      updatedConfig = true;
+      output.push(
+        `Updated ${configFileName} to include the ${cyan(envPath)} file`,
+      );
+    }
+
+    if (updatedConfig) {
+      writeFileSync(configFileName, stringify(userConfig, null, 2));
+    }
+
+    if (output.length) {
+      console.log(
+        `${cyan(bold("NativeWind"))} made the following changes to your project to support TypeScript:\n  - ${output.join("\n  - ")}`,
+      );
+    }
+  } catch {}
+}

package/src/runtime/index.ts

@@ -0,0 +1,7 @@
+/**
+ * An opinionated runtime for React Native CSS.
+ * @module
+ */
+
+export * from "./runtime";
+export type * from "./runtime.types";

package/src/runtime/native/api.ts

@@ -0,0 +1,106 @@
+/* eslint-disable  */
+import { useContext, useState } from "react";
+import { Appearance } from "react-native";
+
+import type { InlineVariable, StyleDescriptor } from "../../compiler";
+import type {
+  ColorScheme,
+  Props,
+  StyledConfiguration,
+  StyledOptions,
+} from "../runtime.types";
+import type { ReactComponent } from "../utils";
+import { mappingToConfig, useNativeCss } from "./react/useNativeCss";
+import { usePassthrough } from "./react/usePassthrough";
+import {
+  colorScheme as colorSchemeObs,
+  VAR_SYMBOL,
+  VariableContext,
+  type Effect,
+  type Getter,
+} from "./reactivity";
+import { resolveValue } from "./styles/resolve";
+
+export { StyleCollection } from "./injection";
+
+/**
+ * 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
+ * @param baseComponent
+ * @param mapping
+ */
+export const styled = <
+  const C extends ReactComponent<any>,
+  const M extends StyledConfiguration<C>,
+>(
+  baseComponent: C,
+  mapping: M,
+  options?: StyledOptions,
+) => {
+  let component: any;
+  // const type = getComponentType(baseComponent);
+
+  const configs = mappingToConfig(mapping);
+
+  if (options?.passThrough) {
+    component = (props: Record<string, any>) => {
+      return usePassthrough(baseComponent, props, configs);
+    };
+  } else {
+    component = (props: Record<string, any>) => {
+      return useNativeCss(baseComponent, props, configs);
+    };
+  }
+
+  const name = baseComponent.displayName ?? baseComponent.name ?? "unknown";
+  component.displayName = `CssInterop.${name}`;
+  return component;
+};
+
+export const colorScheme: ColorScheme = {
+  get() {
+    return colorSchemeObs.get() ?? Appearance.getColorScheme() ?? "light";
+  },
+  set(value) {
+    return colorSchemeObs.set(value);
+  },
+};
+
+export const useUnstableNativeVariable = useNativeVariable;
+
+export const useCssElement = <
+  const C extends ReactComponent<any>,
+  const M extends StyledConfiguration<C>,
+>(
+  component: C,
+  incomingProps: Props,
+  mapping: M,
+) => {
+  const [config] = useState(() => mappingToConfig(mapping));
+  return useNativeCss(component, incomingProps, config);
+};
+
+export function useNativeVariable(name: string) {
+  if (name.startsWith("--")) {
+    name = name.slice(2);
+  }
+
+  const inheritedVariables = useContext(VariableContext);
+  const [effect, setState] = useState(() => {
+    const effect: Effect = {
+      observers: new Set(),
+      run: () => setState((state) => ({ ...state })),
+    };
+
+    const get: Getter = (observable) => observable.get(effect);
+
+    return { ...effect, get };
+  });
+
+  return resolveValue([{}, "var", [name]], effect.get, { inheritedVariables });
+}
+
+export function vars(variables: Record<string, StyleDescriptor>) {
+  (variables as InlineVariable)[VAR_SYMBOL] = "inline";
+  return variables;
+}

package/src/runtime/native/conditions/container-query.ts

@@ -0,0 +1,157 @@
+/* eslint-disable */
+import type { MediaFeatureNameFor_ContainerSizeFeatureId } from "lightningcss";
+
+import type {
+  ContainerQuery,
+  MediaCondition,
+  PseudoClassesQuery,
+  StyleDescriptor,
+} from "../../../compiler";
+import {
+  activeFamily,
+  containerHeightFamily,
+  containerWidthFamily,
+  focusFamily,
+  hoverFamily,
+  type ContainerContextValue,
+  type Effect,
+} from "../reactivity";
+import type { RenderGuard } from "./guards";
+
+export const DEFAULT_CONTAINER_NAME = "c:___default___";
+
+export function testContainerQueries(
+  queries: ContainerQuery[],
+  inheritedContainers: ContainerContextValue,
+  guards: RenderGuard[],
+  effect: Effect,
+) {
+  return queries.every((query) => {
+    return testContainerQuery(query, inheritedContainers, guards, effect);
+  });
+}
+
+export function testContainerQuery(
+  query: ContainerQuery,
+  inheritedContainers: ContainerContextValue,
+  guards: RenderGuard[],
+  effect?: Effect,
+): boolean {
+  const name = query.n ?? DEFAULT_CONTAINER_NAME;
+  const container = inheritedContainers[name]!;
+
+  guards.push(["c", name, container]);
+
+  if (!container) {
+    return false;
+  }
+
+  if (query.m && !testContainerMediaCondition(query.m, container, effect)) {
+    return false;
+  }
+
+  if (query.p && !testContainerPseudoCondition(query.p, container, effect)) {
+    return false;
+  }
+
+  return true;
+}
+
+function testContainerPseudoCondition(
+  query: PseudoClassesQuery,
+  containerKey: WeakKey,
+  effect?: Effect,
+): boolean {
+  if (query.h && !hoverFamily(containerKey).get(effect)) {
+    return false;
+  }
+  if (query.a && !activeFamily(containerKey).get(effect)) {
+    return false;
+  }
+  if (query.f && !focusFamily(containerKey).get(effect)) {
+    return false;
+  }
+  return true;
+}
+
+function testContainerMediaCondition(
+  condition: MediaCondition,
+  containerKey: WeakKey,
+  effect?: Effect,
+): boolean {
+  switch (condition[0]) {
+    case "!":
+      return !testContainerMediaCondition(condition[1], containerKey, effect);
+    case "&":
+      return condition[1].every((query) => {
+        return testContainerMediaCondition(query, containerKey, effect);
+      });
+    case "|":
+      return condition[1].some((query) => {
+        return testContainerMediaCondition(query, containerKey, effect);
+      });
+    case "!!":
+      return false;
+    case "[]":
+      return false;
+    case ">":
+    case ">=":
+    case "<":
+    case "<=":
+    case "=": {
+      const left = getContainerFeatureValue(condition[1], containerKey, effect);
+      const right = condition[2];
+
+      if (condition[0] === "=") {
+        return left === right;
+      }
+
+      if (typeof left !== "number" || typeof right !== "number") {
+        return false;
+      }
+
+      switch (condition[0]) {
+        case ">":
+          return left > right;
+        case ">=":
+          return left > right;
+        case "<":
+          return left > right;
+        case "<=":
+          return left > right;
+        default:
+          condition[0] satisfies never;
+          return false;
+      }
+    }
+    default:
+      condition satisfies never;
+      return false;
+  }
+}
+
+function getContainerFeatureValue(
+  name: MediaFeatureNameFor_ContainerSizeFeatureId,
+  containerKey: WeakKey,
+  effect?: Effect,
+): StyleDescriptor {
+  switch (name) {
+    case "width":
+      return containerWidthFamily(containerKey).get(effect);
+    case "height":
+      return containerHeightFamily(containerKey).get(effect);
+    case "aspect-ratio": {
+      const width = containerWidthFamily(containerKey).get(effect);
+      const height = containerWidthFamily(containerKey).get(effect);
+      return width / height;
+    }
+    case "orientation":
+      const width = containerWidthFamily(containerKey).get(effect);
+      const height = containerWidthFamily(containerKey).get(effect);
+      return width > height ? "landscape" : "portrait";
+    case "inline-size":
+    case "block-size":
+    default:
+      return;
+  }
+}

package/src/runtime/native/conditions/guards.ts

@@ -0,0 +1,37 @@
+/* eslint-disable */
+import type { ComponentState } from "../react/useNativeCss";
+import type {
+  ContainerContextValue,
+  Effect,
+  VariableContextValue,
+} from "../reactivity";
+
+export type RenderGuard =
+  | ["a", string, any]
+  | ["d", string, any]
+  | ["v", string, any]
+  | ["c", string, Effect];
+
+export function testGuards(
+  state: ComponentState,
+  currentProps: any,
+  inheritedVariables: VariableContextValue,
+  inheritedContainers: ContainerContextValue,
+) {
+  return state.guards?.some((guard) => {
+    switch (guard[0]) {
+      case "a":
+        // Attribute
+        return currentProps?.[guard[1]] !== guard[2];
+      case "d":
+        // DataSet
+        return currentProps?.dataSet?.[guard[1]] !== guard[2];
+      case "v":
+        // Variables
+        return inheritedVariables[guard[1]] !== guard[2];
+      case "c":
+        // Containers
+        return inheritedContainers[guard[1]] !== guard[2];
+    }
+  });
+}