react-native-css 2.1.1 → 3.0.0-nightly.27bd5e2

package/src/runtime/native/styles/resolve.ts

@@ -0,0 +1,205 @@
+/* eslint-disable */
+
+import type {
+  InlineVariable,
+  StyleDescriptor,
+  StyleFunction,
+} from "../../../compiler";
+import type { RenderGuard } from "../conditions/guards";
+import { type Getter, type VariableContextValue } from "../reactivity";
+import { animation, timingFunctionResolver } from "./animation";
+import { border } from "./border";
+import { boxShadow } from "./box-shadow";
+import { calc } from "./calc";
+import type { calculateProps } from "./calculate-props";
+import { transformKeys } from "./defaults";
+import {
+  blur,
+  brightness,
+  contrast,
+  dropShadow,
+  grayscale,
+  hueRotate,
+  invert,
+  opacity,
+  saturate,
+  sepia,
+} from "./filters";
+import {
+  fontScale,
+  hairlineWidth,
+  pixelRatio,
+  pixelSizeForLayoutSize,
+  platformColor,
+  roundToNearestPixel,
+} from "./platform-functions";
+import { textShadow } from "./text-shadow";
+import { transform } from "./transform";
+import { em, rem, vh, vw } from "./units";
+import { varResolver } from "./variables";
+
+export type SimpleResolveValue = (
+  value: StyleDescriptor,
+  castToArray?: boolean,
+) => unknown;
+
+export type StyleFunctionResolver = (
+  resolveValue: SimpleResolveValue,
+  value: StyleFunction,
+  get: Getter,
+  options: ResolveValueOptions,
+) => unknown;
+
+export type StyleResolver = (
+  resolveValue: SimpleResolveValue,
+  value: StyleDescriptor,
+  get: Getter,
+  options: ResolveValueOptions,
+) => unknown;
+
+const functions: Record<string, StyleFunctionResolver> = {
+  "@animation": animation,
+  "@border": border,
+  "@boxShadow": boxShadow,
+  "@textShadow": textShadow,
+  "@transform": transform,
+  "animationName": animation,
+  "cubic-bezier": timingFunctionResolver,
+  "steps": timingFunctionResolver,
+  "hue-rotate": hueRotate,
+  "drop-shadow": dropShadow,
+  blur,
+  brightness,
+  calc,
+  contrast,
+  em,
+  fontScale,
+  grayscale,
+  hairlineWidth,
+  invert,
+  opacity,
+  pixelRatio,
+  pixelSizeForLayoutSize,
+  platformColor,
+  rem,
+  roundToNearestPixel,
+  saturate,
+  sepia,
+  vh,
+  vw,
+};
+
+export type ResolveValueOptions = {
+  castToArray?: boolean;
+  inheritedVariables?: VariableContextValue;
+  inlineVariables?: InlineVariable | undefined;
+  renderGuards?: RenderGuard[];
+  variableHistory?: Set<string>;
+  /** Pass down to perform recursive calculations and avoid circular dependencies */
+  calculateProps?: typeof calculateProps;
+};
+
+export function resolveValue(
+  value: StyleDescriptor,
+  get: Getter,
+  options: ResolveValueOptions,
+): any {
+  const { castToArray } = options;
+
+  switch (typeof value) {
+    case "bigint":
+    case "symbol":
+    case "undefined":
+    case "function":
+      // These types are not supported
+      return;
+    case "number":
+    case "boolean":
+      return value;
+    case "string":
+      return value.endsWith("px") // Inline vars() might set a value with a px suffix
+        ? parseInt(value.slice(0, -2), 10)
+        : value;
+    case "object": {
+      if (!Array.isArray(value)) {
+        return value;
+      }
+
+      if (isDescriptorArray(value)) {
+        value = value
+          .map((d) => resolveValue(d, get, options))
+          .filter((d) => d !== undefined);
+
+        if (castToArray && !Array.isArray(value)) {
+          return [value];
+        } else {
+          return value;
+        }
+      }
+
+      const name = value[1];
+
+      const simpleResolve: SimpleResolveValue = (value) => {
+        return resolveValue(value, get, options);
+      };
+
+      if (name === "var") {
+        return varResolver(simpleResolve, value, get, options);
+      } else if (name in functions) {
+        const fn = functions[name];
+
+        if (typeof fn !== "function") {
+          throw new Error(`Unknown function: ${name}`);
+        }
+
+        value = fn(
+          simpleResolve,
+          value as StyleFunction,
+          get,
+          options,
+        ) as StyleDescriptor;
+      } else if (transformKeys.has(name)) {
+        // translate, rotate, scale, etc.
+        const args = value[2];
+        return simpleResolve(args, castToArray);
+      } else if (transformKeys.has(name.slice(1))) {
+        // @translate, @rotate, @scale, etc.
+        return { [name.slice(1)]: simpleResolve(value[2], castToArray) };
+      } else {
+        let args = simpleResolve(value[2], castToArray);
+
+        if (args === undefined) {
+          return;
+        } else if (Array.isArray(args)) {
+          let joinedArgs = args
+            .map((arg: unknown) => {
+              if (Array.isArray(arg)) {
+                return arg.flat().join(" ");
+              }
+              return arg;
+            })
+            .join(", ");
+
+          if (name === "radial-gradient") {
+            // Nativewind / Tailwind CSS hack which can force the 'in oklab' color space
+            joinedArgs = joinedArgs.replace("in oklab, ", "");
+          }
+
+          value = `${name}(${joinedArgs})`;
+        } else {
+          value = `${name}(${args})`;
+        }
+      }
+
+      return castToArray && value && !Array.isArray(value) ? [value] : value;
+    }
+  }
+}
+
+function isDescriptorArray(
+  value: StyleDescriptor | StyleDescriptor[],
+): value is StyleDescriptor[] {
+  return Array.isArray(value) && typeof value[0] === "object"
+    ? Array.isArray(value[0])
+    : true;
+}

package/src/runtime/native/styles/shorthand.ts

@@ -0,0 +1,121 @@
+/* eslint-disable */
+import { setDeepPath } from "../../utils/objects";
+import { isStyleDescriptorArray } from "../../utils/style-value";
+import { ShortHandSymbol } from "./constants";
+import { defaultValues } from "./defaults";
+import type { StyleResolver } from "./resolve";
+
+type ShorthandType =
+  | "string"
+  | "number"
+  | "length"
+  | "color"
+  | Readonly<(string | Function)[]>;
+
+type ShorthandRequiredValue =
+  | readonly [string | readonly string[], ShorthandType]
+  | ShorthandDefaultValue;
+
+type ShorthandDefaultValue = readonly [
+  string | readonly string[],
+  ShorthandType,
+  any,
+];
+
+export function shorthandHandler(
+  mappings: ShorthandRequiredValue[][],
+  defaults: ShorthandDefaultValue[],
+  returnType: "shorthandObject" | "tuples" | "object" = "shorthandObject",
+): StyleResolver {
+  return (resolve, value, __, { castToArray }) => {
+    let args = isStyleDescriptorArray(value)
+      ? resolve(value)
+      : Array.isArray(value)
+        ? resolve(value[2])
+        : value;
+
+    if (!Array.isArray(args)) {
+      return;
+    }
+
+    args = args.flat();
+
+    if (!Array.isArray(args)) {
+      return;
+    }
+
+    const match = mappings.find((mapping) => {
+      return (
+        args.length === mapping.length &&
+        mapping.every((map, index) => {
+          const type = map[1];
+          const value = args[index];
+
+          if (Array.isArray(type)) {
+            return type.includes(value) || type.includes(typeof value);
+          }
+
+          switch (type) {
+            case "string":
+            case "number":
+              return typeof value === type;
+            case "color":
+              return typeof value === "string" || typeof value === "object";
+            case "length":
+              return typeof value === "string"
+                ? value.endsWith("%")
+                : typeof value === "number";
+          }
+
+          return;
+        })
+      );
+    });
+
+    if (!match) return;
+
+    const seenDefaults = new Set(defaults);
+
+    const tuples = [
+      ...match.map((map, index): [unknown, ShorthandRequiredValue[0]] => {
+        if (map.length === 3) {
+          seenDefaults.delete(map);
+        }
+
+        let value = args[index];
+        if (castToArray && value && !Array.isArray(value)) {
+          value = [value];
+        }
+
+        return [value, map[0]];
+      }),
+      ...Array.from(seenDefaults).map(
+        (map): [unknown, ShorthandRequiredValue[0]] => {
+          let value = defaultValues[map[2]] ?? map[2];
+          if (castToArray && value && !Array.isArray(value)) {
+            value = [value];
+          }
+
+          return [value, map[0]];
+        },
+      ),
+    ];
+
+    if (returnType === "shorthandObject" || returnType === "object") {
+      const target: Record<string, unknown> =
+        returnType === "shorthandObject" ? { [ShortHandSymbol]: true } : {};
+
+      for (const [value, prop] of tuples) {
+        if (typeof prop === "string") {
+          target[prop] = value;
+        } else {
+          setDeepPath(target, prop, value);
+        }
+      }
+
+      return target;
+    } else {
+      return tuples;
+    }
+  };
+}

package/src/runtime/native/styles/text-shadow.ts

