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

package/src/runtime/native/styles/functions/filters.ts

@@ -1,98 +0,0 @@
-import { isStyleDescriptorArray } from "../../../utils";
-import type { StyleFunctionResolver } from "../resolve";
-import { shorthandHandler } from "../shorthands/_handler";
-
-export const blur: StyleFunctionResolver = (resolveValue, value) => {
-  const args = resolveValue(value[2]);
-  return {
-    blur: (Array.isArray(args) ? args[0] : args) as unknown,
-  };
-};
-
-export const brightness: StyleFunctionResolver = (resolveValue, value) => {
-  const args = resolveValue(value[2]);
-  return {
-    brightness: (Array.isArray(args) ? args[0] : args) as unknown,
-  };
-};
-
-export const contrast: StyleFunctionResolver = (resolveValue, value) => {
-  const args = resolveValue(value[2]);
-  return {
-    contrast: (Array.isArray(args) ? args[0] : args) as unknown,
-  };
-};
-
-export const grayscale: StyleFunctionResolver = (resolveValue, value) => {
-  const args = resolveValue(value[2]);
-  return {
-    grayscale: (Array.isArray(args) ? args[0] : args) as unknown,
-  };
-};
-
-export const hueRotate: StyleFunctionResolver = (resolveValue, value) => {
-  const args = resolveValue(value[2]);
-  return {
-    hueRotate: (Array.isArray(args) ? args[0] : args) as unknown,
-  };
-};
-
-export const invert: StyleFunctionResolver = (resolveValue, value) => {
-  const args = resolveValue(value[2]);
-  return {
-    invert: (Array.isArray(args) ? args[0] : args) as unknown,
-  };
-};
-
-export const sepia: StyleFunctionResolver = (resolveValue, value) => {
-  const args = resolveValue(value[2]);
-  return {
-    sepia: (Array.isArray(args) ? args[0] : args) as unknown,
-  };
-};
-
-export const saturate: StyleFunctionResolver = (resolveValue, value) => {
-  const args = resolveValue(value[2]);
-  return {
-    saturate: (Array.isArray(args) ? args[0] : args) as unknown,
-  };
-};
-
-export const opacity: StyleFunctionResolver = (resolveValue, value) => {
-  const args = resolveValue(value[2]);
-  return {
-    hueRotate: (Array.isArray(args) ? args[0] : args) as unknown,
-  };
-};
-
-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 handler = shorthandHandler(
-  [
-    [offsetX, offsetY, blurRadius, color],
-    [color, offsetX, offsetY],
-    [color, offsetX, offsetY, blurRadius],
-    [offsetX, offsetY, color],
-    [offsetX, offsetY, blurRadius, color],
-  ],
-  [],
-  "object",
-);
-
-export const dropShadow: StyleFunctionResolver = (
-  resolveValue,
-  func,
-  get,
-  options,
-) => {
-  const args = resolveValue(func[2]);
-
-  return isStyleDescriptorArray(args)
-    ? {
-        dropShadow: handler(resolveValue, args, get, options),
-      }
-    : undefined;
-};

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

@@ -1,84 +0,0 @@
-import { isStyleDescriptorArray } from "../../../utils";
-import type { StyleFunctionResolver } from "../resolve";
-
-export const scale: StyleFunctionResolver = (resolveValue, descriptor) => {
-  const args = descriptor[2];
-
-  if (!isStyleDescriptorArray(args)) {
-    return { scale: resolveValue(args) };
-  }
-
-  const x = resolveValue(args[0]);
-  const y = resolveValue(args[1]);
-
-  const isXValid = typeof x === "string" || typeof x === "number";
-  const isYValid = typeof y === "string" || typeof y === "number";
-
-  if (isXValid && isYValid) {
-    return x === y ? { scale: x } : [{ scaleX: x }, { scaleY: y }];
-  } else if (isXValid) {
-    return { scaleX: x };
-  } else if (isYValid) {
-    return { scaleY: y };
-  }
-
-  return;
-};
-
-export const rotate: StyleFunctionResolver = (resolveValue, descriptor) => {
-  const args = descriptor[2];
-
-  if (!isStyleDescriptorArray(args)) {
-    return { rotate: resolveValue(args) };
-  }
-
-  const x = resolveValue(args[0]);
-  const y = resolveValue(args[1]);
-  const z = resolveValue(args[2]);
-
-  const isXValid = typeof x === "string" || typeof x === "number";
-  const isYValid = typeof y === "string" || typeof y === "number";
-  const isZValid = typeof z === "string" || typeof z === "number";
-
-  if (isXValid && isYValid && isZValid) {
-    return [{ rotateX: x }, { rotateY: y }, { rotateZ: z }];
-  } else if (isXValid && isYValid) {
-    return [{ rotateX: x }, { rotateY: y }];
-  } else if (isXValid && isZValid) {
-    return [{ rotateX: x }, { rotateZ: z }];
-  } else if (isYValid && isZValid) {
-    return [{ rotateY: y }, { rotateZ: z }];
-  } else if (isXValid) {
-    return { rotateX: x };
-  } else if (isYValid) {
-    return { rotateY: y };
-  } else if (isZValid) {
-    return { rotateZ: z };
-  }
-
-  return;
-};
-
-export const translate: StyleFunctionResolver = (resolveValue, descriptor) => {
-  const args = descriptor[2];
-
-  if (!isStyleDescriptorArray(args)) {
-    return;
-  }
-
-  const x = resolveValue(args[0]);
-  const y = resolveValue(args[1]);
-
-  const isXValid = typeof x === "string" || typeof x === "number";
-  const isYValid = typeof y === "string" || typeof y === "number";
-
-  if (isXValid && isYValid) {
-    return [{ translateX: x }, { translateY: y }];
-  } else if (isXValid) {
-    return { translateX: x };
-  } else if (isYValid) {
-    return { translateY: y };
-  }
-
-  return;
-};

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,164 +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 { 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,
-  animationName: shorthands.animation,
-  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/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;
-    }
-  };
-}