[change] Deprecate 'transform' style array syntax

Use space-separated values per W3C standard. Ref #2379
necolas · Dec 27, 2022 · 77798a9 · 77798a9
1 parent f81e987
commit 77798a9
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 41 deletions.
diff --git a/packages/react-native-web/src/exports/ScrollView/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/ScrollView/__tests__/__snapshots__/index-test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`components/ScrollView prop "centerContent" with 1`] = `
 <div
-  class="css-view-175oi2r r-WebkitOverflowScrolling-150rngu r-flexDirection-eqz5dr r-flexGrow-16y2uox r-flexShrink-1wbh5a2 r-overflowX-11yh6sk r-overflowY-1rnoaur r-transform-1sncvnh"
+  class="css-view-175oi2r r-WebkitOverflowScrolling-150rngu r-flexDirection-eqz5dr r-flexGrow-16y2uox r-flexShrink-1wbh5a2 r-overflowX-11yh6sk r-overflowY-1rnoaur r-transform-agouwx"
   style="background-color: rgb(0, 0, 255);"
 >
   <div
@@ -13,7 +13,7 @@ exports[`components/ScrollView prop "centerContent" with 1`] = `
 
 exports[`components/ScrollView prop "centerContent" without 1`] = `
 <div
-  class="css-view-175oi2r r-WebkitOverflowScrolling-150rngu r-flexDirection-eqz5dr r-flexGrow-16y2uox r-flexShrink-1wbh5a2 r-overflowX-11yh6sk r-overflowY-1rnoaur r-transform-1sncvnh"
+  class="css-view-175oi2r r-WebkitOverflowScrolling-150rngu r-flexDirection-eqz5dr r-flexGrow-16y2uox r-flexShrink-1wbh5a2 r-overflowX-11yh6sk r-overflowY-1rnoaur r-transform-agouwx"
   style="background-color: rgb(0, 0, 255);"
 >
   <div
@@ -27,7 +27,7 @@ exports[`components/ScrollView prop "refreshControl" with 1`] = `
   id="refresh-control"
 >
   <div
-    class="css-view-175oi2r r-WebkitOverflowScrolling-150rngu r-flexDirection-eqz5dr r-flexGrow-16y2uox r-flexShrink-1wbh5a2 r-overflowX-11yh6sk r-overflowY-1rnoaur r-transform-1sncvnh"
+    class="css-view-175oi2r r-WebkitOverflowScrolling-150rngu r-flexDirection-eqz5dr r-flexGrow-16y2uox r-flexShrink-1wbh5a2 r-overflowX-11yh6sk r-overflowY-1rnoaur r-transform-agouwx"
     style="background-color: rgb(255, 0, 0);"
   >
     <div
@@ -39,7 +39,7 @@ exports[`components/ScrollView prop "refreshControl" with 1`] = `
 
 exports[`components/ScrollView prop "refreshControl" without 1`] = `
 <div
-  class="css-view-175oi2r r-WebkitOverflowScrolling-150rngu r-flexDirection-eqz5dr r-flexGrow-16y2uox r-flexShrink-1wbh5a2 r-overflowX-11yh6sk r-overflowY-1rnoaur r-transform-1sncvnh"
+  class="css-view-175oi2r r-WebkitOverflowScrolling-150rngu r-flexDirection-eqz5dr r-flexGrow-16y2uox r-flexShrink-1wbh5a2 r-overflowX-11yh6sk r-overflowY-1rnoaur r-transform-agouwx"
   style="background-color: rgb(255, 0, 0);"
 >
   <div

diff --git a/packages/react-native-web/src/exports/ScrollView/index.js b/packages/react-native-web/src/exports/ScrollView/index.js
@@ -727,7 +727,7 @@ const commonStyle = {
   // Enable hardware compositing in modern browsers.
   // Creates a new layer with its own backing surface that can significantly
   // improve scroll performance.
-  transform: [{ translateZ: 0 }],
+  transform: 'translateZ(0)',
   // iOS native scrolling
   WebkitOverflowScrolling: 'touch'
 };

diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/compiler-test.js b/packages/react-native-web/src/exports/StyleSheet/__tests__/compiler-test.js
@@ -25,12 +25,7 @@ describe('StyleSheet/compile', () => {
         pointerEvents: 'box-only',
         start: '12.34%',
         textAlign: 'start',
-        transform: [
-          {
-            translateX: 50,
-            scale: -1
-          }
-        ]
+        transform: 'translateX(50px) scale(-1)'
       });
 
       expect(result).toMatchInlineSnapshot(`
@@ -61,7 +56,7 @@ describe('StyleSheet/compile', () => {
               "r-textAlign-fdjqy7",
               "r-textAlign-1ff274t",
             ],
-            "transform": "r-transform-1ehiua4",
+            "transform": "r-transform-d7xd9i",
           },
           [
             [
@@ -165,7 +160,7 @@ describe('StyleSheet/compile', () => {
             ],
             [
               [
-                ".r-transform-1ehiua4{transform:translateX(50px);}",
+                ".r-transform-d7xd9i{transform:translateX(50px) scale(-1);}",
               ],
               2.2,
             ],
@@ -179,19 +174,14 @@ describe('StyleSheet/compile', () => {
     test('converts style to classic CSS', () => {
       const result = classic(
         {
-          animationDirection: ['alternate', 'alternate-reverse'],
+          animationDirection: 'alternate,alternate-reverse',
           animationKeyframes: [
             { '0%': { top: 0 }, '50%': { top: 5 }, '100%': { top: 10 } },
             { from: { left: 0 }, to: { left: 10 } }
           ],
           marginHorizontal: 10,
           font: '14px System',
-          transform: [
-            {
-              translateX: 50,
-              scale: -1
-            }
-          ]
+          transform: 'translateX(50px) scale(-1)'
         },
         'text'
       );

diff --git a/packages/react-native-web/src/exports/StyleSheet/compiler/createReactDOMStyle.js b/packages/react-native-web/src/exports/StyleSheet/compiler/createReactDOMStyle.js
@@ -99,6 +99,10 @@ const mapTransform = (transform: Object): string => {
 export const createTransformValue = (style: Style): string => {
   let transform = style.transform;
   if (Array.isArray(style.transform)) {
+    warnOnce(
+      'transform',
+      '"transform" style array value is deprecated. Use space-separated string functions, e.g., "scaleX(2) rotateX(15deg)".'
+    );
     transform = style.transform.map(mapTransform).join(' ');
   }
   return transform;

diff --git a/packages/react-native-web/src/exports/Switch/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/Switch/__tests__/__snapshots__/index-test.js.snap
@@ -9,7 +9,7 @@ exports[`components/Switch disabled when "true" and value="false", a disabled ch
 
 exports[`components/Switch disabled when "true" and value="false", a disabled checkbox is rendered with provided thumbColor 1`] = `
 <div
-  class="css-view-175oi2r r-alignSelf-k200y r-borderRadius-1j16mh1 r-boxShadow-1ewcgjf r-forcedColorAdjust-1c6unfx r-left-1fe0xdi r-transform-1sncvnh r-transitionDuration-13tjlyg"
+  class="css-view-175oi2r r-alignSelf-k200y r-borderRadius-1j16mh1 r-boxShadow-1ewcgjf r-forcedColorAdjust-1c6unfx r-left-1fe0xdi r-transform-agouwx r-transitionDuration-13tjlyg"
   style="background-color: rgb(255, 255, 255); height: 20px; margin-left: 0px; width: 20px;"
 />
 `;
@@ -23,7 +23,7 @@ exports[`components/Switch disabled when "true" and value="false", a disabled ch
 
 exports[`components/Switch disabled when "true" and value="true", a disabled checkbox is rendered with provided activeThumbColor 1`] = `
 <div
-  class="css-view-175oi2r r-alignSelf-k200y r-borderRadius-1j16mh1 r-boxShadow-1ewcgjf r-forcedColorAdjust-1c6unfx r-transform-1sncvnh r-transitionDuration-13tjlyg r-left-7b7h2f"
+  class="css-view-175oi2r r-alignSelf-k200y r-borderRadius-1j16mh1 r-boxShadow-1ewcgjf r-forcedColorAdjust-1c6unfx r-transform-agouwx r-transitionDuration-13tjlyg r-left-7b7h2f"
   style="background-color: rgb(255, 255, 255); height: 20px; margin-left: -20px; width: 20px;"
 />
 `;

diff --git a/packages/react-native-web/src/exports/Switch/index.js b/packages/react-native-web/src/exports/Switch/index.js
@@ -214,7 +214,7 @@ const styles = StyleSheet.create({
     borderRadius: '100%',
     boxShadow: thumbDefaultBoxShadow,
     start: '0%',
-    transform: [{ translateZ: 0 }],
+    transform: 'translateZ(0)',
     transitionDuration: '0.1s'
   },
   thumbActive: {

diff --git a/packages/react-native-web/src/types/styles.js b/packages/react-native-web/src/types/styles.js
@@ -270,24 +270,26 @@ export type ShadowStyles = {|
 export type TransformStyles = {|
   perspective?: ?NumberOrString,
   perspectiveOrigin?: ?string,
-  transform?: Array<
-    | {| +perspective: NumberOrString |}
-    | {| +rotate: string |}
-    | {| +rotateX: string |}
-    | {| +rotateY: string |}
-    | {| +rotateZ: string |}
-    | {| +scale: number |}
-    | {| +scaleX: number |}
-    | {| +scaleY: number |}
-    | {| +scaleZ: number |}
-    | {| +scale3d: string |}
-    | {| +skewX: string |}
-    | {| +skewY: string |}
-    | {| +translateX: NumberOrString |}
-    | {| +translateY: NumberOrString |}
-    | {| +translateZ: NumberOrString |}
-    | {| +translate3d: string |}
-  >,
+  transform?:
+    | ?string
+    | Array<
+        | {| +perspective: NumberOrString |}
+        | {| +rotate: string |}
+        | {| +rotateX: string |}
+        | {| +rotateY: string |}
+        | {| +rotateZ: string |}
+        | {| +scale: number |}
+        | {| +scaleX: number |}
+        | {| +scaleY: number |}
+        | {| +scaleZ: number |}
+        | {| +scale3d: string |}
+        | {| +skewX: string |}
+        | {| +skewY: string |}
+        | {| +translateX: NumberOrString |}
+        | {| +translateY: NumberOrString |}
+        | {| +translateZ: NumberOrString |}
+        | {| +translate3d: string |}
+      >,
   transformOrigin?: ?string,
   transformStyle?: ?('flat' | 'preserve-3d')
 |};