feat: add caret-* utility for cursorColor#1827
Conversation
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
|
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. |
|
@patrickwehbe following up since I haven't heard back, I checked |
danstepanov
left a comment
There was a problem hiding this comment.
remove everything but the test
What
Adds a
caret-*color utility socaret-black,caret-red-500, etc. set thecursorColorprop onTextInputagain.Closes #1756
Why
In v4, Nativewind mapped
caret-*to thecursorColorprop. v5 dropped that mapping and it was not listed in the migration guide as an intentional removal, so the utilities silently stopped working.How
react-native-css already maps the standard CSS
caret-colorproperty to thecursorColorprop (see the default mapping inparsePropAtRule,compiler/atRules.js), so emittingcaret-colorrestores the v4 behavior cleanly. I placed it next to the existingtint-*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 mirrorstint-*(-rn-cursor: --value(--color-*); @prop -rn-cursor cursorColor;), but becausecaret-color -> cursorColoris already a built-in mapping, the custom-rn-cursordeclaration also leaked through as acursorentry instyle, producing a duplicate value. Using the standardcaret-colorproperty goes through the same mapping mechanism without the leak. Happy to switch to an explicit@propmapping if you prefer that style.Test
Added
src/__tests__/caret.tsx, following the existing test conventions:Full suite is green locally (
yarn jest: 8 suites, 36 tests passing).yarn typecheckpasses.