react-native-css 2.1.2 → 3.0.0-nightly.19372e8

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

@@ -0,0 +1,197 @@
+/* eslint-disable */
+import type {
+  InlineVariable,
+  StyleDeclaration,
+  StyleRule,
+} from "../../../compiler";
+import { applyValue, getDeepPath, Specificity as S } from "../../utils";
+import type { RenderGuard } from "../conditions/guards";
+import {
+  VAR_SYMBOL,
+  type Getter,
+  type VariableContextValue,
+} from "../reactivity";
+import { transformKeys } from "./defaults";
+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)[] = [];
+  const transformStyles: (() => 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,
+        transformStyles,
+        guards,
+        target,
+        topLevelTarget,
+      );
+    }
+  }
+
+  for (const delayedStyle of delayedStyles) {
+    delayedStyle();
+  }
+
+  for (const transformStyle of transformStyles) {
+    transformStyle();
+  }
+
+  return {
+    normal,
+    guards,
+    important,
+  };
+}
+
+export function applyDeclarations(
+  get: Getter,
+  declarations: StyleDeclaration[],
+  inlineVariables: InlineVariable,
+  inheritedVariables: VariableContextValue,
+  delayedStyles: (() => void)[] = [],
+  transformStyles: (() => 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 || transformKeys.has(prop)) {
+        /**
+         * 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;
+        // This needs to be a object with the [prop] so we can discover in transform arrays
+        value = { [prop]: true };
+
+        if (transformKeys.has(prop)) {
+          transformStyles.push(() => {
+            value = resolveValue(originalValue, get, {
+              inlineVariables,
+              inheritedVariables,
+              renderGuards: guards,
+              calculateProps,
+            });
+            applyValue(target, prop, value);
+          });
+        } else {
+          delayedStyles.push(() => {
+            if (getDeepPath(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,79 @@
+/* eslint-disable */
+export const transformKeys = new Set([
+  "translate",
+  "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/functions/animation-timing.ts

@@ -0,0 +1,44 @@
+import type { StyleFunctionResolver } from "../resolve";
+
+/* eslint-disable @typescript-eslint/no-require-imports */
+const advancedTimingFunctions: Record<
+  string,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  () => (...args: any[]) => unknown
+> = {
+  cubicBezier: () => {
+    return (
+      require("react-native-reanimated") as typeof import("react-native-reanimated")
+    ).cubicBezier;
+  },
+  steps: () => {
+    return (
+      require("react-native-reanimated") as typeof import("react-native-reanimated")
+    ).steps;
+  },
+};
+
+const timingFunctionResolver: StyleFunctionResolver = (resolveValue, value) => {
+  const name = value[1];
+  const resolver = advancedTimingFunctions[name];
+
+  if (!resolver) {
+    return;
+  }
+
+  const args = resolveValue(value[2]);
+
+  if (!Array.isArray(args)) {
+    return;
+  }
+
+  const fn = resolver();
+
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+  const result = fn(...args);
+
+  return result;
+};
+
+export const cubicBezier = timingFunctionResolver;
+export const steps = timingFunctionResolver;

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

@@ -0,0 +1,121 @@
+import type { StyleFunctionResolver } from "../resolve";
+
+interface Value {
+  value: number;
+  isPercent: boolean;
+}
+
+const precedence: Record<string, number> = { "+": 1, "-": 1, "*": 2, "/": 2 };
+
+export const calc: StyleFunctionResolver = (resolveValue, func) => {
+  const tokens = resolveValue(func[2]);
+
+  if (!Array.isArray(tokens)) {
+    return tokens;
+  }
+
+  // --- Step 1: Convert to RPN (Shunting-Yard) ---
+  const output: (string | Value)[] = [];
+  const ops: string[] = [];
+
+  for (const t of tokens) {
+    if (typeof t === "number") {
+      output.push({ value: round(t), isPercent: false });
+    } else if (typeof t === "string") {
+      if (t.endsWith("%")) {
+        const num = parseFloat(t.slice(0, -1));
+        if (Number.isNaN(num)) return undefined;
+        output.push({ value: round(num / 100), isPercent: true });
+      } else if (t === "+" || t === "-" || t === "*" || t === "/") {
+        while (
+          ops.length &&
+          (ops[ops.length - 1] === "+" ||
+            ops[ops.length - 1] === "-" ||
+            ops[ops.length - 1] === "*" ||
+            ops[ops.length - 1] === "/") &&
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          (precedence[ops[ops.length - 1]!] ?? 0) >= (precedence[t] ?? 0)
+        ) {
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          output.push(ops.pop()!);
+        }
+        ops.push(t);
+      } else if (t === "(") {
+        ops.push(t);
+      } else if (t === ")") {
+        while (ops.length && ops[ops.length - 1] !== "(") {
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          output.push(ops.pop()!);
+        }
+        if (ops.pop() !== "(") return undefined; // mismatched parens
+      } else {
+        return undefined; // invalid token
+      }
+    } else {
+      return undefined;
+    }
+  }
+  while (ops.length) {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const op = ops.pop()!;
+    if (op === "(" || op === ")") return undefined;
+    output.push(op);
+  }
+
+  // --- Step 2: Evaluate RPN ---
+  const stack: Value[] = [];
+  for (const t of output) {
+    if (typeof t !== "string") {
+      stack.push(t);
+    } else {
+      const b = stack.pop();
+      const a = stack.pop();
+      if (!a || !b) return undefined;
+
+      const res: Value = { value: 0, isPercent: false };
+
+      switch (t) {
+        case "+":
+        case "-": {
+          if (a.isPercent !== b.isPercent) return undefined; // cannot mix
+          res.isPercent = a.isPercent;
+          res.value =
+            t === "+" ? round(a.value + b.value) : round(a.value - b.value);
+          break;
+        }
+        case "*": {
+          if (a.isPercent && b.isPercent) return undefined; // ambiguous
+          res.isPercent = a.isPercent || b.isPercent;
+          res.value = round(a.value * b.value);
+          break;
+        }
+        case "/": {
+          if (b.value === 0) return undefined;
+          if (a.isPercent && b.isPercent) {
+            // % / % → plain number ratio
+            res.isPercent = false;
+            res.value = round(a.value / b.value);
+          } else {
+            res.isPercent = a.isPercent || b.isPercent;
+            res.value = round(a.value / b.value);
+          }
+          break;
+        }
+      }
+      stack.push(res);
+    }
+  }
+
+  if (stack.length !== 1) return undefined;
+
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const final = stack[0]!;
+  if (final.isPercent) {
+    return `${final.value * 100}%`;
+  }
+  return final.value;
+};
+
+function round(number: number) {
+  return Math.round((number + Number.EPSILON) * 10000) / 10000;
+}

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

@@ -0,0 +1,98 @@
+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/index.ts

@@ -0,0 +1,5 @@
+export * from "./animation-timing";
+export * from "./calc";
+export * from "./filters";
+export * from "./platform-functions";
+export * from "./transform-functions";

package/src/runtime/native/styles/functions/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 getPixelSizeForLayoutSize: 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;
+};

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

@@ -0,0 +1,84 @@
+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;
+};