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

Author: Brentlok

apps/expo-example/App.tsx

@@ -231,6 +231,12 @@ const TailwindTestPage = () => {
                     <View className="border-l-4 border-yellow-500 p-4 mb-4">
                         <Text>border-l-4 border-yellow-500</Text>
                     </View>
+                    <View className="border-s-4 border-orange-500 p-4 mb-4">
+                        <Text>border-s-4 border-orange-500</Text>
+                    </View>
+                    <View className="border-e-4 border-violet-500 p-4 mb-4">
+                        <Text>border-e-4 border-violet-500</Text>
+                    </View>
                 </View>
 
                 <View className="bg-white p-4 rounded-lg mb-4">

packages/uniwind/src/metro/processor/rn.ts

@@ -195,6 +195,12 @@ export class RN {
                             .replace('Block', 'Vertical')
                     }
 
+                    if (x.includes('border')) {
+                        return x
+                            .replace('InlineStart', 'Start')
+                            .replace('InlineEnd', 'End')
+                    }
+
                     return x
                 },
             )

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

@@ -140,6 +140,22 @@ describe('Borders', () => {
         expect(getStylesFromId('border-dashed').borderStyle).toBe('dashed')
         expect(getStylesFromId('border-dotted').borderStyle).toBe('dotted')
     })
+
+    test('Inline border', () => {
+        const { getStylesFromId } = renderUniwind(
+            <React.Fragment>
+                <View className="border-s-2" testID="border-s-2" />
+                <View className="border-e-4" testID="border-e-4" />
+                <View className="border-e-red-500" testID="border-e-red-500" />
+                <View className="rounded-s-2xl" testID="rounded-s-2xl" />
+            </React.Fragment>,
+        )
+
+        expect(getStylesFromId('border-s-2').borderStartWidth).toBe(2)
+        expect(getStylesFromId('border-e-4').borderEndWidth).toBe(4)
+        expect(getStylesFromId('border-e-red-500').borderEndColor).toBe(TW_RED_500)
+        expect(getStylesFromId('rounded-s-2xl').borderStartStartRadius).toBe(16)
+    })
 })
 
 describe('Outline', () => {