react-native-css 0.0.0-nightly.d48061c → 0.0.0-nightly.da5ce0f

package/src/native/styles/resolve.ts

@@ -0,0 +1,164 @@
+/* eslint-disable */
+
+import type {
+  InlineVariable,
+  StyleDescriptor,
+  StyleFunction,
+} from "react-native-css/compiler";
+
+import type { RenderGuard } from "../conditions/guards";
+import { type Getter, type VariableContextValue } from "../reactivity";
+import type { calculateProps } from "./calculate-props";
+import { transformKeys } from "./defaults";
+import * as functions from "./functions";
+import { lineHeight } from "./line-height";
+import * as shorthands from "./shorthands";
+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 functionResolvers = {
+  ...shorthands,
+  ...functions,
+  lineHeight,
+  em,
+  rem,
+  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": {
+      if (value === "unset") {
+        return null;
+      } else if (value.endsWith("px")) {
+        // Inline vars() might set a value with a px suffix
+        return parseInt(value.slice(0, -2), 10);
+      } else {
+        return 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 functionResolvers) {
+        const fn = functionResolvers[name as keyof typeof functionResolvers];
+
+        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.
+        return { [name]: 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;
+            })
+            .filter((value) => value !== "/")
+            .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/native/styles/shorthands/_handler.ts

@@ -0,0 +1,122 @@
+/* eslint-disable */
+import { isStyleDescriptorArray } from "react-native-css/utilities";
+
+import { setDeepPath } from "../../objects";
+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/native/styles/shorthands/animation.ts

@@ -0,0 +1,131 @@
+/* eslint-disable */
+import { StyleCollection } from "react-native-css/native-internal";
+
+import { applyShorthand } from "../../objects";
+import type { StyleFunctionResolver } from "../resolve";
+import { shorthandHandler } from "./_handler";
+
+const name = ["animationName", "string", "none"] as const;
+const delay = ["animationDelay", "number", 0] as const;
+const duration = ["animationDuration", "number", 0] as const;
+const iteration = [
+  "animationIterationCount",
+  ["number", "infinite"],
+  1,
+] as const;
+const fill = [
+  "animationFillMode",
+  ["none", "forwards", "backwards", "both"],
+  "none",
+] as const;
+const playState = [
+  "animationPlayState",
+  ["running", "paused"],
+  "running",
+] as const;
+const direction = [
+  "animationDirection",
+  ["normal", "reverse", "alternate", "alternate-reverse"],
+  "normal",
+] as const;
+const timingFunction = [
+  "animationTimingFunction",
+  ["linear", "ease", "ease-in", "ease-out", "ease-in-out", "object"],
+  "ease",
+] as const;
+
+export const animationShorthand = shorthandHandler(
+  [
+    [name],
+    [duration, name],
+    [name, duration],
+    [name, duration, iteration],
+    [name, duration, timingFunction, iteration],
+    [duration, delay, name],
+    [duration, delay, iteration, name],
+    [duration, delay, iteration, timingFunction, name],
+    [name, duration, timingFunction, delay, iteration, fill],
+  ],
+  [
+    name,
+    delay,
+    direction,
+    duration,
+    fill,
+    iteration,
+    playState,
+    timingFunction,
+  ],
+  "tuples",
+);
+
+export const animation: StyleFunctionResolver = (
+  resolveValue,
+  value,
+  get,
+  options,
+) => {
+  const animationShortHandTuples = animationShorthand(
+    resolveValue,
+    value,
+    get,
+    options,
+  );
+
+  if (!Array.isArray(animationShortHandTuples)) {
+    return;
+  }
+
+  const nameTuple = animationShortHandTuples.find(
+    (tuple) => tuple[1] === "animationName",
+  );
+
+  const name = nameTuple?.[0];
+
+  if (!nameTuple || typeof name !== "string") {
+    return;
+  }
+
+  const keyframes = get(StyleCollection.keyframes(name));
+
+  const animation: Record<string, any> = {};
+  for (const [progress, declarations] of keyframes) {
+    animation[progress] ??= {};
+
+    const props = options.calculateProps?.(
+      get,
+      // Cast this into a StyleRule[]
+      [{ s: [0], d: declarations }],
+      options.renderGuards,
+      options.inheritedVariables,
+      options.inlineVariables,
+    );
+
+    if (!props) {
+      continue;
+    }
+
+    if (props.normal) {
+      Object.assign(animation[progress], props.normal);
+    }
+    if (props.important) {
+      Object.assign(animation[progress], props.important);
+    }
+
+    animation[progress] = animation[progress].style;
+  }
+
+  nameTuple[0] = animation;
+
+  return applyShorthand(animationShortHandTuples);
+};
+
+export const animationName: StyleFunctionResolver = (
+  resolveValue,
+  value,
+  get,
+  options,
+) => {
+  const shorthand: any = animation(resolveValue, value, get, options);
+  return shorthand.animationName;
+};

package/src/native/styles/shorthands/box-shadow.ts

@@ -0,0 +1,71 @@
+import type { StyleDescriptor } from "react-native-css/compiler";
+import { isStyleDescriptorArray } from "react-native-css/utilities";
+
+import type { StyleFunctionResolver } from "../resolve";
+import { shorthandHandler } from "./_handler";
+
+const color = ["color", "string"] as const;
+const offsetX = ["offsetX", "number"] as const;
+const offsetY = ["offsetY", "number"] as const;
+const blurRadius = ["blurRadius", "number"] as const;
+const spreadDistance = ["spreadDistance", "number"] as const;
+// const inset = ["inset", "string"] as const;
+
+const handler = shorthandHandler(
+  [
+    [offsetX, offsetY, blurRadius, spreadDistance],
+    [offsetX, offsetY, blurRadius, spreadDistance, color],
+    [color, offsetX, offsetY],
+    [color, offsetX, offsetY, blurRadius, spreadDistance],
+    [offsetX, offsetY, color],
+    [offsetX, offsetY, blurRadius, color],
+  ],
+  [],
+  "object",
+);
+
+export const boxShadow: StyleFunctionResolver = (
+  resolveValue,
+  func,
+  get,
+  options,
+) => {
+  const args = resolveValue(func[2]);
+
+  if (!isStyleDescriptorArray(args)) {
+    return args;
+  } else {
+    return args
+      .flatMap(flattenShadowDescriptor)
+      .map((shadows) => {
+        if (shadows === undefined) {
+          return;
+        } else {
+          return omitTransparentShadows(
+            handler(resolveValue, shadows, get, options),
+          );
+        }
+      })
+      .filter((v) => v !== undefined);
+  }
+};
+
+function flattenShadowDescriptor(arg: StyleDescriptor): StyleDescriptor[] {
+  if (isStyleDescriptorArray(arg) && isStyleDescriptorArray(arg[0])) {
+    return arg.map((arg) => {
+      return flattenShadowDescriptor(arg);
+    });
+  }
+
+  return [arg];
+}
+
+function omitTransparentShadows(style: unknown) {
+  if (typeof style === "object" && style && "color" in style) {
+    if (style.color === "#0000" || style.color === "transparent") {
+      return;
+    }
+  }
+
+  return style;
+}

package/src/native/styles/variables.ts

@@ -0,0 +1,88 @@
+import type { StyleDescriptor, StyleFunction } from "react-native-css/compiler";
+import {
+  rootVariables,
+  universalVariables,
+} from "react-native-css/native-internal";
+import { isStyleDescriptorArray } from "react-native-css/utilities";
+
+import { 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 resolve(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/native-internal/README.md

@@ -0,0 +1,11 @@
+# native-internal
+
+This package is separate from `native` to prevent a circular dependency.
+
+- The `native/index.ts` needs to import the `metro.ts`,
+- `metro.ts` import the `.css` files (as a work around for lazy bundles)
+- `.css` files import the `StyleCollection`
+
+To prevent multiple versions of `StyleCollection` and relative path issues, we created `native-internal` to break the dependency chain.
+
+This package should contain all the singular globals.

package/src/native-internal/index.ts

@@ -0,0 +1,3 @@
+export * from "./root";
+export * from "./style-collection";
+export * from "./variables";

package/src/native-internal/root.ts

@@ -0,0 +1,44 @@
+import { Platform, PlatformColor } from "react-native";
+
+import type { StyleDescriptor, VariableValue } from "react-native-css/compiler";
+
+import { testMediaQuery } from "../native/conditions/media-query";
+import { family, observable, type Observable } from "../native/reactivity";
+
+const rootVariableFamily = () => {
+  return family<string, Observable<StyleDescriptor, VariableValue[]>>(() => {
+    const obs = observable<StyleDescriptor, VariableValue[]>(
+      (read, variableValue) => {
+        if (!variableValue) return undefined;
+
+        for (const [value, mediaQuery] of variableValue) {
+          if (!mediaQuery) {
+            return value;
+          }
+
+          if (testMediaQuery(mediaQuery, read)) {
+            return value;
+          }
+        }
+
+        return undefined;
+      },
+    );
+
+    return obs;
+  });
+};
+
+export const rootVariables = rootVariableFamily();
+export const universalVariables = rootVariableFamily();
+
+rootVariables("__rn-css-rem").set([[14]]);
+// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+rootVariables("__rn-css-color").set([
+  [
+    Platform.OS === "ios"
+      ? PlatformColor("label", "labelColor")
+      : PlatformColor("?attr/textColorPrimary", "SystemBaseHighColor"),
+  ],
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+] as any);