From 6fdb412d13b59683da729a97debcdcde7d87d36d Mon Sep 17 00:00:00 2001
From: Mark Lawlor <mwlawlor@gmail.com>
Date: Fri, 10 Oct 2025 16:16:11 +1000
Subject: [PATCH 1/4] fix: nativeStyleMapping incorrectly working

---
 example/src/App.tsx                           |  3 +-
 .../native/container-queries.test.tsx         |  2 +-
 src/__tests__/native/specificity.test.tsx     | 25 ++----
 src/native/react/useNativeCss.ts              | 19 +++--
 src/native/styles/index.ts                    | 81 ++++++++++++++++---
 types.d.ts                                    |  3 +
 6 files changed, 96 insertions(+), 37 deletions(-)

diff --git a/example/src/App.tsx b/example/src/App.tsx
index d09345f..403794a 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -1,4 +1,4 @@
-import { Text, View } from "react-native";
+import { Button, Text, View } from "react-native";
 
 import { StatusBar } from "expo-status-bar";
 
@@ -10,6 +10,7 @@ export default function App() {
       <Text className="text-red-800 text-2xl font-bold animate-bounce">
         Hello world!!!
       </Text>
+      <Button title="test2" className="text-red-500" />
       <StatusBar style="auto" />
     </View>
   );
diff --git a/src/__tests__/native/container-queries.test.tsx b/src/__tests__/native/container-queries.test.tsx
index 2dd262d..3ea6039 100644
--- a/src/__tests__/native/container-queries.test.tsx
+++ b/src/__tests__/native/container-queries.test.tsx
@@ -107,7 +107,7 @@ test("container query width", () => {
     },
   });
 
