Disallow functions as value of style prop in libs related to React Native

.changeset/green-zoos-greet.md

@@ -0,0 +1,7 @@
+---
+'@emotion/native': major
+'@emotion/primitives': major
+'@emotion/primitives-core': major
+---
+
+Updated `css-to-react-native` dependency to the 3.x version - it comes with some breaking changes listed [here](https://github.com/styled-components/css-to-react-native/releases/tag/v3.0.0).

.changeset/selfish-pans-enjoy.md

@@ -0,0 +1,7 @@
+---
+'@emotion/native': major
+'@emotion/primitives': major
+'@emotion/primitives-core': major
+---
+
+Functions are no longer accepted as values for the `style` prop. This unifies the behavior with the web version of Emotion as `style`'s equivalent is `className` prop and functions are not resolved for it.

__mocks__/react-primitives.js

@@ -1,8 +1,2 @@
 // @flow
-/* eslint-env jest */
-module.exports = {
-  ...jest.requireActual('react-primitives'),
-  View: 'View',
-  Image: 'Image',
-  Text: 'Text'
-}
+export * from 'react-primitives/lib/index.web'

package.json

@@ -251,9 +251,9 @@
     "react-helmet": "^5.2.0",
     "react-icons": "^2.2.7",
     "react-live": "1.10.0",
-    "react-native": "^0.61.5",
-    "react-native-web": "0.9.6",
-    "react-primitives": "^0.7.0",
+    "react-native": "^0.63.2",
+    "react-native-web": "0.13.12",
+    "react-primitives": "^0.8.1",
     "react-router-dom": "^4.2.2",
     "react-scripts": "1.1.5",
     "react-test-renderer": "16.8.6",

packages/native/package.json

@@ -19,7 +19,7 @@
     "@types/react-native": "^0.63.2",
     "dtslint": "^0.3.0",
     "react": "^16.11.0",
-    "react-native": "^0.61.5"
+    "react-native": "^0.63.2"
   },
   "dependencies": {
     "@emotion/primitives-core": "11.0.0-next.17"

packages/native/test/__snapshots__/native-styled.test.js.snap

@@ -4,9 +4,12 @@ exports[`Emotion native styled primitive should work with \`withComponent\` 1`]
 <Text
   decor="hotpink"
   style={
-    Object {
-      "color": "hotpink",
-    }
+    Array [
+      Object {
+        "color": "hotpink",
+      },
+      undefined,
+    ]
   }
 >
   Mike
@@ -17,9 +20,12 @@ exports[`Emotion native styled should pass props in withComponent 1`] = `
 <View
   color="green"
   style={
-    Object {
-      "backgroundColor": "green",
-    }
+    Array [
+      Object {
+        "backgroundColor": "green",
+      },
+      undefined,
+    ]
   }
 />
 `;
@@ -28,9 +34,12 @@ exports[`Emotion native styled should pass props in withComponent 2`] = `
 <Text
   color="hotpink"
   style={
-    Object {
-      "backgroundColor": "hotpink",
-    }
+    Array [
+      Object {
+        "backgroundColor": "hotpink",
+      },
+      undefined,
+    ]
   }
 />
 `;
@@ -45,23 +54,30 @@ exports[`Emotion native styled should render <Image /> 1`] = `
     }
   }
   style={
-    Object {
-      "borderBottomLeftRadius": 2,
-      "borderBottomRightRadius": 2,
-      "borderTopLeftRadius": 2,
-      "borderTopRightRadius": 2,
-    }
+    Array [
+      Object {
+        "borderBottomLeftRadius": 2,
+        "borderBottomRightRadius": 2,
+        "borderTopLeftRadius": 2,
+        "borderTopRightRadius": 2,
+      },
+      undefined,
+    ]
   }
 />
 `;
 
 exports[`Emotion native styled should render primitive with style prop 1`] = `
 <Text
   style={
-    Object {
-      "color": "hotpink",
-      "padding": 10,
-    }
+    Array [
+      Object {
+        "color": "hotpink",
+      },
+      Object {
+        "padding": 10,
+      },
+    ]
   }
 >
   Emotion primitives
@@ -72,10 +88,13 @@ exports[`Emotion native styled should render styles correctly from all nested st
 <Text
   backgroundColor="blue"
   style={
-    Object {
-      "backgroundColor": "blue",
-      "color": "hotpink",
-    }
+    Array [
+      Object {
+        "backgroundColor": "blue",
+        "color": "hotpink",
+      },
+      undefined,
+    ]
   }
 >
   Hello World
@@ -86,13 +105,16 @@ exports[`Emotion native styled should render the primitive on changing the props
 <Text
   decor="hotpink"
   style={
-    Object {
-      "color": "hotpink",
-      "paddingBottom": 20,
-      "paddingLeft": 20,
-      "paddingRight": 20,
-      "paddingTop": 20,
-    }
+    Array [
+      Object {
+        "color": "hotpink",
+        "paddingBottom": 20,
+        "paddingLeft": 20,
+        "paddingRight": 20,
+        "paddingTop": 20,
+      },
+      undefined,
+    ]
   }
 >
   Emotion Primitives
@@ -103,11 +125,16 @@ exports[`Emotion native styled should render the primitive when styles applied u
 <Text
   back="red"
   style={
-    Object {
-      "backgroundColor": "red",
-      "color": "red",
-      "fontSize": 40,
-    }
+    Array [
+      Object {
+        "backgroundColor": "red",
+        "color": "red",
+        "fontSize": 20,
+      },
+      Object {
+        "fontSize": 40,
+      },
+    ]
   }
 >
   Emotion Primitives
@@ -117,9 +144,12 @@ exports[`Emotion native styled should render the primitive when styles applied u
 exports[`Emotion native styled should style any other component 1`] = `
 <Text
   style={
-    Object {
-      "color": "hotpink",
-    }
+    Array [
+      Object {
+        "color": "hotpink",
+      },
+      undefined,
+    ]
   }
 >
   Hello World
@@ -129,10 +159,12 @@ exports[`Emotion native styled should style any other component 1`] = `
 exports[`Emotion native styled should work with StyleSheet.create API 1`] = `
 <Text
   style={
-    Object {
-      "color": "red",
-      "fontSize": 10,
-    }
+    Array [
+      Object {
+        "fontSize": 10,
+      },
+      74,
+    ]
   }
 >
   Emotion primitives
@@ -142,9 +174,12 @@ exports[`Emotion native styled should work with StyleSheet.create API 1`] = `
 exports[`Emotion native styled should work with theming from @emotion/react 1`] = `
 <Text
   style={
-    Object {
-      "color": "magenta",
-    }
+    Array [
+      Object {
+        "color": "magenta",
+      },
+      undefined,
+    ]
   }
 >
   Hello World

packages/primitives-core/package.json

@@ -13,7 +13,7 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "css-to-react-native": "^2.2.1"
+    "css-to-react-native": "^3.0.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.0.0-next.17",

packages/primitives-core/src/styled.js

@@ -52,12 +52,6 @@ export function createStyled(
           mergedProps.theme = React.useContext(ThemeContext)
         }
 
-        let stylesWithStyleProp = styles
-        if (props.style) {
-          stylesWithStyleProp = styles.concat(props.style)
-        }
-        const emotionStyles = css.apply(mergedProps, stylesWithStyleProp)
-
         let newProps = {}
 
         for (let key in props) {
@@ -66,7 +60,7 @@ export function createStyled(
           }
         }
 
-        newProps.style = emotionStyles
+        newProps.style = [css.apply(mergedProps, styles), props.style]
         newProps.ref = ref
 
         // $FlowFixMe

packages/primitives/package.json

@@ -19,7 +19,7 @@
   "peerDependencies": {
     "@babel/core": "^7.0.0",
     "react": ">=16.8.0",
-    "react-primitives": "^0.7.0"
+    "react-primitives": "^0.8.1"
   },
   "peerDependenciesMeta": {
     "@babel/core": {
@@ -31,7 +31,7 @@
     "enzyme": "^3.7.0",
     "enzyme-adapter-react-16": "^1.6.0",
     "react": "^16.11.0",
-    "react-primitives": "^0.7.0"
+    "react-primitives": "^0.8.1"
   },
   "homepage": "https://emotion.sh",
   "license": "MIT",