@@ -0,0 +1,17 @@
+import { shorthandHandler } from "./shorthand";
+
+const width = [["textShadowOffset", "width"], "number"] as const;
+const height = [["textShadowOffset", "height"], "number"] as const;
+const blur = ["textShadowRadius", "number", "textShadowRadius"] as const;
+const color = ["textShadowColor", "color", "color"] as const;
+
+export const textShadow = shorthandHandler(
+  [
+    [width, height, blur, color],
+    [color, width, height, blur],
+    [width, height, color],
+    [color, width, height],
+    [width, height],
+  ],
+  [blur, color],
+);

package/src/runtime/native/styles/transform.ts

@@ -0,0 +1,21 @@
+import type { StyleFunctionResolver } from "./resolve";
+
+/**
+ * Handle the unparsable transform property by converting its values into StyleDeclarations
+ * Each value should be a StyleDescriptor function of the transform type
+ */
+export const transform: StyleFunctionResolver = (
+  resolveValue,
+  transformDescriptor,
+) => {
+  const transforms = resolveValue(transformDescriptor[2]);
+
+  if (Array.isArray(transforms)) {
+    return transforms.filter((transform) => transform !== undefined) as unknown;
+  } else if (transforms) {
+    // If it's a single transform, wrap it in an array
+    return [transforms];
+  } else {
+    return;
+  }
+};

package/src/runtime/native/styles/units.ts

@@ -0,0 +1,53 @@
+/* eslint-disable */
+import { rem as remObs, vh as vhObs, vw as vwObs } from "../reactivity";
+import type { StyleFunctionResolver } from "./resolve";
+
+export const em: StyleFunctionResolver = (resolve, func) => {
+  let value = func[2];
+
+  if (!value) {
+    return;
+  }
+
+  const emValue = resolve([{}, "var", ["__rn-css-em"]]);
+
+  if (typeof emValue !== "number") {
+    return undefined;
+  }
+
+  return round(Number(value) * emValue);
+};
+
+export const vw: StyleFunctionResolver = (_, func, get) => {
+  const value = func[2];
+
+  if (typeof value !== "number") {
+    return;
+  }
+
+  return round(get(vwObs) * (value / 100));
+};
+
+export const vh: StyleFunctionResolver = (_, func, get) => {
+  const value = func[2];
+
+  if (typeof value !== "number") {
+    return;
+  }
+
+  return round((value / 100) * get(vhObs));
+};
+
+export const rem: StyleFunctionResolver = (_, func, get) => {
+  const value = func[2];
+
+  if (typeof value !== "number") {
+    return;
+  }
+
+  return round(value * get(remObs));
+};
+
+function round(number: number) {
+  return Math.round((number + Number.EPSILON) * 100) / 100;
+}

package/src/runtime/native/styles/variables.ts

@@ -0,0 +1,88 @@
+import type { StyleDescriptor, StyleFunction } from "../../../compiler";
+import { isStyleDescriptorArray } from "../../utils";
+import {
+  rootVariables,
+  universalVariables,
+  VAR_SYMBOL,
+  type Getter,
+} from "../reactivity";
+import type { ResolveValueOptions, SimpleResolveValue } from "./resolve";
+
+export function varResolver(
+  resolve: SimpleResolveValue,
+  fn: StyleFunction,
+  get: Getter,
+  options: ResolveValueOptions,
+) {
+  const {
+    renderGuards,
+    inheritedVariables: variables = { [VAR_SYMBOL]: true },
+    inlineVariables,
+    variableHistory = new Set(),
+  } = options;
+
+  const args = fn[2];
+
+  let name: string | undefined;
+  let fallback: StyleDescriptor | undefined;
+
+  if (typeof args === "string") {
+    name = args;
+  } else {
+    const result = resolve(args);
+
+    if (isStyleDescriptorArray(result)) {
+      name = result[0] as string;
+      fallback = result[1];
+    }
+  }
+
+  if (typeof name !== "string") {
+    return;
+  }
+
+  // If this recurses back to the same variable, we need to stop
+  if (variableHistory.has(name)) {
+    return;
+  }
+
+  if (name in variables) {
+    renderGuards?.push(["v", name, variables[name]]);
+    return variables[name];
+  }
+
+  variableHistory.add(name);
+
+  let value = resolve(inlineVariables?.[name] as StyleDescriptor);
+  if (value !== undefined) {
+    options.inlineVariables ??= { [VAR_SYMBOL]: "inline" };
+    options.inlineVariables[name] = value;
+
+    return value;
+  }
+
+  value = resolve(variables[name]);
+  if (value !== undefined) {
+    renderGuards?.push(["v", name, value]);
+    options.inlineVariables ??= { [VAR_SYMBOL]: "inline" };
+    options.inlineVariables[name] = value;
+
+    return value;
+  }
+
+  value = resolve(get(universalVariables(name)));
+  if (value !== undefined) {
+    options.inlineVariables ??= { [VAR_SYMBOL]: "inline" };
+    options.inlineVariables[name] = value;
+    return value;
+  }
+
+  value = resolve(get(rootVariables(name)));
+  if (value !== undefined) {
+    options.inlineVariables ??= { [VAR_SYMBOL]: "inline" };
+    options.inlineVariables[name] = value;
+    return value;
+  }
+
+  return resolve(fallback);
+}

