react-native-css 3.0.0-preview.1 → 3.0.0-preview.3

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

@@ -1,197 +0,0 @@
-/* eslint-disable */
-import type { InlineVariable, StyleRule } from "../../../compiler";
-import { specificityCompareFn } from "../../utils";
-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/runtime/native/styles/resolve.ts

@@ -1,162 +0,0 @@
-/* eslint-disable */
-
-import type {
-  InlineVariable,
-  StyleDescriptor,
-  StyleFunction,
-} from "../../../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 * 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,
-  animationName: shorthands.animation,
-  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/runtime/native/styles/shorthands/_handler.ts

@@ -1,121 +0,0 @@
-/* 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/shorthands/animation.ts

@@ -1,123 +0,0 @@
-/* eslint-disable */
-import { StyleCollection } from "react-native-css/style-collection";
-
-import { applyShorthand } from "../../../utils";
-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;
-  }
-
-  animationShortHandTuples.pop();
-
-  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);
-};

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

@@ -1,74 +0,0 @@
-import { isStyleDescriptorArray } from "../../../utils";
-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, color],
-    [color, offsetX, offsetY],
-    [color, offsetX, offsetY, blurRadius],
-    [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((shadows) => {
-        if (shadows === undefined) {
-          return [];
-        } else if (isStyleDescriptorArray(shadows)) {
-          if (shadows.length === 0) {
-            return [];
-          } else if (Array.isArray(shadows[0])) {
-            return shadows
-              .map((shadow) => {
-                return omitTransparentShadows(
-                  handler(resolveValue, shadow, get, options),
-                );
-              })
-              .filter((v) => v !== undefined);
-          } else {
-            return omitTransparentShadows(
-              handler(resolveValue, shadows, get, options),
-            );
-          }
-        } else {
-          return omitTransparentShadows(
-            handler(resolveValue, shadows, get, options),
-          );
-        }
-      })
-      .filter((v) => v !== undefined);
-  }
-};
-
-function omitTransparentShadows(style: unknown) {
-  if (typeof style === "object" && style && "color" in style) {
-    if (style.color === "#0000" || style.color === "transparent") {
-      return;
-    }
-  }
-
-  return style;
-}