feat: support rtl safe area classes

[Brentlok]

#587

Summary by CodeRabbit

• New Features

  • Added safe-area utilities for logical start/end directions across margin, padding, and positioning.
  • These utilities now adapt to left-to-right and right-to-left layouts automatically.
  • Added support for horizontal safe-area insets on both sides.

• Bug Fixes

  • Improved inset handling so horizontal safe-area values are applied consistently in tests and runtime behavior.

• Documentation

  • Updated safe-area utility reference tables to include the new logical variants.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 06eb444f-1563-468d-a627-97d1686c66a3

📥 Commits

Reviewing files that changed from the base of the PR and between a394051 and 5a3e1c0.

📒 Files selected for processing (7)

• packages/uniwind/src/bundler/artifacts/css/insets.ts
• packages/uniwind/src/bundler/css-processor/rn.ts
• packages/uniwind/tests/consts.ts
• packages/uniwind/tests/native/styles-parsing/safe-area.test.tsx
• packages/uniwind/tests/setup.native.ts
• packages/uniwind/uniwind.css
• skills/uniwind/references/variants-and-selectors.md

---

📝 Walkthrough

Walkthrough

Added logical safe-area utilities for margin, padding, and positioning, with RTL-aware CSS generation, RN inset property translation, and updated native test coverage. The safe-area reference tables now include the new logical variants.

Changes

Logical safe-area utilities

Layer / File(s)	Summary
Generate logical safe-area utilities packages/uniwind/src/bundler/artifacts/css/insets.ts, packages/uniwind/uniwind.css, skills/uniwind/references/variants-and-selectors.md	Adds logical start/end safe-area utility generation for margin, padding, and positioning, and updates the reference tables for the new variants.
Map inset properties in RN packages/uniwind/src/bundler/css-processor/rn.ts	Adds inset* property translation for logical start/end names in cssToRN.
Update native safe-area fixtures packages/uniwind/tests/consts.ts, packages/uniwind/tests/setup.native.ts, packages/uniwind/tests/native/styles-parsing/safe-area.test.tsx	Expands native inset constants, setup values, and parsing assertions to cover horizontal and logical safe-area cases.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Suggested reviewers

• jpudysz

Poem

🐰 I hopped through safe-area lanes tonight,
start and end now dance just right.
In LTR and RTL I grin,
with padding, margin, inset in!

🚥 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 title clearly summarizes the main change: adding RTL safe-area class support.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ 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 feat/support-rtl-safe-area

---

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

[greptile-apps]

Greptile Summary

This PR adds RTL-aware logical safe area CSS utility classes (ms-safe, me-safe, ps-safe, pe-safe, start-safe, end-safe) for margin, padding, and inset, along with their -or-* and -offset-* variants. The generator in insets.ts is extended with a logicalSides loop that emits @variant rtl blocks swapping env(safe-area-inset-left) and env(safe-area-inset-right), and the RN CSS processor is updated to map inset-inline-start/inset-inline-end to the React Native start/end style properties.

• Adds 18 new CSS utility classes (3 safe-area types × 2 logical sides × 3 property types) to insets.ts and the generated uniwind.css, using @variant rtl to swap physical inset env values.
• Updates the RN CSS processor to recognise inset-inline-start → start and inset-inline-end → end, and updates the mock setup to supply non-zero left/right inset values so all four sides of p-safe/inset-safe are now verified.
• Adds a new test that exercises all six logical utilities under both LTR and RTL LayoutDirection, covering all three safe-area variant types.

Confidence Score: 5/5

Safe to merge — the new logical safe area utilities are correctly generated, the RN property mapping is accurate, and the tests use asymmetric left/right inset values that would catch any swap in the LTR/RTL logic.

The generator, the RN processor, the CSS output, and the tests are all internally consistent. The logical inset resolution (start→left in LTR, start→right in RTL) is correct, the RTL variant blocks in the CSS swap env values as expected, and the explicit insetInlineStart/insetInlineEnd checks in rn.ts prevent any ambiguity with other inset-bearing property names.

