feat: add native RtL css support

Author: XavierDefontaine

src/__tests__/boxModel.js

@@ -15,6 +15,19 @@ it('transforms margin, padding with 1 value', () => {
   })
 })
 
+// RTL
+it('transforms margin-inline-start with marginStart', () => {
+  expect(transformCss([['margin-inline-start', '1px']])).toEqual({
+    marginStart: 1,
+  })
+})
+
+it('transforms start with start', () => {
+  expect(transformCss([['start', '1px']])).toEqual({
+    start: 1,
+  })
+})
+
 it('transforms margin, padding with 2 values', () => {
   expect(transformCss([['margin', '1px 2px']])).toEqual({
     marginTop: 1,
@@ -117,6 +130,8 @@ it('transforms margin shorthand with auto', () => {
   })
 })
 
+
+
 it('transforms border width', () => {
   expect(transformCss([['border-width', '1px 2px 3px 4px']])).toEqual({
     borderTopWidth: 1,

src/index.js

@@ -52,12 +52,12 @@ const transformShorthandValue =
   process.env.NODE_ENV === 'production'
     ? baseTransformShorthandValue
     : (propName, value) => {
-        try {
-          return baseTransformShorthandValue(propName, value)
-        } catch (e) {
-          throw new Error(`Failed to parse declaration "${propName}: ${value}"`)
-        }
+      try {
+        return baseTransformShorthandValue(propName, value)
+      } catch (e) {
+        throw new Error(`Failed to parse declaration "${propName}: ${value}"`)
       }
+    }
 
 export const getStylesForProperty = (propName, inputValue, allowShorthand) => {
   const isRawValue = allowShorthand === false || !(propName in transforms)
@@ -70,12 +70,21 @@ export const getStylesForProperty = (propName, inputValue, allowShorthand) => {
   return propValues
 }
 
+const cssRtLToNativeCamelized = {
+  "margin-inline-start": "marginStart",
+  "margin-inline-end": "marginEnd",
+  "padding-inline-start": "paddingStart",
+  "padding-inline-end": "paddingEnd",
+  "inset-inline-start": "start",
+  "inset-inline-end": "end"
+}
+
 export const getPropertyName = propName => {
   const isCustomProp = /^--\w+/.test(propName)
   if (isCustomProp) {
     return propName
   }
-  return camelizeStyleName(propName)
+  return cssRtLToNativeCamelized[propName] || camelizeStyleName(propName)
 }
 
 export default (rules, shorthandBlacklist = []) =>