package/src/runtime/runtime.native.ts

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

package/src/runtime/runtime.ts

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

package/src/runtime/runtime.types.ts

@@ -0,0 +1,130 @@
+/* eslint-disable */
+import type { ComponentProps, ComponentType, ReactElement } from "react";
+import type {
+  ColorSchemeName,
+  ImageStyle,
+  TextStyle,
+  ViewStyle,
+} from "react-native";
+
+import type { ComponentPropsDotNotation, ReactComponent } from "./utils";
+import type { DotNotation, ResolveDotPath } from "./utils/dot-notation.types";
+
+/********************************     API      ********************************/
+
+export type StyledReactElement<
+  C extends ReactComponent,
+  M extends StyledConfiguration<C>,
+> = ReactElement<
+  ComponentProps<C> & {
+    [K in keyof M as K extends string
+      ? M[K] extends undefined | false
+        ? never
+        : M[K] extends true | string | object
+          ? K
+          : never
+      : never]?: string;
+  }
+>;
+
+export type StyledProps<P, M extends StyledConfiguration<any>> = P & {
+  [K in keyof M as K extends string
+    ? M[K] extends undefined | false
+      ? never
+      : M[K] extends true | string | object
+        ? K
+        : never
+    : never]?: string;
+};
+
+export type Styled = <
+  const C extends ReactComponent<any>,
+  const M extends StyledConfiguration<C>,
+>(
+  component: C,
+  mapping: M & StyledConfiguration<C>,
+  options?: StyledOptions,
+) => StyledComponent<C, M>;
+
+type StyledComponent<
+  C extends ReactComponent<any>,
+  M extends StyledConfiguration<C>,
+> = ComponentType<
+  ComponentProps<C> & {
+    [K in keyof M as K extends string
+      ? M[K] extends undefined | false
+        ? never
+        : M[K] extends true | string | object
+          ? K
+          : never
+      : never]?: string;
+  }
+>;
+
+export type StyledConfiguration<
+  C extends ReactComponent<any>,
+  K extends string = string,
+> = Record<
+  K,
+  | boolean
+  | ComponentPropsDotNotation<C>
+  | StyledConfigurationObject<C, ComponentPropsDotNotation<C> | false>
+>;
+
+type StyledConfigurationObject<
+  C extends ReactComponent<any>,
+  T extends ComponentPropsDotNotation<C> | false,
+> = {
+  target: T;
+  nativeStyleMapping?: T extends false
+    ? NativeStyleMapping<string, ComponentProps<C>>
+    : NativeStyleMapping<
+        ResolveDotPath<T, ComponentProps<C>>,
+        ComponentProps<C>
+      >;
+  /** @deprecated Please use nativeStyleMapping */
+  nativeStyleToProp?: NativeStyleMapping<
+    ResolveDotPath<T, ComponentProps<C>>,
+    ComponentProps<C>
+  >;
+};
+
+type NativeStyleMapping<T, S> = T extends object
+  ? {
+      [K in keyof T as K extends string ? K : never]: true | DotNotation<S>;
+    } & {
+      fill?: true | DotNotation<S>;
+      stroke?: true | DotNotation<S>;
+    }
+  : Record<string, true | DotNotation<S>>;
+
+export type StyledOptions = {
+  passThrough?: boolean;
+};
+
+/********************************    Styles    ********************************/
+
+export type InlineStyleRecord = Record<string, unknown> & {
+  // Used to differentiate between InlineStyleRecord and StyleRule
+  s?: never;
+};
+
+export type InlineStyle =
+  | InlineStyleRecord
+  | undefined
+  | null
+  | (Record<string, unknown> | undefined | null)[]
+  | (() => unknown);
+
+/*********************************    Misc    *********************************/
+
+export type Props = Record<string, any> | undefined | null;
+export type Callback = () => void;
+export type RNStyle = ViewStyle & TextStyle & ImageStyle;
+
+/********************************    Globals    ********************************/
+
+export type ColorScheme = {
+  get: () => ColorSchemeName;
+  set: (value: ColorSchemeName) => void;
+};

package/src/runtime/utils/components.ts

@@ -0,0 +1,15 @@
+/* eslint-disable */
+const ForwardRefSymbol = Symbol.for("react.forward_ref");
+export function getComponentType(component: any) {
+  switch (typeof component) {
+    case "function":
+    case "object":
+      return "$$typeof" in component && component.$$typeof === ForwardRefSymbol
+        ? "forwardRef"
+        : component.prototype?.isReactComponent
+          ? "class"
+          : typeof component;
+    default:
+      return "unknown";
+  }
+}