react-native-css 0.0.0-nightly.da5ce0f → 0.0.0-nightly.df32ce3

package/src/native/reactivity.ts

@@ -10,8 +10,12 @@ import {
 import type { StyleDescriptor } from "react-native-css/compiler";
 
 export type Effect = {
-  observers: Set<Effect>;
+  observers: Set<Observable<any, any>>;
   run(): void;
+  /** Dependencies recorded by the last cleanupEffect() */
+  dependencies?: Observable<any, any>[];
+  /** Dependency values recorded by the last cleanupEffect() */
+  snapshots?: [Observable<any, any>, unknown][];
 };
 
 export type Observable<Value, Arg = Value> = {
@@ -19,6 +23,7 @@ export type Observable<Value, Arg = Value> = {
   get: (effect?: Effect) => Value;
   set: (arg: Arg) => void;
   run: () => void;
+  unsubscribe: (effect: Effect) => void;
 };
 type Read<Value, Arg> = (get: Getter, arg?: Arg) => Value;
 export type Getter = <Value>(observable: Observable<Value, any>) => Value;
@@ -43,9 +48,10 @@ export function observable<Value, Arg = Value>(
 
   const observers = new Set<Effect>();
   const effect: Effect = {
-    observers,
+    observers: new Set(),
     run: () => {
       if (!isStatic) {
+        cleanupEffect(effect);
         const nextValue = (init as Read<Value, Arg>)(getter, lastArg);
         if (equality(value, nextValue)) {
           return;
@@ -57,14 +63,19 @@ export function observable<Value, Arg = Value>(
     },
   };
 
-  const getter: Getter = (observable) => observable.get(effect);
+  const getter: Getter = (observable) =>
+    observable.get(observers.size > 0 ? effect : undefined);
 
-  function get(effect?: Effect) {
-    if (effect) {
-      observers.add(effect);
+  function get(subscriber?: Effect) {
+    if (subscriber) {
+      if (observers.size === 0 && !isStatic) didInit = false;
+      observers.add(subscriber);
+      subscriber.observers.add(obs);
     }
     if (!didInit) {
-      value = (init as Read<Value, Arg>)(getter, undefined);
+      cleanupEffect(effect);
+      value = (init as Read<Value, Arg>)(getter, lastArg);
+      didInit = observers.size > 0;
     }
 
     return value;
@@ -77,9 +88,10 @@ export function observable<Value, Arg = Value>(
       }
       value = arg as unknown as Value;
     } else {
+      cleanupEffect(effect);
       const nextValue = (init as Read<Value, Arg>)(getter, arg);
 
-      didInit = true;
+      didInit = observers.size > 0;
       lastArg = arg;
 
       if (equality(value, nextValue)) {
@@ -108,6 +120,13 @@ export function observable<Value, Arg = Value>(
     get,
     set,
     run: effect.run,
+    unsubscribe(subscriber) {
+      if (observers.delete(subscriber) && observers.size === 0 && !isStatic) {
+        cleanupEffect(effect);
+        didInit = false;
+      }
+      subscriber.observers.delete(obs);
+    },
   };
 
   return obs;
@@ -115,10 +134,26 @@ export function observable<Value, Arg = Value>(
 
 export function cleanupEffect(effect: Effect) {
   if (!effect) return;
-  for (const dep of effect.observers) {
-    dep.observers.delete(effect);
-  }
+  const dependencies = (effect.dependencies = Array.from(effect.observers));
+  // Snapshot before detaching so computed observables return cached values
+  effect.snapshots = dependencies.map(
+    (observable) =>
+      [observable, observable.get()] as [Observable<any, any>, unknown],
+  );
   effect.observers.clear();
+  for (const dep of dependencies) {
+    dep.unsubscribe(effect);
+  }
+}
+
+/** Whether any of the effect's dependencies changed since cleanupEffect() */
+export function hasChangedDependencies(effect: Effect): boolean {
+  const snapshots = effect.snapshots;
+  if (!snapshots) return false;
+  for (const [observable, value] of snapshots) {
+    if (!Object.is(observable.get(), value)) return true;
+  }
+  return false;
 }
 
 /** Family Helpers ************************************************************/
@@ -129,11 +164,9 @@ export function family<Key, Result = Key, Args extends any = void>(
   const map = new Map<Key, Result>();
   return Object.assign(
     (key: Key, args: Args) => {
-      let value = map.get(key);
-      if (!value) {
-        value = fn(key, args);
-        map.set(key, value);
-      }
+      if (map.has(key)) return map.get(key)!;
+      const value = fn(key, args);
+      map.set(key, value);
       return value;
     },
     {
@@ -166,11 +199,9 @@ export function weakFamily<Key extends WeakKey, Args = undefined, Result = Key>(
   const map = new WeakMap<Key, Result>();
   return Object.assign(
     (key: Key, args: Args) => {
-      let value = map.get(key);
-      if (!value) {
-        value = fn(key, args);
-        map.set(key, value);
-      }
+      if (map.has(key)) return map.get(key)!;
+      const value = fn(key, args);
+      map.set(key, value);
       return value;
     },
     {
@@ -186,6 +217,21 @@ export type VariableContextValue = Record<string, StyleDescriptor> & {
   [VAR_SYMBOL]: true;
 };
 
+// Variable lookup is presence-keyed, so an entry with no value produces no key rather than one that stops the cascade
+export function toVariableRecord(
+  variables: Record<string, StyleDescriptor>,
+): Record<string, StyleDescriptor> {
+  const record: Record<string, StyleDescriptor> = {};
+
+  for (const [name, value] of Object.entries(variables)) {
+    if (value !== undefined) {
+      record[name.replace(/^--/, "")] = value;
+    }
+  }
+
+  return record;
+}
+
 /** Pseudo Classes ************************************************************/
 
 export const hoverFamily = weakFamily(() => observable(false));
@@ -216,14 +262,20 @@ Dimensions.addEventListener("change", ({ window }) => {
 
 /** Color Scheme **************************************************************/
 
-export const colorScheme = observable<ColorSchemeName>(
+export const colorScheme = observable<ColorSchemeName | null | undefined>(
   Appearance.getColorScheme(),
 );
 Appearance.addChangeListener((event) => colorScheme.set(event.colorScheme));
 
 /** Containers ****************************************************************/
 
-export type ContainerContextValue = Record<string, WeakKey>;
+export type ContainerContextValue = Record<
+  string,
+  {
+    key: WeakKey;
+    props: Record<string, unknown> | null | undefined;
+  }
+>;
 export const ContainerContext = createContext<ContainerContextValue>({});
 
 export const containerLayoutFamily = weakFamily(() => {
@@ -243,6 +295,6 @@ export const containerWidthFamily = weakFamily((key) => {
 
 export const containerHeightFamily = weakFamily((key) => {
   return observable((read) => {
-    return read(containerLayoutFamily(key))?.width || 0;
+    return read(containerLayoutFamily(key))?.height || 0;
   });
 });

package/src/native/reanimated.ts

@@ -11,11 +11,30 @@ export const animatedComponentFamily = weakFamily(
       return component;
     }
 
-    const createAnimatedComponent =
-      // eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-unsafe-member-access
-      require("react-native-reanimated").createAnimatedComponent as (
-        component: ComponentType,
-      ) => ComponentType;
+    // Reanimated 4.5 keeps the original component display name. Compare its
+    // public built-in components by identity instead of interpreting that name.
+    const reanimated =
+      // eslint-disable-next-line @typescript-eslint/no-require-imports
+      require("react-native-reanimated") as typeof import("react-native-reanimated");
+    const animated = reanimated.default;
+    if (
+      [
+        animated.View,
+        animated.Text,
+        animated.Image,
+        animated.ScrollView,
+        animated.FlatList,
+      ].some((value) => value === component)
+    ) {
+      return component;
+    }
+
+    // This public constructor remains supported for arbitrary components; only
+    // its FlatList-specific overload is deprecated by Reanimated.
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    const createAnimatedComponent = reanimated.createAnimatedComponent as (
+      component: ComponentType,
+    ) => ComponentType;
 
     return createAnimatedComponent(component);
   },

package/src/native/styles/functions/color-mix.ts

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
-import type { PlainColorObject } from "colorjs.io";
 import {
   ColorSpace,
   to as convert,
@@ -8,7 +6,6 @@ import {
   P3,
   parse,
   sRGB,
-  type ColorConstructor,
 } from "colorjs.io/fn";
 
 import type { StyleFunctionResolver } from "../resolve";
@@ -18,49 +15,58 @@ ColorSpace.register(P3);
 ColorSpace.register(OKLab);
 
 export const colorMix: StyleFunctionResolver = (resolveValue, value) => {
-  const args = resolveValue(value[2]);
-
-  if (!Array.isArray(args) || args.length < 3) {
-    return;
-  }
+  const resolved = resolveValue(value[2]);
+  if (!Array.isArray(resolved)) return;
 
+  // Resolved descriptors may be cached and shared by another styled component.
+  const args: unknown[] = [...(resolved as unknown[])];
   try {
     const space = args.shift();
+    const leftValue = args.shift();
+    if (typeof space !== "string" || typeof leftValue !== "string") return;
+    ColorSpace.get(space);
+    const left = parse(leftValue);
+    const percentage = () => {
+      const next = args[0];
+      if (typeof next !== "string" || !next.endsWith("%")) return undefined;
+      args.shift();
+      return Number(next.slice(0, -1)) / 100;
+    };
+    let leftWeight = percentage();
+    const rightValue = args.shift();
+    if (typeof rightValue !== "string") return;
+    const right = parse(rightValue);
+    let rightWeight = percentage();
+    if (args.length) return;
 
-    let left: ColorConstructor | PlainColorObject = parse(
-      args.shift() as string,
-    );
-
-    let next = args.shift();
-
-    if (typeof next === "string" && next.endsWith("%")) {
-      left.alpha = parseFloat(next) / 100;
-      next = args.shift();
-    }
-
-    if (next === undefined) {
-      if (left.spaceId !== "srgb") {
-        left = convert(left, "srgb");
-      }
-
-      return `rgba(${(left.coords[0] ?? 0) * 255}, ${(left.coords[1] ?? 0) * 255}, ${(left.coords[2] ?? 0) * 255}, ${left.alpha})`;
-    }
-
-    if (typeof next !== "string") {
+    // CSS Color 5: omitted weights are complementary, then both are normalized.
+    leftWeight ??= rightWeight === undefined ? 0.5 : 1 - rightWeight;
+    rightWeight ??= 1 - leftWeight;
+    if (
+      ![leftWeight, rightWeight].every(
+        (weight) => Number.isFinite(weight) && weight >= 0 && weight <= 1,
+      )
+    )
       return;
-    }
-    const right = parse(next);
+    const sum = leftWeight + rightWeight;
+    if (sum === 0) return;
+    const alphaMultiplier = Math.min(sum, 1);
 
-    next = args.shift();
-    if (next && typeof next === "string" && next.endsWith("%")) {
-      right.alpha = parseFloat(next) / 100;
+    let result;
+    if (right.alpha === 0 || left.alpha === 0) {
+      // A transparent endpoint contributes no premultiplied channels.
+      const source = right.alpha === 0 ? left : right;
+      const weight = right.alpha === 0 ? leftWeight : rightWeight;
+      result = convert(source, "srgb");
+      result.alpha = ((source.alpha ?? 1) * weight) / sum;
+    } else {
+      result = mix(left, right, rightWeight / sum, {
+        space,
+        outputSpace: "srgb",
+        premultiplied: true,
+      });
     }
-
-    const result = mix(left, right, {
-      space,
-      outputSpace: "srgb",
-    });
-
+    result.alpha = (result.alpha ?? 1) * alphaMultiplier;
     return `rgba(${(result.coords[0] ?? 0) * 255}, ${(result.coords[1] ?? 0) * 255}, ${(result.coords[2] ?? 0) * 255}, ${result.alpha})`;
   } catch {
     return;

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

@@ -62,22 +62,22 @@ export const saturate: StyleFunctionResolver = (resolveValue, value) => {
 export const opacity: StyleFunctionResolver = (resolveValue, value) => {
   const args = resolveValue(value[2]);
   return {
-    hueRotate: (Array.isArray(args) ? args[0] : args) as unknown,
+    opacity: (Array.isArray(args) ? args[0] : args) as unknown,
   };
 };
 
-const color = ["color", "string"] as const;
+const color = ["color", "color"] as const;
 const offsetX = ["offsetX", "number"] as const;
 const offsetY = ["offsetY", "number"] as const;
-const blurRadius = ["blurRadius", "number"] as const;
+const standardDeviation = ["standardDeviation", "number"] as const;
 
 const handler = shorthandHandler(
   [
-    [offsetX, offsetY, blurRadius, color],
+    [offsetX, offsetY, standardDeviation, color],
     [color, offsetX, offsetY],
-    [color, offsetX, offsetY, blurRadius],
+    [color, offsetX, offsetY, standardDeviation],
     [offsetX, offsetY, color],
-    [offsetX, offsetY, blurRadius, color],
+    [offsetX, offsetY, standardDeviation, color],
   ],
   [],
   "object",
@@ -97,3 +97,17 @@ export const dropShadow: StyleFunctionResolver = (
       }
     : undefined;
 };
+
+/** CSS variables may expand to multiple filters; native filter arrays must be flat. */
+export const filter: StyleFunctionResolver = (resolveValue, descriptor) => {
+  const value: unknown = resolveValue(descriptor[2]);
+  if (Array.isArray(value)) {
+    const filters: unknown[] = value.flat(Infinity);
+    return filters.filter(
+      (entry) => entry !== undefined && entry !== "initial",
+    );
+  }
+  if (value === undefined || value === "initial") return;
+  if (value === "none") return null;
+  return typeof value === "string" ? value : [value];
+};

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

@@ -23,16 +23,17 @@ export const min: StyleFunctionResolver = (resolveValue, value) => {
 export const clamp: StyleFunctionResolver = (resolveValue, value) => {
   const args = resolveValue(value[2]);
 
-  const [clampValue, min, max] = args as number[];
+  if (!Array.isArray(args)) return;
+
+  const [minimum, preferred, maximum] = args as unknown[];
 
   if (
-    !Array.isArray(args) ||
-    typeof clampValue !== "number" ||
-    typeof min !== "number" ||
-    typeof max !== "number"
+    typeof minimum !== "number" ||
+    typeof preferred !== "number" ||
+    typeof maximum !== "number"
   ) {
     return;
   }
 
-  return Math.min(Math.max(clampValue, min), max);
+  return Math.max(minimum, Math.min(preferred, maximum));
 };

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

@@ -1,5 +1,23 @@
 import type { StyleFunctionResolver } from "../resolve";
 
+export const gradientPosition: StyleFunctionResolver = (
+  resolveValue,
+  value,
+) => {
+  const position = resolveValue(value[2]);
+  return typeof position === "number" ? `${position}px` : position;
+};
+
+export const colorStop: StyleFunctionResolver = (resolveValue, value) => {
+  const args = resolveValue(value[2]);
+  if (!Array.isArray(args)) return args;
+  const [color, position] = args as unknown[];
+  if (typeof color !== "string") return;
+  if (position === undefined) return color;
+  if (typeof position !== "number" && typeof position !== "string") return;
+  return `${color} ${typeof position === "number" ? `${position}px` : position}`;
+};
+
 export const join: StyleFunctionResolver = (resolveValue, value) => {
   const args = resolveValue(value[2]);
 

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

@@ -1,16 +1,17 @@
 import { isStyleDescriptorArray } from "react-native-css/utilities";
 
 import type { StyleFunctionResolver } from "../resolve";
+import { scaleFactor } from "../scale-factor";
 
 export const scale: StyleFunctionResolver = (resolveValue, descriptor) => {
   const args = descriptor[2];
 
   if (!isStyleDescriptorArray(args)) {
-    return { scale: resolveValue(args) };
+    return { scale: scaleFactor(resolveValue(args)) };
   }
 
-  const x = resolveValue(args[0]);
-  const y = resolveValue(args[1]);
+  const x = scaleFactor(resolveValue(args[0]));
+  const y = scaleFactor(resolveValue(args[1]));
 
   const isXValid = typeof x === "string" || typeof x === "number";
   const isYValid = typeof y === "string" || typeof y === "number";
@@ -18,7 +19,7 @@ export const scale: StyleFunctionResolver = (resolveValue, descriptor) => {
   if (isXValid && isYValid) {
     return x === y ? { scale: x } : [{ scaleX: x }, { scaleY: y }];
   } else if (isXValid) {
-    return { scaleX: x };
+    return { scale: x };
   } else if (isYValid) {
     return { scaleY: y };
   }