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

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

@@ -18,6 +18,7 @@ import { usePassthrough } from "./react/usePassthrough";
 import {
   cleanupEffect,
   colorScheme as colorSchemeObs,
+  toVariableRecord,
   VAR_SYMBOL,
   type Effect,
   type Getter,
@@ -123,8 +124,6 @@ export function useNativeVariable(name: string) {
 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/react/useNativeCss.ts

@@ -4,6 +4,7 @@ import {
   Fragment,
   useContext,
   useEffect,
+  useRef,
   useState,
   type ComponentType,
 } from "react";
@@ -16,6 +17,7 @@ import { testGuards, type RenderGuard } from "../conditions/guards";
 import {
   cleanupEffect,
   ContainerContext,
+  hasChangedDependencies,
   type ContainerContextValue,
   type Effect,
   type Getter,
@@ -113,12 +115,25 @@ export function useNativeCss(
     return initialState;
   });
 
+  // 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) {
-      state.ruleEffect.run();
-      state.styleEffect.run();
+      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);

package/src/native/reactivity.ts

@@ -12,6 +12,10 @@ import type { StyleDescriptor } from "react-native-css/compiler";
 export type 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> = {
@@ -130,13 +134,28 @@ export function observable<Value, Arg = Value>(
 
 export function cleanupEffect(effect: Effect) {
   if (!effect) return;
-  const dependencies = Array.from(effect.observers);
+  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 ************************************************************/
 
 export function family<Key, Result = Key, Args extends any = void>(
@@ -198,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));

package/src/native-internal/root.ts

@@ -29,16 +29,43 @@ const rootVariableFamily = () => {
   });
 };
 
-export const rootVariables = rootVariableFamily();
-export const universalVariables = rootVariableFamily();
-
-rootVariables("__rn-css-rem").set([[14]]);
-// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-rootVariables("__rn-css-color").set([
-  [
-    Platform.OS === "ios"
-      ? PlatformColor("label", "labelColor")
-      : PlatformColor("?attr/textColorPrimary", "SystemBaseHighColor"),
-  ],
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-] as any);
+interface RootVariableRegistries {
+  root: ReturnType<typeof rootVariableFamily>;
+  universal: ReturnType<typeof rootVariableFamily>;
+}
+
+declare global {
+  var __react_native_css_root_variable_registries:
+    | RootVariableRegistries
+    | undefined;
+}
+
+// Seeded with the registries, so a copy that loads after the stylesheet inject keeps the project's rem
+function createRootVariableRegistries(): RootVariableRegistries {
+  const registries: RootVariableRegistries = {
+    root: rootVariableFamily(),
+    universal: rootVariableFamily(),
+  };
+
+  registries.root("__rn-css-rem").set([[14]]);
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+  registries.root("__rn-css-color").set([
+    [
+      Platform.OS === "ios"
+        ? PlatformColor("label", "labelColor")
+        : PlatformColor("?attr/textColorPrimary", "SystemBaseHighColor"),
+    ],
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ] as any);
+
+  return registries;
+}
+
+// The exports map gives import and require different builds, and Metro resolves each per requesting module
+globalThis.__react_native_css_root_variable_registries ??=
+  createRootVariableRegistries();
+
+export const rootVariables =
+  globalThis.__react_native_css_root_variable_registries.root;
+export const universalVariables =
+  globalThis.__react_native_css_root_variable_registries.universal;

package/src/native-internal/variables.tsx

@@ -7,7 +7,11 @@ import {
 
 import type { StyleDescriptor } from "react-native-css/compiler";
 
-import { VAR_SYMBOL, type VariableContextValue } from "../native/reactivity";
+import {
+  toVariableRecord,
+  VAR_SYMBOL,
+  type VariableContextValue,
+} from "../native/reactivity";
 
 globalThis.__react_native_css_variable_context ??=
   createContext<VariableContextValue>({
@@ -24,9 +28,7 @@ export function VariableContextProvider(
   const value: VariableContextValue = useMemo(
     () => ({
       ...inheritedVariables,
-      ...Object.fromEntries(
-        Object.entries(props.value).map(([k, v]) => [k.replace(/^--/, ""), v]),
-      ),
+      ...toVariableRecord(props.value),
       [VAR_SYMBOL]: true,
     }),
     [inheritedVariables, props.value],