[change] StyleSheet.compose() deprecation

Encourage use of existing array syntax for multiple styles. Eventually
we'll want to remove the compose() API to simplify the overall styling API.

packages/benchmarks/src/app/Icons.js

@@ -20,7 +20,7 @@ const createIcon = (children) => {
   const Icon = (props) =>
     createElement('svg', {
       children,
-      style: StyleSheet.compose(styles.root, props.style),
+      style: [styles.root, props.style],
       width: 24,
       height: 24,
       viewBox: '0 0 24 24'

packages/react-native-web-docs/src/pages/docs/apis/style-sheet.md

@@ -44,11 +44,7 @@ Equal to 1px. This is not implemented using screen density as browsers may round
 
 ### Static methods
 
-{% call macro.prop('compose', '(style1, style2) => Style') %}
-Combines two styles such that the last style overrides properties of the first style. If either style is falsy, the other one is returned without allocating an array, saving allocations and maintaining reference equality.
-{% endcall %}
-
-{% call macro.prop('create', '({ [key]: ruleset }) => ({ [key]: number })') %}
+{% call macro.prop('create', '({ [key]: ruleset }) => ({ [key]: ruleset })') %}
 Define style objects. Each key of the object passed to `create` must define a style object. These values should not be introspected at runtime.
 {% endcall %}
 

packages/react-native-web-examples/pages/index.js

@@ -11,7 +11,7 @@ function Link(props) {
       <Text
         {...props}
         accessibilityRole="link"
-        style={StyleSheet.compose(styles.link, props.style)}
+        style={[styles.link, props.style]}
       />
     </NextLink>
   );

packages/react-native-web/src/exports/SafeAreaView/index.js

@@ -32,9 +32,7 @@ const SafeAreaView: React.AbstractComponent<
   React.ElementRef<typeof View>
 > = React.forwardRef((props, ref) => {
   const { style, ...rest } = props;
-  return (
-    <View {...rest} ref={ref} style={StyleSheet.compose(styles.root, style)} />
-  );
+  return <View {...rest} ref={ref} style={[styles.root, style]} />;
 });
 
 SafeAreaView.displayName = 'SafeAreaView';

packages/react-native-web/src/exports/ScrollView/index.js

@@ -171,10 +171,10 @@ const ScrollView = ((createReactClass({
             if (child != null && (isSticky || pagingEnabled)) {
               return (
                 <View
-                  style={StyleSheet.compose(
+                  style={[
                     isSticky && styles.stickyHeader,
                     pagingEnabled && styles.pagingEnabledChild
-                  )}
+                  ]}
                 >
                   {child}
                 </View>

packages/react-native-web/src/exports/StyleSheet/__tests__/index-test.js

@@ -52,12 +52,6 @@ describe('StyleSheet', () => {
     `);
   });
 
-  test('compose', () => {
-    expect(StyleSheet.compose(1, 2)).toEqual([1, 2]);
-    expect(StyleSheet.compose(1, null)).toBe(1);
-    expect(StyleSheet.compose(null, 2)).toBe(2);
-  });
-
   describe('create', () => {
     test('returns original style objects', () => {
       const style = StyleSheet.create({ root: { position: 'absolute' } });

packages/react-native-web/src/exports/StyleSheet/index.js

@@ -104,12 +104,11 @@ function compose(style1: any, style2: any): any {
       );
     }
     /* eslint-enable prefer-rest-params */
+    console.warn(
+      'StyleSheet.compose(a, b) is deprecated; use array syntax, i.e., [a,b].'
+    );
   }
-  if (style1 && style2) {
-    return [style1, style2];
-  } else {
-    return style1 || style2;
-  }
+  return [style1, style2];
 }
 
 /**

packages/react-native-web/src/exports/TouchableHighlight/index.js

@@ -179,10 +179,7 @@ function TouchableHighlight(props: Props, forwardedRef): React.Node {
       ]}
     >
       {React.cloneElement(child, {
-        style: StyleSheet.compose(
-          child.props.style,
-          extraStyles && extraStyles.child
-        )
+        style: [child.props.style, extraStyles && extraStyles.child]
       })}
     </View>
   );

packages/react-native-web/src/vendor/react-native/FlatList/index.js

@@ -614,7 +614,7 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
             'Expected array of items with numColumns > 1',
           );
           return (
-            <View style={StyleSheet.compose(styles.row, columnWrapperStyle)}>
+            <View style={[styles.row, columnWrapperStyle]}>
               {item.map((it, kk) => {
                 const element = renderer({
                   item: it,
@@ -663,4 +663,4 @@ const styles = StyleSheet.create({
   row: {flexDirection: 'row'},
 });
 
-export default FlatList;
+export default FlatList;

packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js

@@ -957,10 +957,10 @@ class VirtualizedList extends React.PureComponent<Props, State> {
           key="$header">
           <View
             onLayout={this._onLayoutHeader}
-            style={StyleSheet.compose(
+            style={[
               inversionStyle,
               this.props.ListHeaderComponentStyle,
-            )}>
+            ]}>
             {
               // $FlowFixMe[incompatible-type] - Typing ReactNativeComponent revealed errors
               element
@@ -1084,7 +1084,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
               element.props.onLayout(event);
             }
           },
-          style: StyleSheet.compose(inversionStyle, element.props.style),
+          style: [inversionStyle, element.props.style],
         }),
       );
     }
@@ -1102,10 +1102,10 @@ class VirtualizedList extends React.PureComponent<Props, State> {
           key="$footer">
           <View
             onLayout={this._onLayoutFooter}
-            style={StyleSheet.compose(
+            style={[
               inversionStyle,
               this.props.ListFooterComponentStyle,
-            )}>
+            ]}>
             {
               // $FlowFixMe[incompatible-type] - Typing ReactNativeComponent revealed errors
               element