Skip to content

fix: map tint utilities to native props - #1839

Open
MarshallBear1 wants to merge 1 commit into
nativewind:mainfrom
MarshallBear1:codex/fix-tint-native-mapping
Open

MarshallBear1 wants to merge 1 commit into
nativewind:mainfrom
MarshallBear1:codex/fix-tint-native-mapping

Conversation

@MarshallBear1

Copy link
Copy Markdown

Summary

  • Replace the removed @prop directive in tint-* with @nativeMapping.
  • Use block syntax so Tailwind preserves the mapping while expanding the custom utility.
  • Add a regression test confirming tint-black reaches the top-level tint prop and leaves style empty.

Fixes #1837

Why

react-native-css 3 recognizes @nativeMapping, not the old @prop directive. Without the mapping, tint-black compiles to style.tint, which React Native ignores for the intended component prop. A statement-form unknown at-rule is also dropped during Tailwind utility expansion; the block form survives and compiles the color to the native tint path.

Test plan

  • Confirmed the new regression test fails before the fix with { style: { tint: "#000" } }.
  • yarn install --immutable
  • yarn lint
  • yarn typecheck
  • yarn build
  • yarn test --maxWorkers=2 --coverage (7 suites, 36 tests)
  • yarn example expo export --platform web
  • yarn pack --dry-run

Replace the removed @prop directive with a block-form @nativeMapping that Tailwind preserves during utility expansion. Add a regression test confirming tint-black reaches the top-level tint prop instead of style.\n\nFixes nativewind#1837
@danstepanov danstepanov added the deferred (post-5.0) Not required for the 5.0 latest release; revisit after label Jul 15, 2026

This branch has not been deployed

No deployments
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.

tint-* is broken on main: theme.css still uses @prop, which react-native-css renamed to @nativeMapping

2 participants