react-native-css 2.1.1 → 3.0.0-nightly.27bd5e2

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

@@ -0,0 +1,165 @@
+/* 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 = "";
+
+      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,
+                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.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/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;
+};