From b84c084b4469cfae7b88b99fe48e03828982bd68 Mon Sep 17 00:00:00 2001
From: Adriano Rocha <adriano.olr@gmail.com>
Date: Tue, 26 May 2026 13:42:51 -0300
Subject: [PATCH] feat: add cursor CSS property support

Register a parser for the CSS `cursor` property so that Tailwind classes
like `cursor-pointer` compile to the native `cursor` style prop on
react-native-macos and react-native-windows.

Only the keyword value is extracted (e.g. pointer, auto, default). Cursor
images (`cursor: url(...), pointer`) are not handled since React Native
does not support custom cursor images. iOS and Android silently ignore
the cursor style prop, so this is safe cross-platform.
---
 src/__tests__/compiler/declarations.test.tsx         |  2 ++
 src/__tests__/vendor/tailwind/interactivity.test.tsx | 11 ++++-------
 src/compiler/declarations.ts                         |  5 +++++
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/__tests__/compiler/declarations.test.tsx b/src/__tests__/compiler/declarations.test.tsx
index c2e18378..1df970cd 100644
--- a/src/__tests__/compiler/declarations.test.tsx
+++ b/src/__tests__/compiler/declarations.test.tsx
@@ -12,6 +12,8 @@ const tests = [
   ["rotate: x 3deg;", [{ d: [[[{}, "rotateX", "3deg"], "rotateX"]], s: [1, 1] }]],
   ["stroke-width: 1px;", [{ d: [[1, ["strokeWidth"]]], s: [1, 1] }]],
   ["stroke: black;", [{ d: [["#000", ["stroke"]]], s: [1, 1] }]],
+  ["cursor: pointer;", [{ d: [{ cursor: "pointer" }], s: [1, 1] }]],
+  ["cursor: auto;", [{ d: [{ cursor: "auto" }], s: [1, 1] }]],
 ] as const;
 
 test.each(tests)("declarations for %s", (declarations, expected) => {
diff --git a/src/__tests__/vendor/tailwind/interactivity.test.tsx b/src/__tests__/vendor/tailwind/interactivity.test.tsx
index dd2082f6..a2c9a596 100644
--- a/src/__tests__/vendor/tailwind/interactivity.test.tsx
+++ b/src/__tests__/vendor/tailwind/interactivity.test.tsx
@@ -33,20 +33,17 @@ describe("Interactivity - Appearance", () => {
 describe("Interactivity - Cursor", () => {
   test("cursor-auto", async () => {
     expect(await renderCurrentTest()).toStrictEqual({
-      props: {},
-      warnings: { properties: ["cursor"] },
+      props: { style: { cursor: "auto" } },
     });
   });
   test("cursor-default", async () => {
     expect(await renderCurrentTest()).toStrictEqual({
-      props: {},
-      warnings: { properties: ["cursor"] },
+      props: { style: { cursor: "default" } },
     });
   });
-  test("cursor-default", async () => {
+  test("cursor-pointer", async () => {
     expect(await renderCurrentTest()).toStrictEqual({
-      props: {},
-      warnings: { properties: ["cursor"] },
+      props: { style: { cursor: "pointer" } },
     });
   });
 });
diff --git a/src/compiler/declarations.ts b/src/compiler/declarations.ts
index df9e6d18..f34a0bb9 100644
--- a/src/compiler/declarations.ts
+++ b/src/compiler/declarations.ts
@@ -157,6 +157,7 @@ const parsers: {
   "container": parseContainer,
   "container-name": parseContainerName,
   "container-type": parseContainerType,
+  "cursor": parseCursor,
   "display": parseDisplay,
   "direction": parseDirection,
   "fill": parseSVGPaint,
@@ -2536,6 +2537,10 @@ export function parseDimension(
   }
 }
 
+function parseCursor({ value }: DeclarationType<"cursor">) {
+  return value.keyword;
+}
+
 export function parseUserSelect(
   { value }: DeclarationType<"user-select">,
   builder: StylesheetBuilder,