Skip to content

fix: emit React Native border-start/end props for border-inline styles#379

Open
danstepanov wants to merge 1 commit into
mainfrom
fix-logical-border-props
Open

fix: emit React Native border-start/end props for border-inline styles#379
danstepanov wants to merge 1 commit into
mainfrom
fix-logical-border-props

Conversation

@danstepanov

Copy link
Copy Markdown
Member

Closes #378, follow up to nativewind/nativewind#1737.

What

border-inline-start-color, border-inline-end-color, and the width and shorthand variants compiled to props like borderInlineStartColor that React Native does not have, so every border-s-* and border-e-* utility (and border-x-, which Tailwind v4 also emits as border-inline-) was a silent no-op on native.

  • Renames the inline logical border color and width properties to RN's RTL aware border-start-* and border-end-* props, in both the parsed path and the unparsed path that var() based colors take (the original Custom colors on border-s-* and border-e-* don't work nativewind#1737 report).
  • Fixes the border-inline, border-inline-start, and border-inline-end shorthands to emit those props, and fixes border-inline-width which previously only read the start value.
  • Drops per-side border styles since RN only has a uniform borderStyle. solid is dropped silently because it matches the native default; anything else records a compiler warning.
  • Dev builds now print compiler warnings from the metro transformer, so declarations without a native equivalent are visible while building instead of being collected and discarded.

Tests

  • New src/tests/compiler/logical-borders.test.ts covering colors (literal and var()), widths, shorthands, and the style drop and warning behavior.
  • Updated borders.test.tsx expectations, which previously locked in the invalid borderInline* prop names.
  • Full suite, typecheck, and lint pass locally. The three babel suites fail identically on clean main (missing --experimental-vm-modules in this environment) and are unrelated.

border-inline-start-color and friends compiled to props like
borderInlineStartColor that React Native does not support, so every
border-s-* and border-e-* utility was a silent no-op on native. Rename
them to the RTL-aware border-start-* and border-end-* props in both the
parsed and unparsed paths, fix the border-inline shorthands, and drop
per-side border styles (with a compiler warning when the style is not
solid, since solid matches the native default).

Dev builds now print compiler warnings from the metro transformer so
declarations without a native equivalent are visible while building.

Closes #378
@danstepanov danstepanov added the v5 stability Tracking v5 stability for @latest release label Jul 17, 2026
@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
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.

border-s-* and border-e-* compile to style props React Native does not support

1 participant