react-native-css 2.1.2 → 3.0.0-nightly.26b272f

package/src/runtime/native/styles/calculate-props.ts

@@ -0,0 +1,175 @@
+/* eslint-disable */
+import type {
+  InlineVariable,
+  StyleDeclaration,
+  StyleRule,
+} from "../../../compiler";
+import { applyValue, Specificity as S } from "../../utils";
+import type { RenderGuard } from "../conditions/guards";
+import {
+  VAR_SYMBOL,
+  type Getter,
+  type VariableContextValue,
+} from "../reactivity";
+import { resolveValue } from "./resolve";
+
+export function calculateProps(
+  get: Getter,
+  rules: (StyleRule | InlineVariable | VariableContextValue)[],
+  guards: RenderGuard[] = [],
+  inheritedVariables: VariableContextValue = {
+    [VAR_SYMBOL]: true,
+  },
+  inlineVariables: InlineVariable = {
+    [VAR_SYMBOL]: "inline",
+  },
+) {
+  let normal: Record<string, any> | undefined;
+  let important: Record<string, any> | undefined;
+
+  const delayedStyles: (() => void)[] = [];
+
+  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] ??= {};
+        }
+      }
+
+      applyDeclarations(
+        get,
+        rule.d,
+        inlineVariables,
+        inheritedVariables,
+        delayedStyles,
+        guards,
+        target,
+        topLevelTarget,
+      );
+    }
+  }
+
+  for (const delayedStyle of delayedStyles) {
+    delayedStyle();
+  }
+
+  return {
+    normal,
+    guards,
+    important,
+  };
+}
+
+export function applyDeclarations(
+  get: Getter,
+  declarations: StyleDeclaration[],
+  inlineVariables: InlineVariable,
+  inheritedVariables: VariableContextValue,
+  delayedStyles: (() => void)[] = [],
+  guards: RenderGuard[] = [],
+  target: Record<string, any> = {},
+  topLevelTarget = target,
+) {
+  for (const declaration of declarations) {
+    if (!Array.isArray(declaration)) {
+      // Static styles
+      Object.assign(target, declaration);
+    } else {
+      // Dynamic styles
+      let value: any = declaration[0];
+      let propPath = declaration[1];
+      let prop: string;
+
+      if (Array.isArray(propPath)) {
+        const [first, ...rest] = propPath;
+
+        if (!first) {
+          continue;
+        }
+
+        const final = rest.pop();
+
+        if (final) {
+          if (first !== "*") {
+            topLevelTarget[first] ??= {};
+            target = topLevelTarget[first];
+          }
+
+          for (prop of rest) {
+            target[prop] ??= {};
+            target = target[prop];
+          }
+
+          prop = final;
+        } else {
+          target = topLevelTarget;
+          prop = first;
+        }
+      } else {
+        prop = propPath;
+      }
+
+      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,
+              calculateProps,
+            });
+            applyValue(target, prop, value);
+          }
+        });
+      } else {
+        value = resolveValue(value, get, {
+          inlineVariables,
+          inheritedVariables,
+          renderGuards: guards,
+          calculateProps,
+        });
+      }
+
+      applyValue(target, prop, value);
+    }
+  }
+}

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

@@ -0,0 +1,2 @@
+export const emVariableName = "__rn-css-em";
+export const ShortHandSymbol = Symbol();

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

@@ -0,0 +1,78 @@
+/* eslint-disable */
+export const transformKeys = new Set([
+  "translateX",
+  "translateY",
+  "scale",
+  "scaleX",
+  "scaleY",
+  "rotate",
+  "rotateX",
+  "rotateY",
+  "rotateZ",
+  "skewX",
+  "skewY",
+  "perspective",
+  "matrix",
+  "transformOrigin",
+]);
+
+export const defaultValues: Record<string, any> = {
+  backgroundColor: "transparent",
+  borderBottomColor: "transparent",
+  borderBottomLeftRadius: 0,
+  borderBottomRightRadius: 0,
+  borderBottomWidth: 0,
+  borderColor: "transparent",
+  borderLeftColor: "transparent",
+  borderLeftWidth: 0,
+  borderRadius: 0,
+  borderRightColor: "transparent",
+  borderRightWidth: 0,
+  borderTopColor: "transparent",
+  borderTopWidth: 0,
+  borderWidth: 0,
+  bottom: 0,
+  color: "black",
+  flex: 1,
+  flexBasis: 1,
+  flexGrow: 1,
+  flexShrink: 0,
+  fontSize: 14,
+  fontWeight: "400",
+  gap: 0,
+  left: 0,
+  lineHeight: 14,
+  margin: 0,
+  marginBottom: 0,
+  marginLeft: 0,
+  marginRight: 0,
+  marginTop: 0,
+  maxHeight: 99999,
+  maxWidth: 99999,
+  minHeight: 0,
+  minWidth: 0,
+  opacity: 1,
+  padding: 0,
+  paddingBottom: 0,
+  paddingLeft: 0,
+  paddingRight: 0,
+  paddingTop: 0,
+  perspective: 1,
+  right: 0,
+  rotate: "0deg",
+  rotateX: "0deg",
+  rotateY: "0deg",
+  rotateZ: "0deg",
+  scale: 1,
+  scaleX: 1,
+  scaleY: 1,
+  skewX: "0deg",
+  skewY: "0deg",
+  textShadowRadius: 0,
+  top: 0,
+  transformOrigin: "50%",
+  translateX: 0,
+  translateY: 0,
+  width: 0,
+  zIndex: 0,
+};

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

@@ -0,0 +1,98 @@
+import { isStyleDescriptorArray } from "../../utils";
+import type { StyleFunctionResolver } from "./resolve";
+import { shorthandHandler } from "./shorthand";
+
+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/index.ts

@@ -0,0 +1,197 @@
+/* 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/platform-functions.ts

@@ -0,0 +1,50 @@
+import { PixelRatio, PlatformColor, StyleSheet } from "react-native";
+
+import type { StyleFunctionResolver } from "./resolve";
+
+export const platformColor: StyleFunctionResolver = (resolveValue, value) => {
+  const color: unknown = resolveValue(value[2]);
+  if (Array.isArray(color)) {
+    return PlatformColor(...(color as string[]));
+  } else if (typeof color === "string") {
+    return PlatformColor(color);
+  }
+
+  return;
+};
+
+export const hairlineWidth: StyleFunctionResolver = () => {
+  return StyleSheet.hairlineWidth;
+};
+
+export const pixelRatio: StyleFunctionResolver = () => {
+  return PixelRatio.get();
+};
+
+export const fontScale: StyleFunctionResolver = () => {
+  return PixelRatio.getFontScale();
+};
+
+export const pixelSizeForLayoutSize: StyleFunctionResolver = (
+  resolveValue,
+  value,
+) => {
+  const size: unknown = resolveValue(value[2]);
+  if (typeof size === "number") {
+    return PixelRatio.getPixelSizeForLayoutSize(size);
+  }
+
+  return;
+};
+
+export const roundToNearestPixel: StyleFunctionResolver = (
+  resolveValue,
+  value,
+) => {
+  const size: unknown = resolveValue(value[2]);
+  if (typeof size === "number") {
+    return PixelRatio.roundToNearestPixel(size);
+  }
+
+  return;
+};