react-native-css 3.0.0-nightly.8dd703d → 3.0.0-nightly.9c84741

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

@@ -1,97 +1,121 @@
-/* eslint-disable */
-import { isStyleDescriptorArray } from "../../../utils";
 import type { StyleFunctionResolver } from "../resolve";
 
-const calcPrecedence: Record<string, number> = {
-  "+": 1,
-  "-": 1,
-  "*": 2,
-  "/": 2,
-};
+interface Value {
+  value: number;
+  isPercent: boolean;
+}
+
+const precedence: Record<string, number> = { "+": 1, "-": 1, "*": 2, "/": 2 };
 
 export const calc: StyleFunctionResolver = (resolveValue, func) => {
-  let mode: "number" | "percentage" | undefined;
-  const values: number[] = [];
-  const ops: string[] = [];
+  const tokens = resolveValue(func[2]);
 
-  const args = resolveValue(func[2]);
+  if (!Array.isArray(tokens)) {
+    return tokens;
+  }
 
-  if (!isStyleDescriptorArray(args)) return;
+  // --- Step 1: Convert to RPN (Shunting-Yard) ---
+  const output: (string | Value)[] = [];
+  const ops: string[] = [];
 
-  for (let token of args) {
-    if (typeof token === "number") {
-      if (!mode) mode = "number";
-      if (mode !== "number") return;
-      values.push(token);
-      continue;
-    } else if (typeof token === "string") {
-      if (token === "(") {
-        ops.push(token);
-      } else if (token === ")") {
-        // Resolve all values within the brackets
-        while (ops.length && ops[ops.length - 1] !== "(") {
-          applyCalcOperator(ops.pop()!, values.pop(), values.pop(), values);
-        }
-        ops.pop();
-      } else if (token.endsWith("%")) {
-        if (!mode) mode = "percentage";
-        if (mode !== "percentage") return;
-        values.push(Number.parseFloat(token.slice(0, -1)));
-      } else {
-        // This means we have an operator
+  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] &&
-          // @ts-ignore
-          calcPrecedence[ops[ops.length - 1]] >= calcPrecedence[token]
+          (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)
         ) {
-          applyCalcOperator(ops.pop()!, values.pop(), values.pop(), values);
+          // 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()!);
         }
-        ops.push(token);
+        if (ops.pop() !== "(") return undefined; // mismatched parens
+      } else {
+        return undefined; // invalid token
       }
     } else {
-      // We got something unexpected
-      return;
+      return undefined;
     }
   }
-
   while (ops.length) {
-    applyCalcOperator(ops.pop()!, values.pop(), values.pop(), values);
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const op = ops.pop()!;
+    if (op === "(" || op === ")") return undefined;
+    output.push(op);
   }
 
-  if (!mode) return;
+  // --- 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 num = values[0];
+      const res: Value = { value: 0, isPercent: false };
 
-  if (typeof num !== "number") {
-    return;
+      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);
+    }
   }
 
-  const value = Math.round((num + Number.EPSILON) * 100) / 100;
+  if (stack.length !== 1) return undefined;
 
-  if (mode === "percentage") {
-    return `${value}%`;
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const final = stack[0]!;
+  if (final.isPercent) {
+    return `${final.value * 100}%`;
   }
-
-  return value;
+  return final.value;
 };
 
