react-native-css 3.0.0-preview.2 → 3.0.0-preview.4

package/src/native/styles/index.ts

@@ -0,0 +1,198 @@
+/* eslint-disable */
+import type { InlineVariable, StyleRule } from "react-native-css/compiler";
+import { specificityCompareFn } from "react-native-css/utilities";
+
+import { getInteractionHandler } from "../react/interaction";
+import type { ComponentState, Config } from "../react/useNativeCss";
+import {
+  activeFamily,
+  containerLayoutFamily,
+  family,
+  focusFamily,
+  hoverFamily,
+  observable,
+  VAR_SYMBOL,
+  type Effect,
+  type VariableContextValue,
+} from "../reactivity";
+import { calculateProps } from "./calculate-props";
+
+export const stylesFamily = family(
+  (
+    hash: string,
+    rules: Set<StyleRule | InlineVariable | VariableContextValue>,
+  ) => {
+    const sortedRules = Array.from(rules).sort(specificityCompareFn);
+
+    const obs = observable((read) => calculateProps(read, sortedRules));
+
+    /**
+     * A family is a map, so we need to cleanup the observers when the the hash is no longer used
+     */
+    return Object.assign(obs, {
+      cleanup: (effect: Effect) => {
+        obs.observers.delete(effect);
+        if (obs.observers.size === 0) {
+          stylesFamily.delete(hash);
+        }
+      },
+    });
+  },
+);
+
+export function getStyledProps(
+  state: ComponentState,
+  inline: Record<string, any> | undefined | null,
+) {
+  let result: Record<string, any> | undefined;
+
+  const styledProps = state.stylesObs?.get(state.styleEffect);
+
+  for (const config of state.configs) {
+    result = deepMergeConfig(config, styledProps?.normal, inline, true);
+
+    if (styledProps?.important) {
+      result = deepMergeConfig(config, result, styledProps.important);
+    }
+
+    // Apply the handlers
+    if (hoverFamily.has(state.ruleEffectGetter)) {
+      result ??= {};
+      result.onHoverIn = getInteractionHandler(
+        state.ruleEffectGetter,
+        "onHoverIn",
+        inline?.onHoverIn,
+      );
+      result.onHoverOut = getInteractionHandler(
+        state.ruleEffectGetter,
+        "onHoverOut",
+        inline?.onHoverOut,
+      );
+    }
+
+    if (activeFamily.has(state.ruleEffectGetter)) {
+      result ??= {};
+      result.onPress = getInteractionHandler(
+        state.ruleEffectGetter,
+        "onPress",
+        inline?.onPress,
+      );
+      result.onPressIn = getInteractionHandler(
+        state.ruleEffectGetter,
+        "onPressIn",
+        inline?.onPressIn,
+      );
+      result.onPressOut = getInteractionHandler(
+        state.ruleEffectGetter,
+        "onPressOut",
+        inline?.onPressOut,
+      );
+    }
+
+    if (focusFamily.has(state.ruleEffectGetter)) {
+      result ??= {};
+      result.onBlur = getInteractionHandler(
+        state.ruleEffectGetter,
+        "onBlur",
+        inline?.onBlur,
+      );
+      result.onFocus = getInteractionHandler(
+        state.ruleEffectGetter,
+        "onFocus",
+        inline?.onFocus,
+      );
+    }
+
+    if (containerLayoutFamily.has(state.ruleEffectGetter)) {
+      result ??= {};
+      result.onLayout = getInteractionHandler(
+        state.ruleEffectGetter,
+        "onLayout",
+        inline?.onLayout,
+      );
+    }
+  }
+
+  return result;
+}
+
+function deepMergeConfig(
+  config: Config,
+  left: Record<string, any> | undefined,
+  right: Record<string, any> | undefined | null,
+  rightIsInline = false,
+) {
+  if (!config.target || !right) {
+    return { ...left };
+  }
+
+  let result = Object.assign({}, left, right);
+
+  if (
+    right &&
+    rightIsInline &&
+    config.source in right &&
+    config.target !== config.source
+  ) {
+    delete result[config.source];
+  }
+
+  /**
+   *  If target is a path, deep merge until we get to the last key
+   */
+  if (Array.isArray(config.target) && config.target.length > 1) {
+    for (let i = 0; i < config.target.length - 1; i++) {
+      const key = config.target[i];
+
+      if (key === undefined) {
+        return result;
+      }
+
+      result[key] = deepMergeConfig(
+        { source: config.source, target: config.target.slice(i + 1) },
+        left?.[key],
+        right?.[key],
+        rightIsInline,
+      );
+    }
+
+    return result;
+  }
+
+  const target = Array.isArray(config.target)
+    ? config.target[0]
+    : config.target;
+
+  if (target === undefined) {
+    return result;
+  }
+
+  let rightValue = right?.[target];
+
+  // Strip any inline variables from the target
+  if (rightIsInline && rightValue) {
+    if (Array.isArray(rightValue)) {
+      rightValue = rightValue.filter((v) => {
+        return typeof v !== "object" || !(v && VAR_SYMBOL in v);
+      });
+
+      if (rightValue.length === 0) {
+        rightValue = undefined;
+      }
+    } else if (
+      typeof rightValue === "object" &&
+      rightValue &&
+      VAR_SYMBOL in rightValue
+    ) {
+      rightValue = undefined;
+      delete result[target][VAR_SYMBOL];
+    }
+  }
+
+  if (rightValue !== undefined) {
+    result[target] =
+      left && target in left ? [left[target], rightValue] : rightValue;
+  }
+
+  return result;
+}

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;
+}