Skip to content

feat: add caret-* utility for cursorColor#1827

Open
patrickwehbe wants to merge 1 commit into
nativewind:mainfrom
patrickwehbe:patrickwehbe/caret-cursor-color
Open

feat: add caret-* utility for cursorColor#1827
patrickwehbe wants to merge 1 commit into
nativewind:mainfrom
patrickwehbe:patrickwehbe/caret-cursor-color

Conversation

@patrickwehbe

Copy link
Copy Markdown

What

Adds a caret-* color utility so caret-black, caret-red-500, etc. set the cursorColor prop on TextInput again.

Closes #1756

Why

In v4, Nativewind mapped caret-* to the cursorColor prop. v5 dropped that mapping and it was not listed in the migration guide as an intentional removal, so the utilities silently stopped working.

How

@utility caret-* {
  caret-color: --value(--color-*);
}

react-native-css already maps the standard CSS caret-color property to the cursorColor prop (see the default mapping in parsePropAtRule, compiler/atRules.js), so emitting caret-color restores the v4 behavior cleanly. I placed it next to the existing tint-* utility to keep the RN-specific color utilities together.

A note on approach: the issue suggested wiring this up with @prop. I tried the form that mirrors tint-* (-rn-cursor: --value(--color-*); @prop -rn-cursor cursorColor;), but because caret-color -> cursorColor is already a built-in mapping, the custom -rn-cursor declaration also leaked through as a cursor entry in style, producing a duplicate value. Using the standard caret-color property goes through the same mapping mechanism without the leak. Happy to switch to an explicit @prop mapping if you prefer that style.

Test

Added src/__tests__/caret.tsx, following the existing test conventions:

test("caret-black", async () => {
  expect(await renderCurrentTest()).toStrictEqual({
    props: {
      cursorColor: "#000",
      style: {},
    },
  });
});

Full suite is green locally (yarn jest: 8 suites, 36 tests passing). yarn typecheck passes.

v4 mapped caret-* color utilities to the cursorColor prop on TextInput.
v5 dropped this mapping and it was not noted in the migration guide, so
caret-black and friends no longer set the cursor color.

Add a caret-* utility to theme.css that emits the standard caret-color
property. react-native-css already maps caret-color to the cursorColor
prop, so this restores the v4 behavior. Placed next to the tint-* utility
to keep the RN-specific color utilities together.

Closes nativewind#1756
@danstepanov

Copy link
Copy Markdown
Member

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

Nice tracing, but the mapping you found is exactly why this isn't needed. Tailwind v4 core already ships caret utilities that emit caret-color, and react-native-css converts that to cursorColor through its built in prop mapping. I compiled caret-black through the current main pipeline without this change and it already produces cursorColor, so the new @Utility duplicates the declaration and the test passes without the theme.css change. The premise of #1756 was stale, my fault since I filed it. A test only PR would still be welcome since Nativewind itself has no caret regression test.

@danstepanov
danstepanov requested a review from marklawlor July 9, 2026 02:12
@danstepanov danstepanov added the v5 stability Tracking v5 stability for @latest release label Jul 15, 2026
@danstepanov danstepanov self-assigned this Jul 15, 2026
@danstepanov

Copy link
Copy Markdown
Member

@patrickwehbe following up since I haven't heard back, I checked main and your test passes without your changes to ttheme.css. Your test is meaningful so if you can drop everything but that, then I'll go ahead and approve this. Otherwise, I'll close as stale in a couple days and add the test myself.

@danstepanov
danstepanov requested review from danstepanov and removed request for marklawlor July 17, 2026 04:14
@danstepanov danstepanov added deferred (post-5.0) Not required for the 5.0 latest release; revisit after and removed v5 stability Tracking v5 stability for @latest release labels Jul 17, 2026

@danstepanov danstepanov left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

remove everything but the test

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.

v5: Add caret-* utility for cursorColor prop mapping

2 participants