fix: preserve start/end spacing properties

[khaled-hamam]

This pull request adds support for spacing utilities (paddingStart, paddingEnd, marginStart, marginEnd).

Previous behaviour was incorrectly replacing InlineStart and InlineEnd suffixes with HorizontalStart/VerticalStart, which isn't correct.

useResolveClassNames('ms-auto');
// result: {"marginHorizontalStart": "auto"}
// expected: {"marginStart": "auto"}

I added extra test cases to both padding and margin to make sure it resolves as expected without breaking the existing cases. Also tested it's working by applying a patch package to my app.

I tried to find any issues asking about this, but found none. Please let me know if this was intended for some reason, although I think this was missed by mistake.

Summary by CodeRabbit

• New Features

  • Enhanced CSS to React Native style conversion with improved handling of logical directional properties (start/end) for padding and margin spacing.

• Tests

  • Added test coverage validating start/end directional padding and margin properties convert correctly.

[coderabbitai]

📝 Walkthrough

Walkthrough

The RN processor's CSS-to-React Native transformation now normalizes logical directional tokens (InlineStart/InlineEnd) to physical directions (Start/End) for padding and margin properties. Accompanying test cases verify these transformations produce expected paddingStart, paddingEnd, marginStart, and marginEnd values.

Changes

Cohort / File(s)	Summary
Spacing Directional Token Normalization packages/uniwind/src/metro/processor/rn.ts	Extends cssToRN function to replace InlineStart/InlineEnd with Start/End before existing replacement operations for spacing-related properties.
Spacing Directional Property Tests packages/uniwind/tests/native/styles-parsing/spacing.test.tsx	Adds test assertions for padding and margin start/end properties (ps-1, pe-1, ms-1, me-1) verifying correct mapping to RN logical spacing properties.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

A rabbit hops with glee, so spry,
Start and end properties now apply!
Padding, margin, left and right,
Directional tokens shimmer bright. ✨

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'fix: preserve start/end spacing properties' accurately describes the main change: adding support for preserving start/end directional spacing properties (paddingStart, paddingEnd, marginStart, marginEnd) by fixing the transformation pipeline in the RN processor.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Merge Conflict Detection	✅ Passed	✅ No merge conflicts detected when merging into main

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

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

No actionable comments were generated in the recent review. 🎉

Tip

Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord.

---

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.}

[Copilot]

Pull request overview

This pull request fixes the transformation of CSS logical properties (padding-inline-start, padding-inline-end, margin-inline-start, margin-inline-end) to their React Native equivalents (paddingStart, paddingEnd, marginStart, marginEnd). Previously, these properties were incorrectly being transformed to non-existent properties like paddingHorizontalStart.

Changes:

• Added replacements for InlineStart → Start and InlineEnd → End before the general Inline → Horizontal replacement
• Added test cases for ps-1, pe-1, ms-1, and me-1 utilities to verify correct behavior

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File	Description
packages/uniwind/src/metro/processor/rn.ts	Added two new string replacements to handle InlineStart/InlineEnd before the general Inline replacement
packages/uniwind/tests/native/styles-parsing/spacing.test.tsx	Added test cases for padding-start, padding-end, margin-start, and margin-end utilities

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Brentlok]

Thanks for PR 🚀