react-native-css 3.0.7 → 3.1.0-rc.1

package/src/native/api.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable  */
-import { useContext, useState, type ComponentType } from "react";
-import { Appearance } from "react-native";
+import { useContext, useEffect, useState, type ComponentType } from "react";
+import { Appearance, type ViewStyle } from "react-native";
 
 import type { StyleDescriptor } from "react-native-css/compiler";
 import { VariableContext } from "react-native-css/native-internal";
@@ -9,13 +9,16 @@ import type {
   ColorScheme,
   Props,
   ReactComponent,
+  Styled,
   StyledConfiguration,
   StyledOptions,
 } from "../runtime.types";
 import { mappingToConfig, useNativeCss } from "./react/useNativeCss";
 import { usePassthrough } from "./react/usePassthrough";
 import {
+  cleanupEffect,
   colorScheme as colorSchemeObs,
+  toVariableRecord,
   VAR_SYMBOL,
   type Effect,
   type Getter,
@@ -40,12 +43,9 @@ const defaultMapping: StyledConfiguration<ComponentType<{ style: unknown }>> = {
  * @param baseComponent
  * @param mapping
  */
-export const styled = <
-  const C extends ReactComponent<any>,
-  const M extends StyledConfiguration<C>,
->(
-  baseComponent: C,
-  mapping: M = defaultMapping as M,
+export const styled: Styled = (
+  baseComponent: ReactComponent<any>,
+  mapping: StyledConfiguration<any> = defaultMapping,
   options?: StyledOptions,
 ) => {
   let component: any;
@@ -73,7 +73,7 @@ export const colorScheme: ColorScheme = {
     return colorSchemeObs.get() ?? Appearance.getColorScheme() ?? "light";
   },
   set(value) {
-    return colorSchemeObs.set(value);
+    return colorSchemeObs.set(value === "unspecified" ? null : value);
   },
 };
 
@@ -97,28 +97,33 @@ export function useNativeVariable(name: string) {
   }
 
   const inheritedVariables = useContext(VariableContext);
-  const [effect, setState] = useState(() => {
+  const [, forceUpdate] = useState(0);
+  const [effect] = useState(() => {
     const effect: Effect = {
       observers: new Set(),
-      run: () => setState((state) => ({ ...state })),
+      run: () => forceUpdate((state) => state + 1),
     };
 
     const get: Getter = (observable) => observable.get(effect);
 
-    return { ...effect, get };
+    return Object.assign(effect, { get });
   });
 
+  useEffect(() => {
+    // React StrictMode replays setup after cleanup without another render.
+    if (effect.observers.size === 0) forceUpdate((state) => state + 1);
+    return () => cleanupEffect(effect);
+  }, [effect]);
+  cleanupEffect(effect);
   return resolveValue([{}, "var", [name]], effect.get, { inheritedVariables });
 }
 
 /**
  * @deprecated Use `<VariableContextProvider />` instead.
  */
-export function vars(variables: Record<string, StyleDescriptor>) {
+export function vars(variables: Record<string, StyleDescriptor>): ViewStyle {
   return Object.assign(
     { [VAR_SYMBOL]: "inline" },
-    Object.fromEntries(
-      Object.entries(variables).map(([k, v]) => [k.replace(/^--/, ""), v]),
-    ),
-  );
+    toVariableRecord(variables),
+  ) as ViewStyle;
 }

package/src/native/conditions/attributes.ts

@@ -11,7 +11,7 @@ export function testAttributes(
 }
 
 function testAttribute(
-  [type, prop, operator, testValue]: AttributeQuery,
+  [type, prop, operator, testValue, caseSensitivity]: AttributeQuery,
   props: Record<string, unknown> | undefined | null,
   guards: RenderGuard[],
 ) {
@@ -32,21 +32,38 @@ function testAttribute(
     return value !== undefined && value !== null && value !== false;
   }
 
+  if (operator === "!") return !value;
+  if (value === undefined || value === null || testValue === undefined)
+    return false;
+
+  if (
+    typeof value !== "string" &&
+    typeof value !== "number" &&
+    typeof value !== "boolean"
+  )
+    return false;
+  let actual = String(value);
+  if (caseSensitivity === "i") {
+    // CSS attribute flags fold ASCII letters only, not Unicode characters.
+    actual = actual.replace(/[A-Z]/g, (letter) => letter.toLowerCase());
+    testValue = testValue.replace(/[A-Z]/g, (letter) => letter.toLowerCase());
+  }
+
   switch (operator) {
-    case "!":
-      return !value;
     case "=":
-      return value == testValue;
+      return actual === testValue;
     case "~=":
-      return testValue && value?.toString().split(" ").includes(testValue);
+      return (
+        testValue !== "" && actual.split(/[\t\n\f\r ]+/).includes(testValue)
+      );
     case "|=":
-      return testValue && value?.toString().startsWith(testValue + "-");
+      return actual === testValue || actual.startsWith(testValue + "-");
     case "^=":
-      return testValue && value?.toString().startsWith(testValue);
+      return testValue !== "" && actual.startsWith(testValue);
     case "$=":
-      return testValue && value?.toString().endsWith(testValue);
+      return testValue !== "" && actual.endsWith(testValue);
     case "*=":
-      return testValue && value?.toString().includes(testValue);
+      return testValue !== "" && actual.includes(testValue);
     default:
       operator satisfies never;
       return false;

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

@@ -16,7 +16,7 @@ import {
   type ContainerContextValue,
   type Getter,
 } from "../reactivity";
-// import { testAttributes } from "./attributes";
+import { testAttributes } from "./attributes";
 import type { RenderGuard } from "./guards";
 
 export const DEFAULT_CONTAINER_NAME = "c:___default___";
@@ -47,15 +47,17 @@ export function testContainerQuery(
     return false;
   }
 
-  // if (query.a && !testAttributes(query.a, container.props, guards)) {
-  //   return false;
-  // }
+  // Ancestor snapshots have their own context guard. Their attributes must not
+  // be compared with this descendant's props by the ordinary attribute guards.
+  if (query.a && !testAttributes(query.a, container.props, [])) {
+    return false;
+  }
 
-  if (query.m && !testContainerMediaCondition(query.m, container, get)) {
+  if (query.m && !testContainerMediaCondition(query.m, container.key, get)) {
     return false;
   }
 
-  if (query.p && !testContainerPseudoCondition(query.p, container, get)) {
+  if (query.p && !testContainerPseudoCondition(query.p, container.key, get)) {
     return false;
   }
 
@@ -119,11 +121,11 @@ function testContainerMediaCondition(
         case ">":
           return left > right;
         case ">=":
-          return left > right;
+          return left >= right;
         case "<":
-          return left > right;
+          return left < right;
         case "<=":
-          return left > right;
+          return left <= right;
         default:
           condition[0] satisfies never;
           return false;

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;
@@ -181,9 +220,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 +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;
     },
     {
@@ -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;
   });
 });