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

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

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

package/src/native/styles/index.ts

@@ -172,9 +172,10 @@ export const stylesFamily = family(
     /**
      * A family is a map, so we need to cleanup the observers when the the hash is no longer used
      */
+    const unsubscribe = obs.unsubscribe;
     return Object.assign(obs, {
-      cleanup: (effect: Effect) => {
-        obs.observers.delete(effect);
+      unsubscribe: (effect: Effect) => {
+        unsubscribe(effect);
         if (obs.observers.size === 0) {
           stylesFamily.delete(hash);
         }
@@ -186,15 +187,23 @@ export const stylesFamily = family(
 export function getStyledProps(
   state: ComponentState,
   inline: Record<string, any> | undefined | null,
+  adaptProps: (
+    props: Record<string, any> | undefined,
+  ) => Record<string, any> | undefined = (props) => props,
 ) {
   let result: Record<string, any> | undefined;
 
   const styledProps = state.stylesObs?.get(state.styleEffect);
 
+  // Each config merges a complete props object. Preserve its full target path
+  // before the next config merges unrelated inline props over that object.
+  const computedTargets: { path: string[]; value: unknown }[] = [];
+  const consumedSources: string[] = [];
+
   for (const config of state.configs) {
     result = deepMergeConfig(
       config,
-      nativeStyleMapping(config, styledProps?.normal),
+      nativeStyleMapping(config, adaptProps(styledProps?.normal)),
       inline,
       true,
     );
@@ -203,10 +212,27 @@ export function getStyledProps(
       result = deepMergeConfig(
         config,
         result,
-        nativeStyleMapping(config, styledProps.important),
+        nativeStyleMapping(config, adaptProps(styledProps.important)),
       );
     }
 
+    if (result && config.target) {
+      const path = Array.isArray(config.target)
+        ? config.target
+        : [config.target];
+      let target = result;
+      for (const key of path.slice(0, -1)) target = target?.[key];
+      const key = path[path.length - 1];
+      if (target && key && key in target) {
+        computedTargets.push({ path, value: target[key] });
+      }
+    }
+
+    // Track consumed className sources for cleanup
+    if (config.source !== config.target) {
+      consumedSources.push(config.source);
+    }
+
     // Apply the handlers
     if (hoverFamily.has(state.ruleEffectGetter)) {
       result ??= {};
@@ -265,6 +291,24 @@ export function getStyledProps(
     }
   }
 
+  // Restore correctly-merged target props that may have been overwritten
+  // by later config iterations' Object.assign({}, left, right)
+  if (result) {
+    for (const { path, value } of computedTargets) {
+      let target = result;
+      for (const key of path.slice(0, -1)) {
+        const existing = target[key];
+        target = target[key] = Array.isArray(existing)
+          ? [...existing]
+          : { ...existing };
+      }
+      target[path[path.length - 1]!] = value;
+    }
+    for (const source of consumedSources) {
+      delete result[source];
+    }
+  }
+
   return result;
 }
 
@@ -422,21 +466,59 @@ function deepMergeConfig(
    *  If target is a path, deep merge until we get to the last key
    */
   if (Array.isArray(config.target)) {
-    for (let i = 0; i < config.target.length - 1; i++) {
-      const key = config.target[i];
-
-      if (key === undefined) {
-        return result;
-      }
-
+    if (config.target.length > 1) {
+      const key = config.target[0]!;
       result[key] = deepMergeConfig(
-        { source: config.source, target: config.target.slice(i + 1) },
+        { source: config.source, target: config.target.slice(1) },
         left?.[key],
         right?.[key],
         rightIsInline,
       );
     }
 
+    // For length-1 array targets (e.g. ["contentContainerStyle"]), the loop
+    // above runs 0 iterations. Merge the target prop so inline styles don't
+    // silently overwrite className-computed styles (same as string target path).
+    const finalKey = config.target[config.target.length - 1];
+    if (config.target.length === 1 && finalKey && rightIsInline) {
+      let rightValue = right?.[finalKey];
+      if (rightValue !== undefined) {
+        rightValue = filterCssVariables(rightValue);
+      }
+      if (rightValue === undefined || rightValue === null) {
+        // Inline is empty or fully filtered — preserve className-computed value
+        if (left && finalKey in left) {
+          result[finalKey] = left[finalKey];
+        } else {
+          // No left value either — remove unfiltered inline value from result
+          delete result[finalKey];
+        }
+      } else if (left && finalKey in left) {
+        const leftValue = left[finalKey];
+        const leftIsObj =
+          typeof leftValue === "object" &&
+          leftValue !== null &&
+          !Array.isArray(leftValue);
+        const rightIsObj =
+          typeof rightValue === "object" &&
+          rightValue !== null &&
+          !Array.isArray(rightValue);
+        if (leftIsObj && rightIsObj) {
+          if (hasNonOverlappingProperties(leftValue, rightValue)) {
+            result[finalKey] = [leftValue, rightValue];
+          } else {
+            // All left keys are in right — use filtered right value
+            result[finalKey] = rightValue;
+          }
+        } else {
+          result[finalKey] = [leftValue, rightValue];
+        }
+      } else {
+        // No left value — use filtered right value (not the unfiltered one from mergeDefinedProps)
+        result[finalKey] = rightValue;
+      }
+    }
+
     return result;
   }
 
@@ -465,7 +547,11 @@ function nativeStyleMapping(
   config: Config,
   props: Record<string, any> | undefined,
 ) {
-  if (!config.nativeStyleMapping || !props) {
+  if (!props) {
+    return props;
+  }
+  if (!config.nativeStyleMapping) {
+    if (config.target === false) delete props.style;
     return props;
   }
 
@@ -514,5 +600,6 @@ function nativeStyleMapping(
     target[lastToken!] = styleValue;
   }
 
+  if (config.target === false) delete props.style;
   return props;
 }

package/src/native/styles/resolve.ts

@@ -5,6 +5,7 @@ import type {
   StyleDescriptor,
   StyleFunction,
 } from "react-native-css/compiler";
+import { isStyleDescriptorArray } from "react-native-css/utilities";
 
 import type { RenderGuard } from "../conditions/guards";
 import { type Getter, type VariableContextValue } from "../reactivity";
@@ -12,6 +13,7 @@ import type { calculateProps } from "./calculate-props";
 import { transformKeys } from "./defaults";
 import * as functions from "./functions";
 import { lineHeight } from "./line-height";
+import { scaleFactor } from "./scale-factor";
 import * as shorthands from "./shorthands";
 import { em, rem, vh, vw } from "./units";
 import { varResolver } from "./variables";
@@ -51,6 +53,7 @@ export type ResolveValueOptions = {
   inlineVariables?: InlineVariable | undefined;
   renderGuards?: RenderGuard[];
   variableHistory?: Set<string>;
+  variableCycles?: Set<string>;
   /** Pass down to perform recursive calculations and avoid circular dependencies */
   calculateProps?: typeof calculateProps;
 };
@@ -77,7 +80,7 @@ export function resolveValue(
         return null;
       } else if (value.endsWith("px")) {
         // Inline vars() might set a value with a px suffix
-        return parseInt(value.slice(0, -2), 10);
+        return parseFloat(value.slice(0, -2));
       } else {
         return value;
       }
@@ -87,7 +90,7 @@ export function resolveValue(
         return value;
       }
 
-      if (isDescriptorArray(value)) {
+      if (isStyleDescriptorArray(value)) {
         value = value
           .map((d) => resolveValue(d, get, options))
           .filter((d) => d !== undefined);
@@ -122,7 +125,16 @@ export function resolveValue(
         ) as StyleDescriptor;
       } else if (transformKeys.has(name)) {
         // translate, rotate, scale, etc.
-        return { [name]: simpleResolve(value[2], castToArray) };
+        let resolved = simpleResolve(value[2], castToArray);
+        // CSS scale percentages describe a factor, unlike translation percentages.
+        if (
+          (name === "scaleX" || name === "scaleY" || name === "scale") &&
+          typeof resolved === "string" &&
+          resolved.endsWith("%")
+        ) {
+          resolved = scaleFactor(resolved);
+        }
+        return { [name]: resolved };
       } else {
         let args = simpleResolve(value[2], castToArray);
 
@@ -154,11 +166,3 @@ export function resolveValue(
     }
   }
 }
-
-function isDescriptorArray(
-  value: StyleDescriptor | StyleDescriptor[],
-): value is StyleDescriptor[] {
-  return Array.isArray(value) && typeof value[0] === "object"
-    ? Array.isArray(value[0])
-    : true;
-}

package/src/native/styles/scale-factor.ts

@@ -0,0 +1,6 @@
+export function scaleFactor(value: unknown) {
+  if (typeof value === "string" && value.endsWith("%")) {
+    return Number(value.slice(0, -1)) / 100;
+  }
+  return value;
+}

package/src/native/styles/shorthands/animation.ts

@@ -39,6 +39,8 @@ export const animationShorthand = shorthandHandler(
     [name],
     [duration, name],
     [name, duration],
+    [name, duration, timingFunction],
+    [duration, timingFunction, name],
     [name, duration, iteration],
     [name, duration, timingFunction, iteration],
     [duration, delay, name],
@@ -67,7 +69,7 @@ export const animation: StyleFunctionResolver = (
 ) => {
   const animationShortHandTuples = animationShorthand(
     resolveValue,
-    value,
+    [value[2]],
     get,
     options,
   );
@@ -86,6 +88,10 @@ export const animation: StyleFunctionResolver = (
     return;
   }
 
+  if (name === "none") {
+    return applyShorthand(animationShortHandTuples);
+  }
+
   const keyframes = get(StyleCollection.keyframes(name));
 
   const animation: Record<string, any> = {};
@@ -127,5 +133,5 @@ export const animationName: StyleFunctionResolver = (
   options,
 ) => {
   const shorthand: any = animation(resolveValue, value, get, options);
-  return shorthand.animationName;
+  return shorthand?.animationName;
 };

package/src/native/styles/shorthands/index.ts

@@ -1,5 +1,6 @@
 export * from "./animation";
 export * from "./border";
+export * from "./logical-border-width";
 export * from "./box-shadow";
 export * from "./text-shadow";
 export * from "./transform";

package/src/native/styles/shorthands/logical-border-width.ts

@@ -0,0 +1,32 @@
+import { ShortHandSymbol } from "../constants";
+import type { StyleFunctionResolver } from "../resolve";
+
+function logicalWidth(start: string, end: string): StyleFunctionResolver {
+  return (resolve, descriptor) => {
+    const resolved = resolve(descriptor[2]);
+    const values: unknown[] = Array.isArray(resolved) ? resolved : [resolved];
+    if (
+      values.length < 1 ||
+      values.length > 2 ||
+      !values.every(
+        (value) =>
+          typeof value === "number" && Number.isFinite(value) && value >= 0,
+      )
+    )
+      return;
+    return {
+      [ShortHandSymbol]: true,
+      [start]: values[0],
+      [end]: values[1] ?? values[0],
+    };
+  };
+}
+
+export const borderBlockWidth = logicalWidth(
+  "borderTopWidth",
+  "borderBottomWidth",
+);
+export const borderInlineWidth = logicalWidth(
+  "borderStartWidth",
+  "borderEndWidth",
+);