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

package/src/metro/warnings.ts

@@ -0,0 +1,187 @@
+import { relative } from "path";
+
+import type { CompilerWarnings } from "../compiler/compiler.types";
+
+/** "summary" prints one capped block per CSS file, "verbose" lists every entry, "none" prints nothing */
+export type WarningLevel = "none" | "summary" | "verbose";
+
+const SUMMARY_ENTRY_LIMIT = 10;
+const SUMMARY_VALUE_LIMIT = 5;
+const SUMMARY_VALUE_LENGTH_LIMIT = 60;
+
+const PREFIX = "react-native-css";
+
+// Metro re-transforms a CSS file on every rebuild, so a file's block prints again only when its warnings change
+const lastReportedByFile = new Map<string, string>();
+
+// Metro forwards each transform worker's stderr to the bundler's terminal, and a warning never fails the build
+export function reportCompilerWarnings(
+  warnings: CompilerWarnings,
+  options: {
+    filename: string;
+    projectRoot: string;
+    level?: WarningLevel | undefined;
+  },
+): void {
+  const { filename, projectRoot, level = "summary" } = options;
+
+  if (level === "none") {
+    return;
+  }
+
+  const message = formatCompilerWarnings(warnings, {
+    displayPath: toDisplayPath(filename, projectRoot),
+    verbose: level === "verbose",
+  });
+
+  if (message === undefined) {
+    lastReportedByFile.delete(filename);
+    return;
+  }
+
+  if (lastReportedByFile.get(filename) === message) {
+    return;
+  }
+
+  lastReportedByFile.set(filename, message);
+
+  console.warn(message);
+}
+
+// Plain text: Metro's transform workers write to a pipe, where colour would never render
+export function formatCompilerWarnings(
+  warnings: CompilerWarnings,
+  options: { displayPath: string; verbose?: boolean | undefined },
+): string | undefined {
+  const { displayPath, verbose = false } = options;
+
+  const droppedCount =
+    (warnings.properties?.length ?? 0) +
+    (warnings.functions?.length ?? 0) +
+    Object.values(warnings.values ?? {}).reduce(
+      (total, entries) => total + entries.length,
+      0,
+    );
+
+  // A syntax warning sends the reader to their stylesheet rather than to what React Native lacks, so it is counted apart
+  const syntaxCount = warnings.syntax?.length ?? 0;
+
+  if (droppedCount === 0 && syntaxCount === 0) {
+    return undefined;
+  }
+
+  const properties = limit(unique(warnings.properties), verbose);
+  const functions = limit(unique(warnings.functions), verbose);
+  const rendered = renderValues(warnings.values, verbose);
+  const values = limit(rendered.entries, verbose);
+  const syntax = limit(unique(warnings.syntax), verbose);
+
+  const claims: string[] = [];
+  if (droppedCount > 0) {
+    claims.push(
+      `${droppedCount} ${pluralize(droppedCount, "declaration")} dropped, no React Native equivalent`,
+    );
+  }
+  if (syntaxCount > 0) {
+    claims.push(`${syntaxCount} syntax ${pluralize(syntaxCount, "warning")}`);
+  }
+
+  const lines = [`${PREFIX}: ${displayPath} - ${claims.join("; ")}`];
+
+  if (syntax.shown.length > 0) {
+    lines.push(`  syntax: ${syntax.shown.join("; ")}${suffix(syntax.hidden)}`);
+  }
+
+  if (properties.shown.length > 0) {
+    lines.push(
+      `  properties: ${properties.shown.join(", ")}${suffix(properties.hidden)}`,
+    );
+  }
+
+  if (values.shown.length > 0) {
+    lines.push(`  values: ${values.shown.join("; ")}${suffix(values.hidden)}`);
+  }
+
+  if (functions.shown.length > 0) {
+    lines.push(
+      `  functions: ${functions.shown.join(", ")}${suffix(functions.hidden)}`,
+    );
+  }
+
+  if (
+    properties.hidden +
+      values.hidden +
+      functions.hidden +
+      rendered.hidden +
+      syntax.hidden >
+    0
+  ) {
+    lines.push(
+      `  Set reactNativeCSS.warnings to "verbose" for the full list, or "none" to silence this.`,
+    );
+  }
+
+  return lines.join("\n");
+}
+
+function toDisplayPath(filename: string, projectRoot: string): string {
+  const relativePath = relative(projectRoot, filename);
+
+  return relativePath === "" || relativePath.startsWith("..")
+    ? filename
+    : relativePath;
+}
+
+function renderValues(
+  values: Record<string, string[]> | undefined,
+  verbose: boolean,
+): { entries: string[]; hidden: number } {
+  let hidden = 0;
+  const entries: string[] = [];
+  const recordedByProperty = values ?? {};
+
+  for (const property of Object.keys(recordedByProperty).sort()) {
+    const distinct = unique(recordedByProperty[property]);
+    const shown = verbose ? distinct : distinct.slice(0, SUMMARY_VALUE_LIMIT);
+    hidden += distinct.length - shown.length;
+
+    const rendered = shown.map((value) => truncate(value, verbose));
+
+    entries.push(
+      `${property}: ${rendered.join(", ")}${suffix(distinct.length - shown.length)}`,
+    );
+  }
+
+  return { entries, hidden };
+}
+
+function limit<T>(entries: T[], verbose: boolean) {
+  if (verbose || entries.length <= SUMMARY_ENTRY_LIMIT) {
+    return { shown: entries, hidden: 0 };
+  }
+
+  return {
+    shown: entries.slice(0, SUMMARY_ENTRY_LIMIT),
+    hidden: entries.length - SUMMARY_ENTRY_LIMIT,
+  };
+}
+
+function suffix(hidden: number): string {
+  return hidden > 0 ? ` (+${hidden} more)` : "";
+}
+
+// Code-unit order rather than localeCompare, whose collation varies with the ICU build
+function unique(entries: string[] | undefined): string[] {
+  return entries ? [...new Set(entries)].sort() : [];
+}
+
+// An unresolved calc() is recorded as its whole lightningcss node, hundreds of characters long
+function truncate(value: string, verbose: boolean): string {
+  return verbose || value.length <= SUMMARY_VALUE_LENGTH_LIMIT
+    ? value
+    : `${value.slice(0, SUMMARY_VALUE_LENGTH_LIMIT)}...`;
+}
+
+function pluralize(count: number, noun: string): string {
+  return count === 1 ? noun : `${noun}s`;
+}

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]!;
     }