No files require special attention.

Important Files Changed

Filename	Overview
packages/uniwind/src/bundler/artifacts/css/insets.ts	Adds logicalSides loop that generates RTL-aware @Utility blocks for margin/padding/inset inline-start/end; utility names, CSS properties, and inset resolution logic are all correct.
packages/uniwind/src/bundler/css-processor/rn.ts	Inserts inset-inline-start/end → start/end mapping ahead of the border branch; explicit checks for both camelCase forms ensure correct React Native property names.
packages/uniwind/tests/native/styles-parsing/safe-area.test.tsx	New test covers all six logical utilities under LTR and RTL with three safe-area types; expected values are arithmetically consistent with the mocked inset constants.
packages/uniwind/tests/setup.native.ts	Updates left/right inset mocks from 0 to non-zero constants so all four sides of p-safe and inset-safe are now meaningfully exercised.
packages/uniwind/uniwind.css	Adds 18 new utility blocks; CSS matches what the generator in insets.ts produces; RTL variant blocks correctly swap left/right env values for every safe-area type.
skills/uniwind/references/variants-and-selectors.md	Docs table updated for all three categories (padding, margin, positioning) with new logical start/end entries; consistent with existing table format.
packages/uniwind/tests/consts.ts	Adds SAFE_AREA_INSET_LEFT=7 and SAFE_AREA_INSET_RIGHT=13 with intentionally asymmetric values to make LTR vs RTL assertions distinguishable.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A["insets.ts generateCSSForInsets()"] --> B["logicalSides loop ['start', 'end']"]
    B --> C["getLogicalStyleProperty() margin/padding/inset-inline-start/end"]
    B --> D["getLogicalInset() start→left(LTR)/right(RTL), end→right(LTR)/left(RTL)"]
    B --> E["getLogicalUtilityName() ms- / me- / ps- / pe- / start- / end-"]
    C & D --> F["getStylesForSafeAreaType() safe / safe-or-* / safe-offset-*"]
    F --> G["Emit @utility block LTR styles + @variant rtl block"]
    G --> H["uniwind.css 18 new utilities"]
    H --> I["Web: margin-inline-start etc."]
    H --> J["RN CSS Processor rn.ts cssToRN()"]
    J --> K{contains 'inset'?}
    K -- insetInlineStart --> L["→ 'start'"]
    K -- insetInlineEnd --> M["→ 'end'"]
    J --> N{contains 'padding'/'margin'?}
    N -- InlineStart --> O["→ paddingStart / marginStart"]
    N -- InlineEnd --> P["→ paddingEnd / marginEnd"]
    L & M & O & P --> Q["React Native StyleSheet"]

Loading

%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
flowchart TD
    A["insets.ts generateCSSForInsets()"] --> B["logicalSides loop ['start', 'end']"]
    B --> C["getLogicalStyleProperty() margin/padding/inset-inline-start/end"]
    B --> D["getLogicalInset() start→left(LTR)/right(RTL), end→right(LTR)/left(RTL)"]
    B --> E["getLogicalUtilityName() ms- / me- / ps- / pe- / start- / end-"]
    C & D --> F["getStylesForSafeAreaType() safe / safe-or-* / safe-offset-*"]
    F --> G["Emit @utility block LTR styles + @variant rtl block"]
    G --> H["uniwind.css 18 new utilities"]
    H --> I["Web: margin-inline-start etc."]
    H --> J["RN CSS Processor rn.ts cssToRN()"]
    J --> K{contains 'inset'?}
    K -- insetInlineStart --> L["→ 'start'"]
    K -- insetInlineEnd --> M["→ 'end'"]
    J --> N{contains 'padding'/'margin'?}
    N -- InlineStart --> O["→ paddingStart / marginStart"]
    N -- InlineEnd --> P["→ paddingEnd / marginEnd"]
    L & M & O & P --> Q["React Native StyleSheet"]

Loading

_{Reviews (1): Last reviewed commit: "feat: support rtl safe area classes" | Re-trigger Greptile}