[change] W3C logical styles support

* Support logical styles like 'marginInlineStart' and 'insetInlineStart' via polyfills. * Deprecate non-standard 'marginStart' etc. properties. Ref #2379
necolas · Dec 27, 2022 · fbc3495 · fbc3495
1 parent 77798a9
commit fbc3495
Show file tree

Hide file tree

Showing 14 changed files with 439 additions and 170 deletions.
diff --git a/packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.js b/packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.js
@@ -113,7 +113,7 @@ describe.each([['concurrent'], ['legacy']])('AppRegistry', (mode) => {
           "[stylesheet-group=\\"2\\"] {}",
           ".r-display-xoduu5 {display: inline-flex;}",
           ".r-flex-13awgt0 {flex: 1;}",
-          "[stylesheet-group=\\"2.2\\"] {}",
+          "[stylesheet-group=\\"3\\"] {}",
           ".r-bottom-1p0dtai {bottom: 0px;}",
           ".r-left-1d2f490 {left: 0px;}",
           ".r-pointerEvents-105ug2t {pointer-events: auto !important;}",

diff --git a/packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.node.js b/packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.node.js
@@ -48,7 +48,7 @@ describe('AppRegistry', () => {
         [stylesheet-group=\\"2\\"]{}
         .r-display-xoduu5{display:inline-flex;}
         .r-flex-13awgt0{flex:1;}
-        [stylesheet-group=\\"2.2\\"]{}
+        [stylesheet-group=\\"3\\"]{}
         .r-bottom-1p0dtai{bottom:0px;}
         .r-left-1d2f490{left:0px;}
         .r-pointerEvents-105ug2t{pointer-events:auto!important;}
@@ -92,7 +92,7 @@ describe('AppRegistry', () => {
         [stylesheet-group=\\"2\\"]{}
         .r-display-xoduu5{display:inline-flex;}
         .r-flex-13awgt0{flex:1;}
-        [stylesheet-group=\\"2.2\\"]{}
+        [stylesheet-group=\\"3\\"]{}
         .r-bottom-1p0dtai{bottom:0px;}
         .r-left-1d2f490{left:0px;}
         .r-pointerEvents-105ug2t{pointer-events:auto!important;}
@@ -129,7 +129,7 @@ describe('AppRegistry', () => {
         .r-borderWidth-1bee2fs{border-bottom-width:1234px;border-left-width:1234px;border-right-width:1234px;border-top-width:1234px;}
         .r-display-xoduu5{display:inline-flex;}
         .r-flex-13awgt0{flex:1;}
-        [stylesheet-group=\\"2.2\\"]{}
+        [stylesheet-group=\\"3\\"]{}
         .r-backgroundColor-aot4c7{background-color:rgba(128,0,128,1.00);}
         .r-bottom-1p0dtai{bottom:0px;}
         .r-left-1d2f490{left:0px;}

diff --git a/...es/react-native-web/src/exports/StyleSheet/__tests__/compiler-createReactDOMStyle-test.js b/...es/react-native-web/src/exports/StyleSheet/__tests__/compiler-createReactDOMStyle-test.js
@@ -35,12 +35,12 @@ describe('compiler/createReactDOMStyle', () => {
       borderBottomWidth: 1,
       borderWidth: 0,
       marginTop: 50,
-      marginVertical: 25,
+      marginBlock: 25,
       margin: 10,
       overflow: 'hidden',
       overscrollBehavior: 'contain',
       paddingLeft: 50,
-      paddingHorizontal: 25,
+      paddingInline: 25,
       padding: 10
     };