-function applyCalcOperator(
-  operator: string,
-  b = 0, // These are reversed because we pop them off the stack
-  a = 0,
-  values: number[],
-) {
-  switch (operator) {
-    case "+":
-      return values.push(a + b);
-    case "-":
-      return values.push(a - b);
-    case "*":
-      return values.push(a * b);
-    case "/":
-      return values.push(a / b);
-  }
-
-  return;
+function round(number: number) {
+  return Math.round((number + Number.EPSILON) * 10000) / 10000;
 }

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

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

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

@@ -0,0 +1,38 @@
+import type { StyleFunctionResolver } from "../resolve";
+
+export const max: StyleFunctionResolver = (resolveValue, value) => {
+  const args = resolveValue(value[2]);
+
+  if (!Array.isArray(args) || args.some((arg) => typeof arg !== "number")) {
+    return;
+  }
+
+  return Math.max(...(args as number[]));
+};
+
+export const min: StyleFunctionResolver = (resolveValue, value) => {
+  const args = resolveValue(value[2]);
+
+  if (!Array.isArray(args) || args.some((arg) => typeof arg !== "number")) {
+    return;
+  }
+
+  return Math.min(...(args as number[]));
+};
+
+export const clamp: StyleFunctionResolver = (resolveValue, value) => {
+  const args = resolveValue(value[2]);
+
+  const [clampValue, min, max] = args as number[];
+
+  if (
+    !Array.isArray(args) ||
+    typeof clampValue !== "number" ||
+    typeof min !== "number" ||
+    typeof max !== "number"
+  ) {
+    return;
+  }
+
+  return Math.min(Math.max(clampValue, min), max);
+};

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

@@ -0,0 +1,22 @@
+import type { StyleFunctionResolver } from "../resolve";
+
+export const join: StyleFunctionResolver = (resolveValue, value) => {
+  const args = resolveValue(value[2]);
+
+  if (!Array.isArray(args)) {
+    return args;
+  }
+
+  const array: unknown = args[0];
+  const separator: unknown = args[1] ?? ",";
+
+  if (!Array.isArray(array)) {
+    return array;
+  }
+
+  if (!separator || typeof separator !== "string") {
+    return array.join();
+  }
+
+  return array.join(separator);
+};

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

@@ -1,51 +1,84 @@
+import { isStyleDescriptorArray } from "../../../utils";
 import type { StyleFunctionResolver } from "../resolve";
 
 export const scale: StyleFunctionResolver = (resolveValue, descriptor) => {
-  const values = resolveValue(descriptor[2]);
-
-  if (Array.isArray(values)) {
-    const [x, y] = values as [string | number][];
-
-    if (values.length === 2 && x === y) {
-      return { scale: x };
-    } else if (values.length === 2) {
-      return [{ scaleX: x }, { scaleY: y }];
-    } else {
-      return { scale: x };
-    }
-  } else {
-    return { scale: values };
+  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 values = resolveValue(descriptor[2]);
-
-  if (Array.isArray(values)) {
-    const [x, y, z] = values as [string | number][];
-
-    if (values.length === 3 && x === y && x === z) {
-      return { rotate: values };
-    } else if (values.length === 3) {
-      return [{ rotateX: x }, { rotateY: y }, { rotateZ: z }];
-    } else if (values.length === 2) {
-      return [{ rotateX: x }, { rotateY: y }];
-    } else {
-      return { rotate: values };
-    }
-  } else {
-    return { rotate: values };
+  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 values = resolveValue(descriptor[2]);
+  const args = descriptor[2];
 
-  if (Array.isArray(values)) {
-    const [x, y] = values as [string | number][];
+  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 {
-    return { translateX: values };
+  } else if (isXValid) {
+    return { translateX: x };
+  } else if (isYValid) {
+    return { translateY: y };
   }
+
+  return;
 };

package/src/runtime/native/styles/shorthands/animation.ts

@@ -1,6 +1,7 @@
 /* eslint-disable */
+import { StyleCollection } from "react-native-css/style-collection";
+
 import { applyShorthand } from "../../../utils";
-import { StyleCollection } from "../../injection";
 import type { StyleFunctionResolver } from "../resolve";
 import { shorthandHandler } from "./_handler";
 

package/src/runtime/native/styles/shorthands/box-shadow.ts

@@ -33,22 +33,42 @@ export const boxShadow: StyleFunctionResolver = (
   if (!isStyleDescriptorArray(args)) {
     return args;
   } else {
-    return args.flatMap((shadows) => {
-      if (shadows === undefined) {
-        return [];
-      } else if (isStyleDescriptorArray(shadows)) {
-        if (shadows.length === 0) {
+    return args
+      .flatMap((shadows) => {
+        if (shadows === undefined) {
           return [];
-        } else if (Array.isArray(shadows[0])) {
-          return shadows
-            .map((shadow) => handler(resolveValue, shadow, get, options))
-            .filter((v) => v !== undefined);
+        } else if (isStyleDescriptorArray(shadows)) {
+          if (shadows.length === 0) {
+            return [];
+          } else if (Array.isArray(shadows[0])) {
+            return shadows
+              .map((shadow) => {
+                return omitTransparentShadows(
+                  handler(resolveValue, shadow, get, options),
+                );
+              })
+              .filter((v) => v !== undefined);
+          } else {
+            return omitTransparentShadows(
+              handler(resolveValue, shadows, get, options),
+            );
+          }
         } else {
-          return handler(resolveValue, shadows, get, options);
+          return omitTransparentShadows(
+            handler(resolveValue, shadows, get, options),
+          );
         }
-      } else {
-        return handler(resolveValue, shadows, get, options);
-      }
-    });
+      })
+      .filter((v) => v !== undefined);
   }
 };
+
+function omitTransparentShadows(style: unknown) {
+  if (typeof style === "object" && style && "color" in style) {
+    if (style.color === "#0000" || style.color === "transparent") {
+      return;
+    }
+  }
+
+  return style;
+}

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

@@ -11,7 +11,9 @@ export const transform: StyleFunctionResolver = (
   const transforms = resolveValue(transformDescriptor[2]);
 
   if (Array.isArray(transforms)) {
-    return transforms.filter((transform) => transform !== undefined) as unknown;
+    return transforms.filter(
+      (transform) => transform !== undefined && transform !== "initial",
+    ) as unknown;
   } else if (transforms) {
     // If it's a single transform, wrap it in an array
     return [transforms];

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

@@ -1,7 +1,11 @@
+import {
+  rootVariables,
+  universalVariables,
+} from "react-native-css/style-collection";
+
 import type { StyleDescriptor, StyleFunction } from "../../../compiler";
 import { isStyleDescriptorArray } from "../../utils";
 import { VAR_SYMBOL, type Getter } from "../reactivity";
-import { rootVariables, universalVariables } from "../root";
 import type { ResolveValueOptions, SimpleResolveValue } from "./resolve";
 
 export function varResolver(

package/src/runtime/utils/objects.ts

@@ -24,7 +24,9 @@ export function getDeepPath(source: any, paths: string | string[] | false) {
 
     return target;
   } else if (transformKeys.has(paths)) {
-    return source?.transform?.find((t: any) => t[paths] !== undefined);
+    return Array.isArray(source?.transform)
+      ? source.transform.find((t: any) => t[paths] !== undefined)
+      : source.transform;
   } else {
     return source?.[paths];
   }
@@ -66,25 +68,14 @@ export function applyValue(
     }
 
     const transformArray: Record<string, unknown>[] = target.transform;
-    const transform = transformArray.find((t: any) => t[prop] !== undefined);
-
-    /**
-     * If our value is an array, this means a shorthand was split into multiple values
-     * e.g scale -> scaleX, scaleY
-     */
-    if (transform) {
-      if (Array.isArray(value)) {
-        target.transform = transformArray.filter((t) => !(prop in t));
-        target.transform.push(...value);
-      } else {
-        transform[prop] = value;
-      }
+
+    // Remove any existing values
+    target.transform = transformArray.filter((t) => !(prop in t));
+
+    if (Array.isArray(value)) {
+      target.transform.push(...value);
     } else {
-      if (Array.isArray(value)) {
-        transformArray.push(...value);
-      } else {
-        transformArray.push(value);
-      }
+      target.transform.push(value);
     }
     return;
   } else if (typeof value === "object" && value && ShortHandSymbol in value) {

package/src/runtime/web/api.ts

@@ -66,7 +66,7 @@ export const colorScheme: ColorScheme = {
   },
 };
 
-export function vars(variables: Record<`--${string}`, string | number>) {
+export function vars(variables: Record<string, string | number>) {
   const $variables: Record<string, string> = {};
 
   for (const [key, value] of Object.entries(variables)) {

package/src/style-collection/index.ts

@@ -0,0 +1,142 @@
+import type {
+  Animation,
+  ReactNativeCssStyleSheet,
+  StyleRuleSet,
+} from "react-native-css/compiler";
+
+import { DEFAULT_CONTAINER_NAME } from "../runtime/native/conditions/container-query";
+import {
+  family,
+  observable,
+  observableBatch,
+  type Observable,
+} from "../runtime/native/reactivity";
+import { rootVariables, universalVariables } from "./root";
+
+export { rootVariables, universalVariables };
+
+interface StyleCollectionType {
+  styles: ReturnType<typeof family<string, Observable<StyleRuleSet>>>;
+  keyframes: ReturnType<typeof family<string, Observable<Animation[1]>>>;
+  inject: (options: ReactNativeCssStyleSheet) => void;
+}
+
+declare global {
+  var __react_native_css_style_collection: StyleCollectionType | undefined;
+}
+
+globalThis.__react_native_css_style_collection ??= {
+  styles: family<string, Observable<StyleRuleSet>>(() => {
+    return observable([], isDeepEqual);
+  }),
+  keyframes: family<string, Observable<Animation[1]>>(() => {
+    return observable([], isDeepEqual);
+  }),
+  inject: function (options: ReactNativeCssStyleSheet) {
+    observableBatch.current = new Set();
+
+    StyleCollection.styles("will-change-variable").set([
+      {
+        s: [0],
+        v: [],
+      },
+    ]);
+
+    StyleCollection.styles("will-change-container").set([
+      {
+        s: [0],
+        c: [DEFAULT_CONTAINER_NAME],
+      },
+    ]);
+
+    StyleCollection.styles("will-change-animation").set([
+      {
+        s: [0],
+        a: true,
+      },
+    ]);
+
+    StyleCollection.styles("will-change-pressable").set([
+      {
+        s: [0],
+        p: {
+          h: 1,
+        },
+      },
+    ]);
+
+    if (options.s) {
+      for (const style of options.s) {
+        StyleCollection.styles(style[0]).set(style[1]);
+      }
+    }
+
+    if (options.k) {
+      for (const keyframes of options.k) {
+        StyleCollection.keyframes(keyframes[0]).set(keyframes[1]);
+      }
+    }
+
+    if (options.vr) {
+      for (const entry of options.vr) {
+        rootVariables(entry[0]).set(entry[1]);
+      }
+    }
+
+    if (options.vu) {
+      for (const entry of options.vu) {
+        rootVariables(entry[0]).set(entry[1]);
+      }
+    }
+
+    for (const effect of observableBatch.current) {
+      effect.run();
+    }
+
+    observableBatch.current = undefined;
+  },
+};
+
+export const StyleCollection = globalThis.__react_native_css_style_collection;
+
+function isDeepEqual(a: unknown, b: unknown): boolean {
+  const aArray = Array.isArray(a);
+  const bArray = Array.isArray(b);
+  const requiresKeyComparison =
+    typeof a === "object" && typeof b === "object" && aArray === bArray;
+
+  // Only compare keys when both are an object or array
+  // This does not account for complex types like Date/Regex, because we don't use them
+  if (!requiresKeyComparison) return a === b;
+
+  // Make either are not null
+  if (!a || !b) {
+    return a === b;
+  }
+
+  // Shortcut for arrays
+  if (aArray && bArray && a.length !== b.length) {
+    return false;
+  }
+
+  // Compare a to b
+  for (const key in a) {
+    if (
+      !isDeepEqual(
+        (a as Record<string, unknown>)[key],
+        (b as Record<string, unknown>)[key],
+      )
+    ) {
+      return false;
+    }
+  }
+
+  // Compare b to a
+  for (const key in b) {
+    if (!(key in a)) {
+      return false;
+    }
+  }
+
+  return true;
+}