Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

feat: inline rtl support#574

Merged
Brentlok merged 2 commits into
main from
inline-rtl-support
Jun 10, 2026
Merged

feat: inline rtl support #574
Brentlok merged 2 commits into
main from
inline-rtl-support

Conversation

@Brentlok

@Brentlok Brentlok commented Jun 10, 2026
edited by coderabbitai Bot
Loading

Copy link
Copy Markdown
Contributor

fix #573

Summary by CodeRabbit

  • Bug Fixes
    • Improved directional styling: inline direction now correctly influences RTL/LTR rules and explicit (false) direction values are respected alongside global settings.
  • Tests
    • Added tests for directional styling scenarios covering both global prefixes and inline direction.
    • Updated test setup to ensure cache isolation between tests.

istarkov reacted with heart emoji

coderabbitai Bot commented Jun 10, 2026
edited
Loading

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

i️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 2500345f-1917-4aff-918e-d7ade3a55df6

📥 Commits

Reviewing files that changed from the base of the PR and between 8929755 and e6642cb.

📒 Files selected for processing (1)
  • packages/uniwind/src/core/native/store.ts
🚧 Files skipped from review as they are similar to previous changes (1)
  • packages/uniwind/src/core/native/store.ts

📝 Walkthrough

Walkthrough

RTL variant now supports subtree-scoped direction overrides via inline style.direction. The processor uses isDefined to detect selector conditions; the native store validates inline directions with validateDir; tests add cache reset and cover global and inline direction scenarios.

Changes

Subtree-scoped RTL variant support

Layer / File(s) Summary
Selector condition detection with defined values
packages/uniwind/src/bundler/css-processor/processor.ts
Imports isDefined and replaces some(Boolean) with some(isDefined) so falsy-but-defined selector values (e.g., rtl = false) are treated as present when building declarationConfig.
Store inline direction validation
packages/uniwind/src/core/native/store.ts
Adds StyleSheet and ViewStyle imports and introduces validateDir(rtl, props) which reads props.style.direction (when defined and not 'inherit') to decide RTL applicability, otherwise falls back to runtime.rtl.
Test coverage for inline direction and cache isolation
packages/uniwind/tests/native/styles-parsing/dir.test.tsx, packages/uniwind/tests/setup.native.ts
Adds Dir test suite that mocks I18nManager.isRTL and UniwindStore.runtime.rtl to cover global and inline direction cases; test setup adds afterEach to reset UniwindStore.cache per test.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Suggested reviewers

  • jpudysz

Poem

🐰 A rabbit hops through styles so fine,
Where direction blooms, left meets right—
Inline rules whisper to subtree lines,
Global state nods, and tests shine bright,
Subtrees dance in their own light. ✨

🚥 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 'feat: inline rtl support' clearly and concisely summarizes the main change—enabling RTL style variants to work based on inline direction props rather than globally.
Linked Issues check ✅ Passed Changes implement subtree-scoped RTL support via inline style.direction, matching issue #573 requirements: validateDir() checks inline direction, selector conditions use isDefined instead of Boolean, and tests verify rtl:/ltr: variants work with inline direction.
Out of Scope Changes check ✅ Passed All changes directly support the core objective: processor.ts refines selector condition logic, store.ts adds inline direction validation, tests verify the feature, and setup.ts enables proper cache isolation for reliable testing.
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 inline-rtl-support

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

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

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
packages/uniwind/src/core/native/store.ts (1)

254-264: 💤 Low value

Consider handling direction: 'inherit' explicitly.

The current implementation treats direction: 'inherit' as LTR (since 'inherit' !== 'rtl'). In React Native, 'inherit' means the component should inherit direction from its parent, which would ultimately resolve to the global RTL setting. For consistency, you might want to fall back to this.runtime.rtl when inlineDir === 'inherit', similar to how undefined is handled.

♻️ Optional enhancement for inherit handling
 private validateDir(rtl: boolean, props: Record<string, any> = {}) {
 const inlineDir = 'style' in props ? (StyleSheet.flatten(props.style) as ViewStyle)?.direction : undefined
- if (inlineDir !== undefined) {
+ if (inlineDir !== undefined && inlineDir !== 'inherit') {
 const isInlineRtl = inlineDir === 'rtl'
 return isInlineRtl === rtl
 }
 return rtl === this.runtime.rtl
 }
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/uniwind/src/core/native/store.ts` around lines 254 - 264, The
validateDir method currently treats inlineDir==='inherit' as not-RTL; update
validateDir (which reads inlineDir from props.style via StyleSheet.flatten) to
treat 'inherit' like undefined by falling back to this.runtime.rtl: if inlineDir
=== 'inherit' then resolve using this.runtime.rtl (so isInlineRtl is computed
from runtime.rtl), otherwise keep existing inlineDir === 'rtl' behavior; adjust
the return logic in validateDir to handle the 'inherit' case explicitly.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@packages/uniwind/src/core/native/store.ts`:
- Around line 254-264: The validateDir method currently treats
inlineDir==='inherit' as not-RTL; update validateDir (which reads inlineDir from
props.style via StyleSheet.flatten) to treat 'inherit' like undefined by falling
back to this.runtime.rtl: if inlineDir === 'inherit' then resolve using
this.runtime.rtl (so isInlineRtl is computed from runtime.rtl), otherwise keep
existing inlineDir === 'rtl' behavior; adjust the return logic in validateDir to
handle the 'inherit' case explicitly.

i️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 11c26498-7fb0-4858-9fa0-c5b4f70f47ce

📥 Commits

Reviewing files that changed from the base of the PR and between 86e0048 and 8929755.

📒 Files selected for processing (4)
  • packages/uniwind/src/bundler/css-processor/processor.ts
  • packages/uniwind/src/core/native/store.ts
  • packages/uniwind/tests/native/styles-parsing/dir.test.tsx
  • packages/uniwind/tests/setup.native.ts

@Brentlok Brentlok merged commit 3091d35 into main Jun 10, 2026
2 checks passed
@Brentlok Brentlok deleted the inline-rtl-support branch June 10, 2026 09:34

istarkov commented Jun 10, 2026
edited
Loading

Copy link
Copy Markdown

@Brentlok I haven't checked much but on my POV it probably doesn't fix my issue

// See direction is somwhere above the tree
<View style={{ direction: "rtl" }}> 
 {/* rtl should work on this node*/}
 <View className="bg-blue-500 rtl:bg-red-500" />
</View>

but all test examples in the PR are using direct style on current node

Copy link
Copy Markdown

Here are #576 failing tests

Copy link
Copy Markdown
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@coderabbitai coderabbitai[bot] coderabbitai[bot] left review comments

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Support subtree direction for the rtl: variant (currently resolved globally)

AltStyle によって変換されたページ (->オリジナル) /