react-native-css 3.0.6 → 3.1.0-rc.0

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

@@ -7,7 +7,7 @@ import {
   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";
 
@@ -69,9 +69,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 +76,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 +87,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 +107,23 @@ 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]);
+  useEffect(() => {
+    // Reconnect subscriptions after React replays an effect setup.
+    if (state.ruleEffect.observers.size === 0) {
+      state.ruleEffect.run();
+      state.styleEffect.run();
+    }
+    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 +147,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 +170,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;
@@ -181,9 +205,14 @@ export function mappingToConfig(mapping: StyledConfiguration<any>) {
     } else if (typeof value === "string") {
       return { source: key, target: value.split(".") };
     } else if (typeof value === "object") {
-      const nativeStyleMapping = value.nativeStyleMapping as
-        | Record<string, string>
-        | undefined;
+      // 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, nativeStyleMapping };
@@ -209,3 +238,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,7 +10,7 @@ import {
 import type { StyleDescriptor } from "react-native-css/compiler";
 
 export type Effect = {
-  observers: Set<Effect>;
+  observers: Set<Observable<any, any>>;
   run(): void;
 };
 
@@ -19,6 +19,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 +44,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 +59,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 +84,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 +116,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 +130,11 @@ 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 = Array.from(effect.observers);
   effect.observers.clear();
+  for (const dep of dependencies) {
+    dep.unsubscribe(effect);
+  }
 }
 
 /** Family Helpers ************************************************************/
@@ -129,11 +145,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 +180,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 +228,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 +261,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 };
   }