react-native-css 0.0.0-nightly.d6f42ab → 0.0.0-nightly.eda2b28

package/src/native/conditions/media-query.ts

@@ -39,7 +39,7 @@ function testComparison(mediaQuery: MediaCondition, get: Getter): Boolean {
 
   switch (mediaQuery[1]) {
     case "dir":
-      return (I18nManager.isRTL && value === "rtl") || value === "ltr";
+      return value === (I18nManager.isRTL ? "rtl" : "ltr");
     case "hover":
       return true;
     case "platform":

package/src/native/react/interaction.ts

@@ -11,7 +11,7 @@ import {
 
 const mainCache = new WeakMap<
   WeakKey,
-  WeakMap<Function, (event: any) => void>
+  Map<InteractionType, WeakMap<Function, (event: any) => void>>
 >();
 
 type Handler = (event: unknown) => void;
@@ -40,14 +40,19 @@ const defaultHandlers: Record<InteractionType, Handler> = {
 export function getInteractionHandler(
   weakKey: WeakKey,
   type: InteractionType,
-  handler = defaultHandlers[type],
+  handler?: Handler | null,
 ) {
-  let cache = mainCache.get(weakKey);
-  if (!cache) {
-    cache = new WeakMap();
-    mainCache.set(weakKey, cache);
+  handler ??= defaultHandlers[type];
+  let interactions = mainCache.get(weakKey);
+  if (!interactions) {
+    interactions = new Map();
+    mainCache.set(weakKey, interactions);
   }
 
+  // A caller may reuse one callback for events that update opposite states.
+  let cache = interactions.get(type);
+  if (!cache) interactions.set(type, (cache = new WeakMap()));
+
   let cached = cache.get(handler);
   if (!cached) {
     cached = (event: any) => {

package/src/native/react/rules.ts

@@ -8,6 +8,7 @@ import type { RenderGuard } from "../conditions/guards";
 import { getDeepPath } from "../objects";
 import {
   activeFamily,
+  cleanupEffect,
   containerLayoutFamily,
   focusFamily,
   hoverFamily,
@@ -30,6 +31,7 @@ export function updateRules(
   forceUpdate = false,
   isRerender = true,
 ): ComponentState {
+  cleanupEffect(state.ruleEffect);
   const guards: RenderGuard[] = [];
   const rules = new Set<StyleRule | InlineVariable | VariableContextValue>();
   if (forceUpdate) {
@@ -144,13 +146,19 @@ export function updateRules(
           containers = {
             ...inheritedContainers,
             // This container becomes the default container
-            [DEFAULT_CONTAINER_NAME]: state.ruleEffectGetter,
+            [DEFAULT_CONTAINER_NAME]: {
+              key: state.ruleEffectGetter,
+              props: currentProps,
+            },
           };
         }
 
         // This this component as the named container
         for (const name of rule.c) {
-          containers![name] = state.ruleEffectGetter;
+          containers![name] = {
+            key: state.ruleEffectGetter,
+            props: currentProps,
+          };
         }
 
         // Enable hover/active/focus/layout handlers
@@ -212,14 +220,14 @@ export function updateRules(
     };
   }
 
-  if (usesVariables || variables) {
+  if (usesVariables || variables || inlineVariables.size) {
     rules.add(inheritedVariables);
 
     if (inlineVariables.size) {
       variables = Object.assign(
         {},
-        variables,
         inheritedVariables,
+        variables,
         ...Array.from(inlineVariables),
         { [VAR_SYMBOL]: true },
       );
@@ -243,7 +251,7 @@ export function updateRules(
   }
 
   // Remove this component from the old observer
-  state.stylesObs?.cleanup(state.ruleEffect);
+  state.stylesObs?.unsubscribe(state.styleEffect);
 
   return {
     ...state,

package/src/native/react/useNativeCss.ts

@@ -4,10 +4,11 @@ import {
   Fragment,
   useContext,
   useEffect,
+  useRef,
   useState,
   type ComponentType,
 } from "react";
-import { Pressable, View } from "react-native";
+import { Image, Pressable, StyleSheet, View } from "react-native";
 
 import { VariableContext } from "react-native-css/native-internal";
 
@@ -16,6 +17,7 @@ import { testGuards, type RenderGuard } from "../conditions/guards";
 import {
   cleanupEffect,
   ContainerContext,
+  hasChangedDependencies,
   type ContainerContextValue,
   type Effect,
   type Getter,
@@ -69,9 +71,6 @@ export function useNativeCss(
   const inheritedContainers = useContext(ContainerContext);
 
   const [state, setState] = useState((): ComponentState => {
-    // Both effects share the same observers to improve memory usage
-    const observers = new Set<Effect>();
-
     /**
      * When fired, this effect will force the rules to be re-evaluated.
      * This will cause a re-render if there are different rules
@@ -79,7 +78,7 @@ export function useNativeCss(
      * Use this when a rule condition changes, e.g FastRefresh or media queries
      */
     const ruleEffect: Effect = {
-      observers,
+      observers: new Set(),
       run: () => setState((state) => updateRules(state)),
     };
 
@@ -90,11 +89,11 @@ export function useNativeCss(
      * Use this when a value changes, e.g vm units or light / dark mode
      */
     const styleEffect: Effect = {
-      observers,
+      observers: new Set(),
       run: () => setState((state) => ({ ...state })),
     };
 
-    return updateRules(
+    const initialState = updateRules(
       {
         ruleEffect,
         ruleEffectGetter: (observable) => observable.get(ruleEffect),
@@ -110,10 +109,36 @@ export function useNativeCss(
       false,
       false,
     );
+    // State initializers may be discarded by React StrictMode. Subscribe once
+    // the component commits instead of retaining an abandoned initializer.
+    cleanupEffect(ruleEffect);
+    return initialState;
   });
 
-  // Both effects share the same observers, so we only need to cleanup one of them
-  useEffect(() => () => cleanupEffect(state.ruleEffect), [state.ruleEffect]);
+  // Distinguishes a fresh mount from an effect replay (Activity, StrictMode)
+  const hasCommittedRef = useRef(false);
+
+  useEffect(() => {
+    // Reconnect subscriptions after React replays an effect setup.
+    if (state.ruleEffect.observers.size === 0) {
+      if (hasCommittedRef.current || hasChangedDependencies(state.ruleEffect)) {
+        // Replay, or conditions changed since the initializer: recalculate.
+        state.ruleEffect.run();
+        state.styleEffect.run();
+      } else {
+        // Fresh mount: resubscribe to the initializer's dependencies.
+        // styleEffect resubscribes itself during render.
+        for (const observable of state.ruleEffect.dependencies ?? []) {
+          observable.get(state.ruleEffect);
+        }
+      }
+    }
+    hasCommittedRef.current = true;
+    return () => {
+      cleanupEffect(state.ruleEffect);
+      cleanupEffect(state.styleEffect);
+    };
+  }, [state.ruleEffect, state.styleEffect]);
 
   // Check if our derived state has changed (e.g the className prop)
   if (
@@ -137,7 +162,11 @@ export function useNativeCss(
     return createElement(Fragment);
   }
 
-  let props = getStyledProps(state, originalProps);
+  let props = getStyledProps(
+    state,
+    originalProps,
+    type === Image ? adaptImageProps : undefined,
+  );
 
   if (type === View && props?.onPress) {
     type = Pressable;
@@ -156,8 +185,18 @@ export function useNativeCss(
   }
 
   if (state.containers) {
+    // Publish a new props snapshot even when this component's own rules did not
+    // change. Descendants can depend on an ancestor attribute through a group.
+    const containers = Object.fromEntries(
+      Object.entries(state.containers).map(([name, container]) => [
+        name,
+        container.key === state.ruleEffectGetter
+          ? { key: container.key, props: originalProps }
+          : (inheritedContainers[name] ?? container),
+      ]),
+    );
     props = {
-      value: state.containers,
+      value: containers,
       children: createElement(type, props),
     };
     type = ContainerContext.Provider;
@@ -172,29 +211,41 @@ export function useNativeCss(
 export function mappingToConfig(mapping: StyledConfiguration<any>) {
   return Object.entries(mapping).flatMap(([key, value]): Config => {
     if (value === true) {
-      return { source: key, target: key };
+      return {
+        source: key,
+        target: key,
+      };
     } else if (value === false) {
       return { source: key, target: false };
     } else if (typeof value === "string") {
       return { source: key, target: value.split(".") };
     } else if (typeof value === "object") {
+      // Keep the declared deprecated alias working. The current spelling wins
+      // when both are provided, including an intentionally empty mapping.
+      const mapping = value.nativeStyleMapping ?? value.nativeStyleToProp;
+      const nativeStyleMapping = mapping
+        ? Object.fromEntries(
+            Object.entries(mapping).map(([k, v]) => [k, v === true ? k : v]),
+          )
+        : undefined;
+
       if (Array.isArray(value)) {
-        return { source: key, target: value };
+        return { source: key, target: value, nativeStyleMapping };
       }
 
       if ("target" in value) {
         if (value.target === false) {
-          return { source: key, target: false };
+          return { source: key, target: false, nativeStyleMapping };
         } else if (typeof value.target === "string") {
           const target = value.target.split(".");
 
           if (target.length === 1) {
-            return { source: key, target: target[0]! };
+            return { source: key, target: target[0]!, nativeStyleMapping };
           } else {
-            return { source: key, target };
+            return { source: key, target, nativeStyleMapping };
           }
         } else if (Array.isArray(value.target)) {
-          return { source: key, target: value.target };
+          return { source: key, target: value.target, nativeStyleMapping };
         }
       }
     }
@@ -202,3 +253,14 @@ export function mappingToConfig(mapping: StyledConfiguration<any>) {
     throw new Error(`styled(): Invalid mapping for ${key}: ${value}`);
   });
 }
+
+// Apply native Image fitting before normal, inline, and important props merge.
+// The compiler's contentFit mapping remains available to Expo Image adapters.
+function adaptImageProps(props: Record<string, any> | undefined) {
+  if (!props || !("contentFit" in props)) return props;
+  const { contentFit, style, ...rest } = props;
+  return {
+    ...rest,
+    style: { ...StyleSheet.flatten(style), objectFit: contentFit },
+  };
+}

package/src/native/react/usePassthrough.ts

@@ -32,8 +32,9 @@ export function usePassthrough(
     if (Array.isArray(target)) {
       for (let i = 0; i < target.length - 1; i++) {
         const prop = target[i]!;
-        props[prop] ??= {};
-        targetProps = props[prop];
+        const value = targetProps[prop];
+        targetProps[prop] = Array.isArray(value) ? [...value] : { ...value };
+        targetProps = targetProps[prop];
       }
       target = target[target.length - 1]!;
     }

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;
     },
     {
@@ -216,14 +247,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 +280,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

@@ -0,0 +1,74 @@
+import {
+  ColorSpace,
+  to as convert,
+  mix,
+  OKLab,
+  P3,
+  parse,
+  sRGB,
+} from "colorjs.io/fn";
+
+import type { StyleFunctionResolver } from "../resolve";
+
+ColorSpace.register(sRGB);
+ColorSpace.register(P3);
+ColorSpace.register(OKLab);
+
+export const colorMix: StyleFunctionResolver = (resolveValue, value) => {
+  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;
+
+    // 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 sum = leftWeight + rightWeight;
+    if (sum === 0) return;
+    const alphaMultiplier = Math.min(sum, 1);
+
+    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,
+      });
+    }
+    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/index.ts

@@ -5,3 +5,4 @@ export * from "./numeric-functions";
 export * from "./platform-functions";
 export * from "./string-functions";
 export * from "./transform-functions";
+export * from "./color-mix";

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));
 };