Feat/deep merge config optimizations

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

@@ -1,5 +1,6 @@
 import { render } from "@testing-library/react-native";
 import { Text } from "react-native-css/components/Text";
+import { View } from "react-native-css/components/View";
 import { registerCSS, testID } from "react-native-css/jest";
 
 test("className with inline style props should coexist when different properties", () => {
@@ -46,3 +47,44 @@ test("only inline style should not create array", () => {
   // Only inline style should be a flat object
   expect(component.props.style).toEqual({ color: "blue" });
 });
+
+test("important should overwrite the inline style", () => {
+  registerCSS(`.text-red\\! { color: red !important; }`);
+
+  const component = render(
+    <Text testID={testID} className="text-red!" style={{ color: "blue" }} />,
+  ).getByTestId(testID);
+
+  expect(component.props.style).toEqual({ color: "#f00" });
+});
+
+test("View with multiple className properties where inline style takes precedence", () => {
+  registerCSS(`
+    .px-4 { padding-left: 16px; padding-right: 16px; }
+    .pt-4 { padding-top: 16px; }
+    .mb-4 { margin-bottom: 16px; }
+  `);
+
+  const component = render(
+    <View
+      testID={testID}
+      className="px-4 pt-4 mb-4"
+      style={{ width: 300, paddingRight: 0 }}
+    />,
+  ).getByTestId(testID);
+
+  // Inline style should override paddingRight from px-4 class
+  // Other className styles should be preserved in array
+  expect(component.props.style).toEqual([
+    {
+      paddingLeft: 16,
+      paddingRight: 16,
+      paddingTop: 16,
+      marginBottom: 16,
+    },
+    {
+      width: 300,
+      paddingRight: 0,
+    },
+  ]);
+});