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
Copy link
Copy Markdown

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

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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant