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

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

@@ -0,0 +1,23 @@
+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 && transform !== "initial",
+    ) 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,57 @@
+/* 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, get) => {
+  let value = func[2];
+
+  if (typeof value !== "number") {
+    return;
+  }
+
+  let emValue = resolve([{}, "var", ["__rn-css-em"]]);
+
+  if (typeof emValue !== "number") {
+    emValue = get(remObs);
+  }
+
+  if (typeof emValue !== "number") {
+    return;
+  }
+
+  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,84 @@
+import type { StyleDescriptor, StyleFunction } from "../../../compiler";
+import { isStyleDescriptorArray } from "../../utils";
+import { VAR_SYMBOL, type Getter } from "../reactivity";
+import { rootVariables, universalVariables } from "../root";
+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";
+  }
+}

package/src/runtime/utils/dot-notation.types.ts

@@ -0,0 +1,118 @@
+/* eslint-disable */
+// ---------- Base Utilities ----------
+
+type Falsy = undefined | null | false | "";
+type RegisteredStyle<T> = number & { __registeredStyleBrand: T };
+
+type Primitive =
+  | string
+  | number
+  | boolean
+  | bigint
+  | symbol
+  | null
+  | undefined
+  | Date
+  | RegExp
+  | false
+  | true;
+
+interface RecursiveArray<T>
+  extends Array<T | ReadonlyArray<T> | RecursiveArray<T>> {}
+
+export type StyleProp<T> =
+  | T
+  | RegisteredStyle<T>
+  | RecursiveArray<T | RegisteredStyle<T> | Falsy>
+  | Falsy;
+
+// ---------- Type Helpers ----------
+
+// Unwrap nested arrays (from RecursiveArray)
+type UnwrapRecursiveArray<T> = T extends (infer I)[]
+  ? UnwrapRecursiveArray<I>
+  : T;
+
+// Remove null, false, undefined, etc.
+type RemoveFalsy<T> = Exclude<T, Falsy>;
+
+// Remove RegisteredStyle (branded numbers)
+type RemoveRegisteredStyle<T> = T extends RegisteredStyle<any> ? never : T;
+
+// Final cleaned style object from StyleProp<T>
+type ExtractStyleObject<T> = RemoveRegisteredStyle<
+  RemoveFalsy<UnwrapRecursiveArray<T extends StyleProp<infer U> ? U : T>>
+>;
+
+// Check if something is a non-array plain object
+type IsPlainObject<T> = T extends object
+  ? T extends Function
+    ? false
+    : T extends readonly any[]
+      ? false
+      : true
+  : false;
+
+// ---------- Resolve Path Type Helpers ----------
+
+type Split<
+  T extends string,
+  Delimiter extends string,
+> = T extends `${infer Head}${Delimiter}${infer Tail}`
+  ? [Head, ...Split<Tail, Delimiter>]
+  : [T];
+
+// Special parser to break down dot + bracket notation (e.g., "users[0].name")
+type ParsePath<T extends string> =
+  T extends `${infer Head}[${number}]${infer Rest}`
+    ? [Head, number, ...ParsePath<Rest extends `.${infer R}` ? R : Rest>]
+    : Split<T, ".">;
+
+type ResolvePath<T, Parts extends readonly any[]> = Parts extends [
+  infer Head,
+  ...infer Rest,
+]
+  ? Head extends keyof T
+    ? ResolvePath<T[Head], Rest>
+    : Head extends number
+      ? T extends (infer U)[]
+        ? ResolvePath<U, Rest>
+        : never
+      : never
+  : T;
+
+// ---------- Dot Notation Utility ----------
+
+export type DotNotation<
+  T,
+  Depth extends unknown[] = [],
+  MaxDepth extends number = 10,
+  Key extends keyof T = keyof T,
+> = Depth["length"] extends MaxDepth
+  ? never
+  : Key extends string
+    ? unknown extends T[Key]
+      ? Key | `${Key}.${string}`
+      : // Handle StyleProp<T> and clean unions
+        ExtractStyleObject<NonNullable<T[Key]>> extends infer Cleaned
+        ? Cleaned extends Primitive
+          ? Key
+          : Cleaned extends readonly (infer E)[]
+            ? E extends Primitive
+              ? Key | `${Key}[number]`
+              :
+                  | Key
+                  | `${Key}[number]`
+                  | `${Key}[number].${DotNotation<E, [...Depth, 0], MaxDepth>}`
+            : IsPlainObject<Cleaned> extends true
+              ? Key | `${Key}.${DotNotation<Cleaned, [...Depth, 0], MaxDepth>}`
+              : Key
+        : never
+    : never;
+
+// ---------- Resolve Dot Path ----------
+
+export type ResolveDotPath<T, Path extends string> = ResolvePath<
+  T,
+  ParsePath<Path>
+>;

package/src/runtime/utils/index.ts

@@ -0,0 +1,5 @@
+export * from "./objects";
+export * from "./components";
+export * from "./specificity";
+export * from "./style-value";
+export * from "./utils.types";

package/src/runtime/utils/objects.ts

@@ -0,0 +1,109 @@
+/* eslint-disable */
+import { ShortHandSymbol } from "../native/styles/constants";
+import { transformKeys } from "../native/styles/defaults";
+
+export function getDeepPath(source: any, paths: string | string[] | false) {
+  if (!source) {
+    return;
+  }
+
+  if (paths === false) {
+    return undefined;
+  }
+
+  if (Array.isArray(paths)) {
+    let target = source;
+
+    for (const path of paths) {
+      if (typeof target !== "object" || !target || !(path in target)) {
+        return undefined;
+      }
+
+      target = target[path];
+    }
+
+    return target;
+  } else if (transformKeys.has(paths)) {
+    return Array.isArray(source?.transform)
+      ? source.transform.find((t: any) => t[paths] !== undefined)
+      : source.transform;
+  } else {
+    return source?.[paths];
+  }
+}
+
+export function applyShorthand(value: any) {
+  if (value === undefined) {
+    return;
+  }
+
+  const target: Record<string, unknown> = { [ShortHandSymbol]: true };
+
+  const values = value as [unknown, string][];
+
+  for (const [value, prop] of values) {
+    target[prop] = value;
+  }
+
+  return target;
+}
+
+export function applyValue(
+  target: Record<string, any>,
+  prop: string,
+  value: any,
+) {
+  // This is confusing.
+  // An undefined value means "don't set anything" (something failed while parsing)
+  // While a null value means "remove this value", which in React Native means "set to undefined"
+  if (value === undefined) {
+    return;
+  } else if (value === null) {
+    value = undefined;
+  }
+
+  if (transformKeys.has(prop)) {
+    if (!Array.isArray(target.transform)) {
+      target.transform = [];
+    }
+
+    const transformArray: Record<string, unknown>[] = target.transform;
+
+    // Remove any existing values
+    target.transform = transformArray.filter((t) => !(prop in t));
+
+    if (Array.isArray(value)) {
+      target.transform.push(...value);
+    } else {
+      target.transform.push(value);
+    }
+    return;
+  } else if (typeof value === "object" && value && ShortHandSymbol in value) {
+    delete value[ShortHandSymbol];
+    Object.assign(target, value);
+    return;
+  }
+
+  target[prop] = value;
+}
+
+export function setDeepPath(
+  target: Record<string, any>,
+  paths: string | string[] | readonly string[],
+  value: any,
+) {
+  if (typeof paths === "string") {
+    target[paths] = value;
+    return target;
+  }
+
+  for (let i = 0; i < paths.length - 1; i++) {
+    const path = paths[i]!;
+    target[path] ??= {};
+    target = target[path];
+  }
+
+  target[paths[paths.length - 1]!] = value;
+
+  return target;
+}

package/src/runtime/utils/specificity.ts

@@ -0,0 +1,45 @@
+/* eslint-disable */
+import type { SpecificityArray, StyleRule } from "../../compiler";
+import type { InlineStyleRecord } from "../runtime.types";
+
+export const Specificity = {
+  Order: 0,
+  ClassName: 1,
+  Important: 2,
+  Inline: 3,
+  PseudoElements: 4,
+  PseudoClass: 1,
+  // Id: 0, - We don't support ID yet
+  // StyleSheet: 0, - We don't support multiple stylesheets
+};
+
+const Important = Specificity.Important;
+const Inline = Specificity.Inline;
+const PseudoElements = Specificity.PseudoElements;
+const ClassName = Specificity.ClassName;
+const Order = Specificity.Order;
+
+export const inlineSpecificity: SpecificityArray = [];
+inlineSpecificity[Specificity.Inline] = 1;
+
+export const specificityCompareFn = (
+  a: StyleRule | InlineStyleRecord,
+  b: StyleRule | InlineStyleRecord,
+) => {
+  const aSpec = a.s ? a.s : inlineSpecificity;
+  const bSpec = b.s ? b.s : inlineSpecificity;
+
+  if (aSpec[Important] !== bSpec[Important]) {
+    return (aSpec[Important] || 0) - (bSpec[Important] || 0);
+  } else if (aSpec[Inline] !== bSpec[Inline]) {
+    return (aSpec[Inline] || 0) - (bSpec[Inline] || 0);
+  } else if (aSpec[PseudoElements] !== bSpec[PseudoElements]) {
+    return (aSpec[PseudoElements] || 0) - (bSpec[PseudoElements] || 0);
+  } else if (aSpec[ClassName] !== bSpec[ClassName]) {
+    return (aSpec[ClassName] || 0) - (bSpec[ClassName] || 0);
+  } else if (aSpec[Order] !== bSpec[Order]) {
+    return (aSpec[Order] || 0) - (bSpec[Order] || 0);
+  } else {
+    return 0;
+  }
+};

package/src/runtime/utils/style-value.ts

@@ -0,0 +1,24 @@
+import type { StyleDescriptor, StyleFunction } from "../../compiler";
+
+export function isStyleDescriptorArray(
+  value: unknown,
+): value is StyleDescriptor[] {
+  if (Array.isArray(value)) {
+    // If its an array and the first item is an object, the only allowed value is an array
+    return typeof value[0] === "object" ? Array.isArray(value[0]) : true;
+  }
+
+  return false;
+}
+
+export function isStyleFunction(
+  value: StyleDescriptor,
+): value is StyleFunction {
+  if (Array.isArray(value)) {
+    return typeof value[0] === "object"
+      ? Object.keys(value[0]).length === 0
+      : false;
+  }
+
+  return false;
+}

package/src/runtime/utils/utils.types.ts

@@ -0,0 +1,19 @@
+/* eslint-disable */
+import type {
+  ClassicComponentClass,
+  ComponentClass,
+  ComponentProps,
+  ForwardRefExoticComponent,
+  FunctionComponent,
+} from "react";
+
+import type { DotNotation } from "./dot-notation.types";
+
+export type ReactComponent<P = any> =
+  | ClassicComponentClass<P>
+  | ComponentClass<P>
+  | FunctionComponent<P>
+  | ForwardRefExoticComponent<P>;
+
+export type ComponentPropsDotNotation<C extends ReactComponent<any>> =
+  DotNotation<ComponentProps<C>>;