fix: allow className and style props to coexist when properties differ (#223)

* fix: allow className and style props to coexist when properties differ

Previously, when both className and style props were provided, className-derived
styles would be completely overwritten by inline styles due to Object.assign()
behavior in deepMergeConfig().

This refined solution:
- Only creates style arrays when className and inline styles have non-overlapping properties
- Maintains CSS precedence rules (inline styles override className for same properties)
- Preserves backward compatibility with existing behavior
- Passes all existing tests while enabling the new functionality

Enables combining NativeWind className styling with React Native Reanimated
animated styles when they target different CSS properties.

Fixes issue where className was ignored when style prop was also present,
while preserving expected CSS specificity behavior.

* perf: optimize style merging performance and readability

Address code review feedback by improving the style merging logic:

- Remove Set creation and array spreading for better performance
- Add early exit when finding non-overlapping properties
- Simplify logic flow making it more readable and maintainable
- Maintain identical functionality while reducing computational overhead

Performance improvements are especially beneficial for components
with many style properties, reducing unnecessary object iterations.

Author: tyrauber

src/__tests__/native/className-with-style.test.tsx

@@ -0,0 +1,48 @@
+import { render } from "@testing-library/react-native";
+import { Text } from "react-native-css/components/Text";
+import { registerCSS, testID } from "react-native-css/jest";
+
+test("className with inline style props should coexist when different properties", () => {
+  registerCSS(`.text-red { color: red; }`);
+
+  const component = render(
+    <Text testID={testID} className="text-red" style={{ fontSize: 16 }} />,
+  ).getByTestId(testID);
+
+  // Both className and style props should be applied as array
+  expect(component.props.style).toEqual([
+    { color: "#f00" }, // Changed from "red" to "#f00"
+    { fontSize: 16 },
+  ]);
+});
+
+test("className with inline style props should favor inline when same property", () => {
+  registerCSS(`.text-red { color: red; }`);
+
+  const component = render(
+    <Text testID={testID} className="text-red" style={{ color: "blue" }} />,
+  ).getByTestId(testID);
+
+  // When same property exists, inline style should win (not array)
+  expect(component.props.style).toEqual({ color: "blue" });
+});
+
+test("only className should not create array", () => {
+  registerCSS(`.text-red { color: red; }`);
+
+  const component = render(
+    <Text testID={testID} className="text-red" />,
+  ).getByTestId(testID);
+
+  // Only className should be a flat object
+  expect(component.props.style).toEqual({ color: "#f00" }); // Changed from "red" to "#f00"
+});
+
+test("only inline style should not create array", () => {
+  const component = render(
+    <Text testID={testID} style={{ color: "blue" }} />,
+  ).getByTestId(testID);
+
+  // Only inline style should be a flat object
+  expect(component.props.style).toEqual({ color: "blue" });
+});

src/native/styles/index.ts

@@ -135,7 +135,41 @@ function deepMergeConfig(
     return { ...left };
   }
 
-  let result = config.target ? Object.assign({}, left, right) : { ...left };
+  // 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 };
+      // More performant approach - check for non-overlapping properties without Sets
+      if (left?.style && right?.style && rightIsInline) {
+        const leftStyle = left.style;
+        const rightStyle = right.style;
+
+        // Quick check: do any left properties NOT exist in right?
+        let hasNonOverlappingProperties = false;
+        for (const key in leftStyle) {
+          if (!(key in rightStyle)) {
+            hasNonOverlappingProperties = true;
+            break; // Early exit for performance
+          }
+        }
+
+        if (hasNonOverlappingProperties) {
+          result.style = [leftStyle, rightStyle];
+        }
+        // Otherwise, Object.assign above will handle the override correctly
+      }
+    } else {
+      result = Object.assign({}, left, right);
+    }
+  } else {
+    result = { ...left };
+  }
 
   if (
     right &&