feat: inline rtl support (#574)

* feat: inline rtl support

* chore: exclude inherit dir

Author: Brentlok

packages/uniwind/src/bundler/css-processor/processor.ts

@@ -1,4 +1,5 @@
 import { UNIWIND_PLATFORM_VARIABLES, UNIWIND_THEME_VARIABLES } from '@/common/consts'
+import { isDefined } from '@/common/utils'
 import type { Declaration, MediaQuery, Rule } from 'lightningcss'
 import { transform } from 'lightningcss'
 import type { UniwindBundlerConfig } from '../config'
@@ -195,7 +196,7 @@ export class ProcessorBuilder {
                     }
                 })
 
-                if ([rtl, theme, active, focus, disabled, dataAttributes].some(Boolean)) {
+                if ([rtl, theme, active, focus, disabled, dataAttributes].some(isDefined)) {
                     this.declarationConfig.rtl ??= rtl
                     this.declarationConfig.theme ??= theme
                     this.declarationConfig.active ??= active

packages/uniwind/src/core/native/store.ts

@@ -1,4 +1,5 @@
-import { Dimensions, Platform } from 'react-native'
+import type { ViewStyle } from 'react-native'
+import { Dimensions, Platform, StyleSheet } from 'react-native'
 import { Orientation, Platform as UniwindPlatform, StyleDependency, UNIWIND_PLATFORM_VARIABLES, UNIWIND_THEME_VARIABLES } from '../../common/consts'
 import { UniwindListener } from '../listener'
 import type { ComponentState, GenerateStyleSheetsCallback, RNStyle, Style, StyleSheets, ThemeName, UniwindContextType, Var, Vars } from '../types'
@@ -133,7 +134,7 @@ class UniwindStoreBuilder {
                     || style.maxWidth < this.runtime.screen.width
                     || (style.theme !== null && theme !== style.theme)
                     || (style.orientation !== null && this.runtime.orientation !== style.orientation)
-                    || (style.rtl !== null && this.runtime.rtl !== style.rtl)
+                    || (style.rtl !== null && !this.validateDir(style.rtl, componentProps))
                     || (style.active !== null && state?.isPressed !== style.active)
                     || (style.focus !== null && state?.isFocused !== style.focus)
                     || (style.disabled !== null && state?.isDisabled !== style.disabled)
@@ -250,6 +251,18 @@ class UniwindStoreBuilder {
         return true
     }
 
+    private validateDir(rtl: boolean, props: Record<string, any> = {}) {
+        const inlineDir = 'style' in props ? (StyleSheet.flatten(props.style) as ViewStyle)?.direction : undefined
+
+        if (inlineDir !== undefined && inlineDir !== 'inherit') {
+            const isInlineRtl = inlineDir === 'rtl'
+
+            return isInlineRtl === rtl
+        }
+
+        return rtl === this.runtime.rtl
+    }
+
     private getCurrentPlatform() {
         const platform = Platform.OS
 

packages/uniwind/tests/native/styles-parsing/dir.test.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react'
+import { I18nManager } from 'react-native'
+import View from '../../../src/components/native/View'
+import { UniwindStore } from '../../../src/core/native'
+import { TW_RED_500 } from '../../consts'
+import { renderUniwind } from '../utils'
+
+describe('Dir', () => {
+    const mockRTL = (isRTL: boolean) => {
+        jest.replaceProperty(I18nManager, 'isRTL', isRTL)
+        UniwindStore.runtime.rtl = I18nManager.isRTL
+    }
+
+    afterEach(() => {
+        jest.restoreAllMocks()
+    })
+
+    test('RTL global', () => {
+        mockRTL(true)
+
+        const { getStylesFromId } = renderUniwind(
+            <React.Fragment>
+                <View className="rtl:bg-red-500 bg-blue-500" testID="rtl-red" />
+            </React.Fragment>,
+        )
+
+        expect(getStylesFromId('rtl-red').backgroundColor).toBe(TW_RED_500)
+    })
+
+    test('LTR global', () => {
+        mockRTL(false)
+
+        const { getStylesFromId } = renderUniwind(
+            <React.Fragment>
+                <View className="ltr:bg-red-500 bg-blue-500" testID="ltr-red" />
+            </React.Fragment>,
+        )
+
+        expect(getStylesFromId('ltr-red').backgroundColor).toBe(TW_RED_500)
+    })
+
+    test('inline RTL', () => {
+        mockRTL(false)
+
+        const { getStylesFromId } = renderUniwind(
+            <React.Fragment>
+                <View className="rtl:bg-red-500 bg-blue-500" testID="rtl-red" style={{ direction: 'rtl' }} />
+            </React.Fragment>,
+        )
+
+        expect(getStylesFromId('rtl-red').backgroundColor).toBe(TW_RED_500)
+    })
+
+    test('inline LTR', () => {
+        mockRTL(true)
+
+        const { getStylesFromId } = renderUniwind(
+            <React.Fragment>
+                <View className="ltr:bg-red-500 bg-blue-500" testID="ltr-red" style={{ direction: 'ltr' }} />
+            </React.Fragment>,
+        )
+
+        expect(getStylesFromId('ltr-red').backgroundColor).toBe(TW_RED_500)
+    })
+})

packages/uniwind/tests/setup.native.ts

@@ -27,3 +27,9 @@ beforeAll(async () => {
     `,
     )
 })
+
+afterEach(() => {
+    const { UniwindStore } = require('../src/core/native')
+
+    UniwindStore.cache = Object.fromEntries(Object.keys(UniwindStore.cache).map(theme => [theme, new Map()]))
+})