-  expect(parent.props.style).toStrictEqual([{ width: 200 }, { width: 500 }]);
+  expect(parent.props.style).toStrictEqual({ width: 500 });
 
   expect(child.props.style).toStrictEqual({
     color: "#00f",
diff --git a/src/__tests__/native/specificity.test.tsx b/src/__tests__/native/specificity.test.tsx
index 3432a2f..b582893 100644
--- a/src/__tests__/native/specificity.test.tsx
+++ b/src/__tests__/native/specificity.test.tsx
@@ -16,10 +16,7 @@ test("inline styles", () => {
     />,
   ).getByTestId(testID);
 
-  expect(component.props.style).toStrictEqual([
-    { backgroundColor: "#f00" },
-    { backgroundColor: "blue" },
-  ]);
+  expect(component.props.style).toStrictEqual({ backgroundColor: "blue" });
 });
 
 test("specificity order", () => {
@@ -60,10 +57,7 @@ test("important - requires sorting", () => {
     <Text testID={testID} className="blue red" />,
   ).getByTestId(testID);
 
-  expect(component.props.style).toStrictEqual([
-    { color: "#f00" },
-    { color: "#00f" },
-  ]);
+  expect(component.props.style).toStrictEqual({ color: "#00f" });
 });
 
 test("important - inline", () => {
@@ -79,10 +73,7 @@ test("important - inline", () => {
     />,
   ).getByTestId(testID);
 
-  expect(component.props.style).toStrictEqual([
-    { backgroundColor: "red" },
-    { backgroundColor: "#00f" },
-  ]);
+  expect(component.props.style).toStrictEqual({ backgroundColor: "#00f" });
 });
 
 test("important - modifiers", () => {
@@ -96,17 +87,11 @@ test("important - modifiers", () => {
     <Text testID={testID} className="blue red" />,
   ).getByTestId(testID);
 
-  expect(component.props.style).toStrictEqual([
-    { color: "#f00" },
-    { color: "#00f" },
-  ]);
+  expect(component.props.style).toStrictEqual({ color: "#00f" });
 
   fireEvent(component, "hoverIn");
 
-  expect(component.props.style).toStrictEqual([
-    { color: "#008000" },
-    { color: "#00f" },
-  ]);
+  expect(component.props.style).toStrictEqual({ color: "#00f" });
 });
 
 test("passThrough - inline", () => {
diff --git a/src/native/react/useNativeCss.ts b/src/native/react/useNativeCss.ts
index 05341c3..4386820 100644
--- a/src/native/react/useNativeCss.ts
+++ b/src/native/react/useNativeCss.ts
@@ -172,29 +172,36 @@ export function useNativeCss(
 export function mappingToConfig(mapping: StyledConfiguration<any>) {
   return Object.entries(mapping).flatMap(([key, value]): Config => {
     if (value === true) {
-      return { source: key, target: key };
+      return {
+        source: key,
+        target: key,
+      };
     } else if (value === false) {
       return { source: key, target: false };
     } else if (typeof value === "string") {
       return { source: key, target: value.split(".") };
     } else if (typeof value === "object") {
+      const nativeStyleMapping = value.nativeStyleMapping as
+        | Record<string, string>
+        | undefined;
+
       if (Array.isArray(value)) {
-        return { source: key, target: value };
+        return { source: key, target: value, nativeStyleMapping };
       }
 
       if ("target" in value) {
         if (value.target === false) {
-          return { source: key, target: false };
+          return { source: key, target: false, nativeStyleMapping };
         } else if (typeof value.target === "string") {
           const target = value.target.split(".");
 
           if (target.length === 1) {
-            return { source: key, target: target[0]! };
+            return { source: key, target: target[0]!, nativeStyleMapping };
           } else {
-            return { source: key, target };
+            return { source: key, target, nativeStyleMapping };
           }
         } else if (Array.isArray(value.target)) {
-          return { source: key, target: value.target };
+          return { source: key, target: value.target, nativeStyleMapping };
         }
       }
     }
diff --git a/src/native/styles/index.ts b/src/native/styles/index.ts
index 1ee9b24..1c347ee 100644
--- a/src/native/styles/index.ts
+++ b/src/native/styles/index.ts
@@ -49,10 +49,19 @@ export function getStyledProps(
   const styledProps = state.stylesObs?.get(state.styleEffect);
 
   for (const config of state.configs) {
-    result = deepMergeConfig(config, styledProps?.normal, inline, true);
+    result = deepMergeConfig(
+      config,
+      nativeStyleMapping(config, styledProps?.normal),
+      inline,
+      true,
+    );
 
     if (styledProps?.important) {
-      result = deepMergeConfig(config, result, styledProps.important);
+      result = deepMergeConfig(
+        config,
+        result,
+        nativeStyleMapping(config, styledProps.important),
+      );
     }
 
     // Apply the handlers
@@ -122,11 +131,11 @@ function deepMergeConfig(
   right: Record<string, any> | undefined | null,
   rightIsInline = false,
 ) {
-  if (!config.target || !right) {
+  if (!right) {
     return { ...left };
   }
 
-  let result = Object.assign({}, left, right);
+  let result = config.target ? Object.assign({}, left, right) : { ...left };
 
   if (
     right &&
@@ -140,7 +149,7 @@ 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) {
+  if (Array.isArray(config.target)) {
     for (let i = 0; i < config.target.length - 1; i++) {
       const key = config.target[i];
 
@@ -159,11 +168,9 @@ function deepMergeConfig(
     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;
   }
 
@@ -196,3 +203,59 @@ function deepMergeConfig(
 
   return result;
 }
+
+function nativeStyleMapping(
+  config: Config,
+  props: Record<string, any> | undefined,
+) {
+  if (!config.nativeStyleMapping || !props) {
+    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.slice(0, -1)) {
+      target[token] ??= {};
+      target = target[token];
+    }
+
+    target[lastToken!] = styleValue;
+  }
+
+  return props;
+}
diff --git a/types.d.ts b/types.d.ts
index b89adc3..1ba5b85 100644
--- a/types.d.ts
+++ b/types.d.ts
@@ -16,6 +16,9 @@ declare module "@react-native/virtualized-lists" {
 }
 
 declare module "react-native" {
+  interface ButtonProps {
+    className?: string;
+  }
   interface ScrollViewProps
     extends ViewProps,
       ScrollViewPropsIOS,

From 784a1f48ac0d1ea28a38b618b97005cbf4188e26 Mon Sep 17 00:00:00 2001
From: Mark Lawlor <mwlawlor@gmail.com>
Date: Fri, 10 Oct 2025 17:07:17 +1000
Subject: [PATCH 2/4] fix: add warning for lightningcss@1.30.2

---
 src/compiler/lightningcss-loader.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/compiler/lightningcss-loader.ts b/src/compiler/lightningcss-loader.ts
index 5565e74..143a849 100644
--- a/src/compiler/lightningcss-loader.ts
+++ b/src/compiler/lightningcss-loader.ts
@@ -45,7 +45,7 @@ export function lightningcssLoader() {
 
     if (packageJSON.version === "1.30.2") {
       throw new Error(
-        "[react-native-css] lightningcss version 1.30.2 has a critical bug that breaks compilation. Please pin the version of lightningcss to 1.30.1; or try upgrading.",
+        "[react-native-css] lightningcss version 1.30.2 has a critical bug that breaks compilation. Please pin the version of lightingcss to 1.30.1; or try upgrading.",
       );
     }
   } catch {

From dea6dfc7da5315ae905f1377faede6746ffda4fc Mon Sep 17 00:00:00 2001
From: Mark Lawlor <mwlawlor@gmail.com>
Date: Sat, 11 Oct 2025 14:51:15 +1000
Subject: [PATCH 3/4] Update src/native/styles/index.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 src/native/styles/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/native/styles/index.ts b/src/native/styles/index.ts
index 1c347ee..09ab073 100644
--- a/src/native/styles/index.ts
+++ b/src/native/styles/index.ts
@@ -249,7 +249,7 @@ function nativeStyleMapping(
     let target = props;
     const tokens = path.split(".");
     const lastToken = tokens.pop();
-    for (const token of tokens.slice(0, -1)) {
+    for (const token of tokens) {
       target[token] ??= {};
       target = target[token];
     }

From cc51a10645e4831af2ce0b73c57fc2b45c81fe1f Mon Sep 17 00:00:00 2001
From: Mark Lawlor <mwlawlor@gmail.com>
Date: Sat, 11 Oct 2025 14:52:00 +1000
Subject: [PATCH 4/4] Apply suggestion from @Copilot

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 src/compiler/lightningcss-loader.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/compiler/lightningcss-loader.ts b/src/compiler/lightningcss-loader.ts
index 143a849..5565e74 100644
--- a/src/compiler/lightningcss-loader.ts
+++ b/src/compiler/lightningcss-loader.ts
@@ -45,7 +45,7 @@ export function lightningcssLoader() {
 
     if (packageJSON.version === "1.30.2") {
       throw new Error(
-        "[react-native-css] lightningcss version 1.30.2 has a critical bug that breaks compilation. Please pin the version of lightingcss to 1.30.1; or try upgrading.",
+        "[react-native-css] lightningcss version 1.30.2 has a critical bug that breaks compilation. Please pin the version of lightningcss to 1.30.1; or try upgrading.",
       );
     }
   } catch {