Skip to content

feat: add cursor CSS property support#346

Open
adrianorocha-dev wants to merge 1 commit into
nativewind:mainfrom
adrianorocha-dev:feat/cursor-property
Open

feat: add cursor CSS property support#346
adrianorocha-dev wants to merge 1 commit into
nativewind:mainfrom
adrianorocha-dev:feat/cursor-property

Conversation

@adrianorocha-dev

@adrianorocha-dev adrianorocha-dev commented May 26, 2026

Copy link
Copy Markdown

Summary

Add compiler support for the CSS cursor property, enabling Tailwind classes like cursor-pointer, cursor-auto, and cursor-default to compile to the native cursor style prop.

This is targeted at react-native-macos and react-native-windows, which both support cursor as a native style property (via StyleSheet.create or inline styles). iOS and Android silently ignore the prop, so this change is safe cross-platform.

Currently, lightningcss parses cursor declarations correctly, but the compiler has no parser registered for it — the property is silently dropped with a warning. This PR fixes that.

Also fixes a duplicate cursor-default test in the Tailwind interactivity tests (replaced the second one with cursor-pointer).

Implementation

The parser extracts value.keyword from the lightningcss Cursor AST ({ images: CursorImage[], keyword: CursorKeyword }). Only the keyword is used — cursor images (e.g. cursor: url(...), pointer) are not handled since React Native does not support custom cursor images.

Similar to parseUserSelect and parsePointerEvents.

Test plan

  • Added compiler unit tests for cursor: pointer; and cursor: auto;
  • Updated Tailwind interactivity tests from expecting warnings to expecting style output
  • Fixed duplicate cursor-default test → cursor-pointer
  • All 1042 tests pass (yarn test)
  • Lint and typecheck pass (lefthook pre-commit)

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.
@danstepanov danstepanov added the deferred (post-5.0) Not required for the 5.0 latest release; revisit after label Jul 8, 2026
@danstepanov

Copy link
Copy Markdown
Member

Preemptive review to help triage for the 5.0 release, @marklawlor makes the final call.

Applies cleanly to current main and the implementation looks right, the keyword lands in the static declaration record which is exactly what the test asserts, and fixing the duplicate cursor default test name was a nice catch. v4 never supported cursor, so this is new functionality rather than an upgrade blocker. I'd slot it for the first 5.x minor after latest ships. Optional thought, core RN only accepts auto and pointer, so validating against an allowed list the way parseUserSelect does might be worth it, though unknown values are ignored natively so pass through is fine too.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

deferred (post-5.0) Not required for the 5.0 latest release; revisit after

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants