feat: parse inline-start inline-end border to RN

[Brentlok]

fixes #511

Summary by CodeRabbit

Release Notes

• New Features

  • Added support for border-s-* (start) and border-e-* (end) directional border properties with customizable colors and widths
  • Included UI examples demonstrating start and end border styling variants

• Tests

  • Added test coverage for directional border property parsing

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR adds support for inline-start/inline-end border properties (border-s and border-e) by extending the Metro CSS-to-React Native processor to map these border property names from InlineStart/InlineEnd to Start/End format. The change includes UI examples and comprehensive test coverage.

Changes

Cohort / File(s)	Summary
Core Border Property Processing packages/uniwind/src/metro/processor/rn.ts	Added conditional logic to rewrite border-related inline-start/inline-end property names to start/end format, extending the existing pattern previously applied only to padding and margin properties.
Test Coverage packages/uniwind/tests/native/styles-parsing/borders.test.tsx	Added new Jest test case validating inline border parsing for border-s-2, border-e-4, border-e-red-500, and rounded-s-2xl class names with expected React Native property mappings.
UI Examples apps/expo-example/App.tsx	Added two visual examples in the Borders block demonstrating start-style border (border-s-4 border-orange-500) and end-style border (border-e-4 border-violet-500).

Possibly related PRs

• fix: preserve start/end spacing properties #383: Modifies the same cssToRN conversion pipeline to map padding/margin inline properties to start/end format; this PR extends that same transformation pattern to border properties.
• fix: join borderWidth styles if duplicated #285: Also modifies the cssToRN pipeline in the Metro processor, though it focuses on borderWidth style joining rather than inline property name rewriting.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 A border-start, a border-end,
Through left and right, they gently blend,
RTL dances, LTR flows free,
Start-to-end, as borders should be!
Hopping forward, boundaries bright,
Uniwind's borders, perfectly right! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title accurately summarizes the main change: adding support for parsing inline-start/inline-end border utilities to React Native properties.
Linked Issues check	✅ Passed	The PR implements parsing of border-s and border-e utilities to React Native properties, directly addressing the reported issue #511 where these utilities were not working.
Out of Scope Changes check	✅ Passed	All changes are scoped to support inline-start/inline-end border parsing: UI examples, property conversion logic, and tests—all directly related to the issue requirements.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch support-start-end-border

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

packages/uniwind/src/metro/processor/rn.ts (1)

189-205: Optional: consolidate the shared InlineStart/InlineEnd rewrites.

The padding/margin and border branches both perform the identical InlineStart→Start / InlineEnd→End substitutions. You could lift those two replaces out so the branches only carry their unique parts, which keeps future logical-property additions in one place.

♻️ Suggested consolidation

                 x => {
+                    if (x.includes('padding') || x.includes('margin') || x.includes('border')) {
+                        x = x
+                            .replace('InlineStart', 'Start')
+                            .replace('InlineEnd', 'End')
+                    }
+
                     if (x.includes('padding') || x.includes('margin')) {
                         return x
-                            .replace('InlineStart', 'Start')
-                            .replace('InlineEnd', 'End')
                             .replace('Inline', 'Horizontal')
                             .replace('Block', 'Vertical')
                     }

-                    if (x.includes('border')) {
-                        return x
-                            .replace('InlineStart', 'Start')
-                            .replace('InlineEnd', 'End')
-                    }
-
                     return x
                 },

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/uniwind/src/metro/processor/rn.ts` around lines 189 - 205, The two
branches inside the arrow function handling x (the mapper passed to the
processor) duplicate the InlineStart→Start and InlineEnd→End replacements;
refactor by first applying x =
x.replace('InlineStart','Start').replace('InlineEnd','End') (or assign to a temp
like normalized = x.replace(...)) and then keep the padding/margin branch to
apply .replace('Inline','Horizontal').replace('Block','Vertical') and the border
branch to do nothing extra (or only the border-specific transforms), returning
the transformed value; update the arrow function that checks
x.includes('padding') || x.includes('margin') and x.includes('border') to use
the normalized value to avoid duplicate replace calls.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@packages/uniwind/src/metro/processor/rn.ts`:
- Around line 189-205: The two branches inside the arrow function handling x
(the mapper passed to the processor) duplicate the InlineStart→Start and
InlineEnd→End replacements; refactor by first applying x =
x.replace('InlineStart','Start').replace('InlineEnd','End') (or assign to a temp
like normalized = x.replace(...)) and then keep the padding/margin branch to
apply .replace('Inline','Horizontal').replace('Block','Vertical') and the border
branch to do nothing extra (or only the border-specific transforms), returning
the transformed value; update the arrow function that checks
x.includes('padding') || x.includes('margin') and x.includes('border') to use
the normalized value to avoid duplicate replace calls.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 8753d937-6cf7-4c94-976a-3bc3542b7e73

📥 Commits

Reviewing files that changed from the base of the PR and between 5d1c5ba and 2c19a05.

📒 Files selected for processing (3)

• apps/expo-example/App.tsx
• packages/uniwind/src/metro/processor/rn.ts
• packages/uniwind/tests/native/styles-parsing/borders.test.tsx

[github-actions]

🚀 This pull request is included in v1.6.4. See Release v1.6.4 for release notes.