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

package/src/native/styles/index.ts

@@ -17,6 +17,149 @@ import {
 } from "../reactivity";
 import { calculateProps } from "./calculate-props";
 
+/**
+ * Checks if the left style object has any properties that are not present in the right style object.
+ * This is used to determine if styles need to be preserved in an array or if right can completely override left.
+ *
+ * Note: This intentionally only checks one direction (left → right). We don't need to check if right has
+ * properties that left doesn't have, because right will always be applied/merged. The question we're
+ * answering is: "Does left have any properties that would be lost if we just used right?" If yes, we
+ * create a style array [left, right] to preserve both. If no, right can safely replace left entirely.
+ *
+ * @param left - The left style object to check
+ * @param right - The right style object to compare against
+ * @returns true if left has at least one property key that doesn't exist in right, false otherwise
+ *
+ * @example
+ * hasNonOverlappingProperties({color: 'red', fontSize: 12}, {color: 'blue'}) // true - fontSize is not in right
+ * hasNonOverlappingProperties({color: 'red'}, {color: 'blue', fontSize: 12}) // false - all left keys exist in right
+ */
+function hasNonOverlappingProperties(
+  left: Record<string, any>,
+  right: Record<string, any>,
+): boolean {
+  // Null safety check
+  if (!left || !right) {
+    return false;
+  }
+
+  // Only check own properties to avoid prototype pollution
+  for (const key in left) {
+    if (Object.prototype.hasOwnProperty.call(left, key)) {
+      if (!Object.prototype.hasOwnProperty.call(right, key)) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+
+/**
+ * Flattens a style array into a single object when possible, with rightmost values taking precedence.
+ * Returns the original array if it contains any non-plain objects, arrays, or CSS variable objects.
+ *
+ * Note: This function assumes the input array has already been filtered (e.g., by filterCssVariables),
+ * so empty arrays should not reach this function. If they do, they will be treated as non-flattenable.
+ *
+ * @param styleArray - The style array to potentially flatten
+ * @returns A single merged object if all items are plain objects, otherwise the original array
+ */
+function flattenStyleArray(styleArray: any[]): any {
+  // Check if we can flatten to a single object (all items are plain objects)
+  for (const item of styleArray) {
+    // Use explicit null check instead of !item to allow falsy values like 0 or false
+    if (
+      item == null ||
+      typeof item !== "object" ||
+      Array.isArray(item) ||
+      Object.prototype.hasOwnProperty.call(item, VAR_SYMBOL)
+    ) {
+      return styleArray;
+    }
+  }
+
+  // Use reduce to avoid spread operator performance issues with large arrays
+  return styleArray.reduce((acc, item) => Object.assign(acc, item), {});
+}
+
+/**
+ * Recursively filters out CSS variable objects (with VAR_SYMBOL) from style values.
+ * This prevents CSS variable runtime objects from leaking into React Native component props.
+ *
+ * @param value - The value to filter (can be any type: object, array, primitive, etc.)
+ * @param depth - Internal recursion depth counter to prevent stack overflow (max 100)
+ * @returns The filtered value with CSS variables removed, or `undefined` if the entire value
+ *          should be filtered out (e.g., empty arrays, objects with only VAR_SYMBOL properties)
+ *
+ * Filtering behavior:
+ * - Objects with VAR_SYMBOL property: returns `undefined` (completely filtered)
+ * - Arrays: filters out VAR_SYMBOL objects, returns `undefined` if empty after filtering
+ * - Objects: recursively filters properties, returns `undefined` if no properties remain
+ * - Primitives (null, undefined, numbers, strings, booleans): returned as-is
+ * - Symbol properties: intentionally filtered out for React Native compatibility
+ *
+ * @example
+ * filterCssVariables({fontSize: 16, color: {[VAR_SYMBOL]: true}}) // {fontSize: 16}
+ * filterCssVariables([{margin: 10}, {[VAR_SYMBOL]: true}]) // [{margin: 10}]
+ * filterCssVariables({color: {[VAR_SYMBOL]: true}}) // undefined (all props filtered)
+ */
+function filterCssVariables(value: any, depth = 0): any | undefined {
+  // Prevent stack overflow on deeply nested structures
+  if (depth > 100) {
+    return value;
+  }
+
+  if (value === null || value === undefined) {
+    return value;
+  }
+
+  if (Array.isArray(value)) {
+    // Single-pass filter with map operation
+    const filtered: any[] = [];
+
+    for (const item of value) {
+      const filteredItem = filterCssVariables(item, depth + 1);
+      if (
+        filteredItem !== undefined &&
+        !(
+          typeof filteredItem === "object" &&
+          filteredItem !== null &&
+          Object.prototype.hasOwnProperty.call(filteredItem, VAR_SYMBOL)
+        )
+      ) {
+        filtered.push(filteredItem);
+      }
+    }
+
+    return filtered.length > 0 ? filtered : undefined;
+  }
+
+  if (typeof value === "object") {
+    // If the object itself has VAR_SYMBOL, filter it out (check own property only)
+    if (Object.prototype.hasOwnProperty.call(value, VAR_SYMBOL)) {
+      return undefined;
+    }
+
+    // Otherwise, filter VAR_SYMBOL properties from nested objects
+    const filtered: Record<string, any> = {};
+    let hasProperties = false;
+
+    // Use Object.keys to only iterate own string properties (not inherited, not Symbols)
+    // This intentionally filters out Symbol properties for React Native compatibility
+    for (const key of Object.keys(value)) {
+      const filteredValue = filterCssVariables(value[key], depth + 1);
+      if (filteredValue !== undefined) {
+        filtered[key] = filteredValue;
+        hasProperties = true;
+      }
+    }
+
+    return hasProperties ? filtered : undefined;
+  }
+
+  return value;
+}
+
 export const stylesFamily = family(
   (
     hash: string,
@@ -29,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);
         }
@@ -43,16 +187,50 @@ 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, styledProps?.normal, inline, true);
+    result = deepMergeConfig(
+      config,
+      nativeStyleMapping(config, adaptProps(styledProps?.normal)),
+      inline,
+      true,
+    );
 
     if (styledProps?.important) {
-      result = deepMergeConfig(config, result, styledProps.important);
+      result = deepMergeConfig(
+        config,
+        result,
+        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
@@ -113,6 +291,68 @@ 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;
+}
+
+/**
+ * Merges two prop objects, skipping keys from `right` whose value is `undefined`
+ * or an empty plain object.
+ *
+ * `Object.assign({}, left, right)` copies all enumerable own properties from `right`,
+ * including those with value `undefined` or `{}`. When a component passes
+ * `style={undefined}` or `contentContainerStyle={{}}`, the computed NativeWind
+ * style from `left` gets overwritten. This function prevents that by only copying
+ * values that carry meaningful style information.
+ *
+ * Empty object detection uses inline `for...in` instead of a separate function or
+ * `Object.keys().length` — avoids both function call overhead and intermediate array
+ * allocation on a hot path (called per-prop per-render). Consistent with how the
+ * `["style"]` target path handles this via `filterCssVariables({})` returning `undefined`.
+ *
+ * @param left - The computed NativeWind props (className-derived styles)
+ * @param right - The inline props from the component (guaranteed non-null by caller; may contain undefined values)
+ * @returns A new object with all properties from `left`, overridden only by meaningful values from `right`
+ */
+function mergeDefinedProps(
+  left: Record<string, any> | undefined,
+  right: Record<string, any>,
+) {
+  const result = left ? { ...left } : {};
+  for (const key in right) {
+    const value = right[key];
+    if (value === undefined) continue;
+    // Non-object values (strings, numbers, booleans, null, arrays): always assign
+    if (typeof value !== "object" || value === null || Array.isArray(value)) {
+      result[key] = value;
+      continue;
+    }
+    // Plain object: assign only if non-empty. An empty style object (e.g.,
+    // contentContainerStyle={{}}) has no properties to apply and should not
+    // overwrite computed className styles. The for...in loop only executes
+    // if the object has enumerable keys — empty objects are skipped.
+    for (const _ in value) {
+      result[key] = value;
+      break;
+    }
+  }
   return result;
 }
 
@@ -122,11 +362,96 @@ function deepMergeConfig(
   right: Record<string, any> | undefined | null,
   rightIsInline = false,
 ) {
-  if (!config.target || !right) {
+  if (!right) {
     return { ...left };
   }
 
-  let result = Object.assign({}, left, right);
+  // Handle style merging to support both className and inline style props
+  let result: Record<string, any>;
+  if (config.target) {
+    if (
+      Array.isArray(config.target) &&
+      config.target.length === 1 &&
+      config.target[0] === "style"
+    ) {
+      // Special handling for style target when we have inline styles
+      result = { ...left, ...right };
+
+      // Handle null/undefined inline styles
+      if (right?.style === null || right?.style === undefined) {
+        if (left?.style) {
+          result.style = left.style;
+        }
+      } else if (rightIsInline && right?.style) {
+        // Filter inline styles if rightIsInline is true
+        const filteredRightStyle = filterCssVariables(right.style);
+
+        if (left?.style) {
+          if (!filteredRightStyle) {
+            // All inline styles were CSS variables, only use left
+            result.style = left.style;
+          } else {
+            const leftStyle = left.style;
+
+            // For arrays or objects, check if we need to create a style array
+            const leftIsObject =
+              typeof leftStyle === "object" && !Array.isArray(leftStyle);
+            const rightIsObject =
+              typeof filteredRightStyle === "object" &&
+              !Array.isArray(filteredRightStyle);
+
+            if (leftIsObject && rightIsObject) {
+              if (hasNonOverlappingProperties(leftStyle, filteredRightStyle)) {
+                result.style = [leftStyle, filteredRightStyle];
+              } else {
+                // All left properties are in right, right overrides
+                result.style = filteredRightStyle;
+              }
+            } else {
+              // One or both are arrays, merge them
+              result.style = [leftStyle, filteredRightStyle];
+            }
+          }
+        } else {
+          // No left style, just use filtered right
+          if (filteredRightStyle) {
+            result.style = filteredRightStyle;
+          } else {
+            // All filtered out, remove style prop
+            delete result.style;
+          }
+        }
+      } else if (!rightIsInline && right?.style) {
+        // Merging non-inline styles (e.g., important styles)
+        if (left?.style) {
+          // If left.style is an array, append right.style
+          if (Array.isArray(left.style)) {
+            const combined = [...left.style, right.style];
+            result.style = flattenStyleArray(combined);
+          } else if (
+            typeof left.style === "object" &&
+            typeof right.style === "object"
+          ) {
+            // Both are objects, check for overlaps
+            if (hasNonOverlappingProperties(left.style, right.style)) {
+              result.style = flattenStyleArray([left.style, right.style]);
+            } else {
+              // All left properties are overridden by right
+              result.style = right.style;
+            }
+          } else {
+            // One or both are arrays/mixed types
+            const combined = [left.style, right.style];
+            result.style = flattenStyleArray(combined);
+          }
+        }
+      }
+    } else {
+      result = mergeDefinedProps(left, right);
+    }
+  } else {
+    result = mergeDefinedProps(left, right);
+  }
 
   if (
     right &&
@@ -140,53 +465,74 @@ function deepMergeConfig(
   /**
    *  If target is a path, deep merge until we get to the last key
    */
-  if (Array.isArray(config.target) && config.target.length > 1) {
-    for (let i = 0; i < config.target.length - 1; i++) {
-      const key = config.target[i];
-
-      if (key === undefined) {
-        return result;
-      }
-
+  if (Array.isArray(config.target)) {
+    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;
   }
 
-  const target = Array.isArray(config.target)
-    ? config.target[0]
-    : config.target;
+  const target = config.target;
 
-  if (target === undefined) {
+  if (target === undefined || target === false) {
     return result;
   }
 
   let rightValue = right?.[target];
 
   // Strip any inline variables from the target
-  if (rightIsInline && rightValue) {
-    if (Array.isArray(rightValue)) {
-      rightValue = rightValue.filter((v) => {
-        return typeof v !== "object" || !(v && VAR_SYMBOL in v);
-      });
-
-      if (rightValue.length === 0) {
-        rightValue = undefined;
-      }
-    } else if (
-      typeof rightValue === "object" &&
-      rightValue &&
-      VAR_SYMBOL in rightValue
-    ) {
-      rightValue = undefined;
-      delete result[target][VAR_SYMBOL];
-    }
+  if (rightIsInline && rightValue !== undefined) {
+    rightValue = filterCssVariables(rightValue);
   }
 
   if (rightValue !== undefined) {
@@ -196,3 +542,64 @@ function deepMergeConfig(
 
   return result;
 }
+
+function nativeStyleMapping(
+  config: Config,
+  props: Record<string, any> | undefined,
+) {
+  if (!props) {
+    return props;
+  }
+  if (!config.nativeStyleMapping) {
+    if (config.target === false) delete props.style;
+    return props;
+  }
+
+  let source: Record<string, any> | undefined;
+
+  if (typeof config.target === "string") {
+    source = props[config.target];
+  } else if (config.target === false) {
+    source = props["style"];
+  } else {
+    const tokens = [...config.target];
+    const lastToken = tokens.pop()!;
+
+    source = props;
+    for (const token of tokens) {
+      source = source[token];
+      if (!source) {
+        return props;
+      }
+    }
+
+    source = source[lastToken];
+  }
+
+  if (!source) {
+    return props;
+  }
+
+  for (const [key, path] of Object.entries(config.nativeStyleMapping)) {
+    const styleValue = source[key];
+
+    delete source[key];
+
+    if (styleValue === undefined) {
+      continue;
+    }
+
+    let target = props;
+    const tokens = path.split(".");
+    const lastToken = tokens.pop();
+    for (const token of tokens) {
+      target[token] ??= {};
+      target = target[token];
+    }
+
+    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/_handler.ts

@@ -1,5 +1,8 @@
 /* eslint-disable */
-import { isStyleDescriptorArray } from "react-native-css/utilities";
+import {
+  isStyleDescriptorArray,
+  isStyleFunction,
+} from "react-native-css/utilities";
 
 import { setDeepPath } from "../../objects";
 import { ShortHandSymbol } from "../constants";
@@ -56,6 +59,16 @@ export function shorthandHandler(
             return type.includes(value) || type.includes(typeof value);
           }
 
+          // Style functions (var, calc, env, etc.) are unresolved at pattern-match
+          // time — their actual values won't be known until runtime variable
+          // resolution. Accepting them in any type slot makes pattern matching
+          // less strict when variables are involved, but rejecting them would
+          // break variable-based shadows entirely (e.g. box-shadow: var(--shadow)
+          // where --shadow resolves to "0 4px 6px -1px #000").
+          if (isStyleFunction(value)) {
+            return true;
+          }
+
           switch (type) {
             case "string":
             case "number":

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