react-native-css 2.1.2 → 3.0.0-nightly.4723140

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

@@ -0,0 +1,333 @@
+/* eslint-disable */
+import type { InlineVariable, StyleRule } from "../../../compiler";
+import {
+  applyValue,
+  Specificity as S,
+  specificityCompareFn,
+} from "../../utils";
+import type { RenderGuard } from "../conditions/guards";
+import { getInteractionHandler } from "../react/interaction";
+import type { ComponentState, Config } from "../react/useNativeCss";
+import {
+  activeFamily,
+  containerLayoutFamily,
+  family,
+  focusFamily,
+  hoverFamily,
+  observable,
+  VAR_SYMBOL,
+  type Effect,
+  type Getter,
+  type VariableContextValue,
+} from "../reactivity";
+import { resolveValue } from "./resolve";
+
+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);
+        }
+      },
+    });
+  },
+);
+
+function calculateProps(
+  get: Getter,
+  rules: Array<StyleRule | InlineVariable | VariableContextValue>,
+) {
+  let normal: Record<string, any> | undefined;
+  let important: Record<string, any> | undefined;
+
+  const delayedStyles: (() => void)[] = [];
+
+  const guards: RenderGuard[] = [];
+
+  const inheritedVariables: VariableContextValue = {
+    [VAR_SYMBOL]: true,
+  };
+
+  const inlineVariables: InlineVariable = {
+    [VAR_SYMBOL]: "inline",
+  };
+
+  for (const rule of rules) {
+    if (VAR_SYMBOL in rule) {
+      if (typeof rule[VAR_SYMBOL] === "string") {
+        Object.assign(inlineVariables, rule);
+      } else {
+        Object.assign(inheritedVariables, rule);
+      }
+      continue;
+    }
+
+    if (rule.v) {
+      for (const variable of rule.v) {
+        inlineVariables[variable[0]] = variable[1];
+      }
+    }
+
+    if (rule.d) {
+      let topLevelTarget = rule.s?.[S.Important]
+        ? (important ??= {})
+        : (normal ??= {});
+      let target = topLevelTarget;
+
+      const ruleTarget = rule.target || "style";
+
+      if (typeof ruleTarget === "string") {
+        target = target[ruleTarget] ??= {};
+      } else if (ruleTarget) {
+        for (const path of ruleTarget) {
+          target = target[path] ??= {};
+        }
+      }
+
+      for (const declaration of rule.d) {
+        if (!Array.isArray(declaration)) {
+          // Static styles
+          Object.assign(target, declaration);
+        } else {
+          // Dynamic styles
+          let value: any = declaration[0];
+          let propPath = declaration[1];
+          let prop = "";
+
+          if (typeof propPath === "string") {
+            if (propPath.startsWith("^")) {
+              propPath = propPath.slice(1);
+              target = topLevelTarget[propPath] ??= {};
+            }
+            prop = propPath;
+          } else {
+            for (prop of propPath) {
+              if (prop.startsWith("^")) {
+                prop = prop.slice(1);
+                target = topLevelTarget[prop] ??= {};
+              } else {
+                target = target[prop] ??= {};
+              }
+            }
+          }
+
+          if (Array.isArray(value)) {
+            const shouldDelay = declaration[2];
+
+            if (shouldDelay) {
+              /**
+               * We need to delay the resolution of this value until after all
+               * styles have been calculated. But another style might override
+               * this value. So we set a placeholder value and only override
+               * if the placeholder is preserved
+               *
+               * This also ensures the props exist, so setValue will properly
+               * mutate the props object and not create a new one
+               */
+              const originalValue = value;
+              value = {};
+              delayedStyles.push(() => {
+                if (target[prop] === value) {
+                  delete target[prop];
+                  value = resolveValue(originalValue, get, {
+                    inlineVariables,
+                    inheritedVariables,
+                    renderGuards: guards,
+                  });
+                  applyValue(target, prop, value);
+                }
+              });
+            } else {
+              value = resolveValue(value, get, {
+                inlineVariables,
+                inheritedVariables,
+                renderGuards: guards,
+              });
+            }
+
+            applyValue(target, prop, value);
+          }
+        }
+      }
+    }
+  }
+
+  for (const delayedStyle of delayedStyles) {
+    delayedStyle();
+  }
+
+  return {
+    normal,
+    guards,
+    important,
+  };
+}
+
+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.ruleEffect)) {
+      result ??= {};
+      result.onHoverIn = getInteractionHandler(
+        state.ruleEffect,
+        "onHoverIn",
+        inline?.onHoverIn,
+      );
+      result.onHoverOut = getInteractionHandler(
+        state.ruleEffect,
+        "onHoverOut",
+        inline?.onHoverOut,
+      );
+    }
+
+    if (activeFamily.has(state.ruleEffect)) {
+      result ??= {};
+      result.onPress = getInteractionHandler(
+        state.ruleEffect,
+        "onPress",
+        inline?.onPress,
+      );
+      result.onPressIn = getInteractionHandler(
+        state.ruleEffect,
+        "onPressIn",
+        inline?.onPressIn,
+      );
+      result.onPressOut = getInteractionHandler(
+        state.ruleEffect,
+        "onPressOut",
+        inline?.onPressOut,
+      );
+    }
+
+    if (focusFamily.has(state.ruleEffect)) {
+      result ??= {};
+      result.onBlur = getInteractionHandler(
+        state.ruleEffect,
+        "onBlur",
+        inline?.onBlur,
+      );
+      result.onFocus = getInteractionHandler(
+        state.ruleEffect,
+        "onFocus",
+        inline?.onFocus,
+      );
+    }
+
+    if (containerLayoutFamily.has(state.ruleEffect)) {
+      result ??= {};
+      result.onLayout = getInteractionHandler(
+        state.ruleEffect,
+        "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

@@ -0,0 +1,131 @@
+/* eslint-disable */
+import type {
+  InlineVariable,
+  StyleDescriptor,
+  StyleFunction,
+} from "../../../compiler";
+import type { RenderGuard } from "../conditions/guards";
+import { type Getter, type VariableContextValue } from "../reactivity";
+import { animation } from "./animation";
+import { calc } from "./calc";
+import { transformKeys } from "./defaults";
+import { textShadow } from "./text-shadow";
+import { transform } from "./transform";
+import { em, rem, vh, vw } from "./units";
+import { varResolver } from "./variables";
+
+export type SimpleResolveValue = (
+  value: StyleDescriptor,
+  castToArray?: boolean,
+) => any;
+
+export type StyleFunctionResolver = (
+  resolveValue: SimpleResolveValue,
+  value: StyleFunction,
+  get: Getter,
+  options: ResolveValueOptions,
+) => any;
+
+const functions: Record<string, StyleFunctionResolver> = {
+  calc,
+  em,
+  vw,
+  vh,
+  rem,
+  "@textShadow": textShadow,
+  "@transform": transform,
+  animationName: animation,
+};
+
+export type ResolveValueOptions = {
+  castToArray?: boolean;
+  inheritedVariables?: VariableContextValue;
+  inlineVariables?: InlineVariable | undefined;
+  renderGuards?: RenderGuard[];
+  variableHistory?: Set<string>;
+};
+
+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":
+      return value.endsWith("px") // Inline vars() might set a value with a px suffix
+        ? parseInt(value.slice(0, -2), 10)
+        : value;
+    case "object": {
+      if (!Array.isArray(value)) {
+        return value;
+      }
+
+      if (isDescriptorArray(value)) {
+        value = value.flatMap((d) => {
+          const value = resolveValue(d, get, options);
+          return value === undefined ? [] : value;
+        }) as StyleDescriptor[];
+
+        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 functions) {
+        const fn = functions[name];
+
+        if (typeof fn !== "function") {
+          throw new Error(`Unknown function: ${name}`);
+        }
+
+        value = fn(simpleResolve, value as StyleFunction, get, options);
+      } else if (transformKeys.has(name)) {
+        // translate, rotate, scale, etc.
+        return simpleResolve(value[2]?.[0], castToArray);
+      } else if (transformKeys.has(name.slice(1))) {
+        // @translate, @rotate, @scale, etc.
+        return { [name.slice(1)]: simpleResolve(value[2], castToArray)[0] };
+      } else {
+        const args = simpleResolve(value[2], castToArray);
+        if (args === undefined) {
+          return;
+        } else if (Array.isArray(args)) {
+          value = `${name}(${args.join(", ")})`;
+        } 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/shorthand.ts

@@ -0,0 +1,101 @@
+/* eslint-disable */
+import type { StyleDescriptor } from "../../../compiler";
+import { defaultValues } from "./defaults";
+import type { StyleFunctionResolver } from "./resolve";
+
+type ShorthandType =
+  | "string"
+  | "number"
+  | "length"
+  | "color"
+  | Readonly<string[]>;
+
+type ShorthandRequiredValue =
+  | readonly [string | readonly string[], ShorthandType]
+  | ShorthandDefaultValue;
+
+type ShorthandDefaultValue = readonly [
+  string | readonly string[],
+  ShorthandType,
+  any,
+];
+
+export const ShortHandSymbol = Symbol();
+
+export function shorthandHandler(
+  mappings: ShorthandRequiredValue[][],
+  defaults: ShorthandDefaultValue[],
+) {
+  const resolveFn: StyleFunctionResolver = (
+    resolveValue,
+    func,
+    _,
+    { castToArray },
+  ) => {
+    const args = func[2] || [];
+
+    const resolved = args.flatMap((value) => {
+      return resolveValue(value, castToArray);
+    });
+
+    const match = mappings.find((mapping) => {
+      return (
+        resolved.length === mapping.length &&
+        mapping.every((map, index) => {
+          const type = map[1];
+          const value = resolved[index];
+
+          if (Array.isArray(type)) {
+            return type.includes(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);
+
+    return Object.assign(
+      [
+        ...match.map((map, index): StyleDescriptor => {
+          if (map.length === 3) {
+            seenDefaults.delete(map);
+          }
+
+          let value = resolved[index];
+          if (castToArray && value && !Array.isArray(value)) {
+            value = [value];
+          }
+
+          return [value, map[0]];
+        }),
+        ...Array.from(seenDefaults).map((map): StyleDescriptor => {
+          let value = defaultValues[map[2]] ?? map[2];
+          if (castToArray && value && !Array.isArray(value)) {
+            value = [value];
+          }
+
+          return [value, map[0]];
+        }),
+      ],
+      { [ShortHandSymbol]: true },
+    );
+  };
+
+  return resolveFn;
+}

package/src/runtime/native/styles/text-shadow.ts

@@ -0,0 +1,17 @@
+import { shorthandHandler } from "./shorthand";
+
+const width = [["textShadowOffset", "width"], "number"] as const;
+const height = [["textShadowOffset", "height"], "number"] as const;
+const blur = ["textShadowRadius", "number", "textShadowRadius"] as const;
+const color = ["textShadowColor", "color", "color"] as const;
+
+export const textShadow = shorthandHandler(
+  [
+    [width, height, blur, color],
+    [color, width, height, blur],
+    [width, height, color],
+    [color, width, height],
+    [width, height],
+  ],
+  [blur, color],
+);

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

@@ -0,0 +1,15 @@
+/* eslint-disable */
+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,
+) => {
+  return (transformDescriptor[2] as any[])
+    .map((args) => resolveValue(args))
+    .filter(Boolean);
+};

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

@@ -0,0 +1,48 @@
+/* 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) => {
+  let value = func[2]?.[0];
+
+  if (!value) {
+    return;
+  }
+
+  const emValue = resolve([{}, "var", ["__rn-css-em"]]);
+  return round(Number(value) * emValue);
+};
+
+export const vw: StyleFunctionResolver = (_, func, get) => {
+  const value = func[2]?.[0];
+
+  if (typeof value !== "number") {
+    return;
+  }
+
+  return round(get(vwObs) * (value / 100));
+};
+
+export const vh: StyleFunctionResolver = (_, func, get) => {
+  const value = func[2]?.[0];
+
+  if (typeof value !== "number") {
+    return;
+  }
+
+  return round((value / 100) * get(vhObs));
+};
+
+export const rem: StyleFunctionResolver = (_, func, get) => {
+  const value = func[2]?.[0];
+
+  if (typeof value !== "number") {
+    return;
+  }
+
+  return round(value * get(remObs));
+};
+
+function round(number: number) {
+  return Math.round((number + Number.EPSILON) * 100) / 100;
+}