Skip to content

Commit 95ea283

Browse files
AndaristAndarist
authored
Disallow functions as value of style prop in libs related to React Native (emotion-js#2014)
* Disallow functions as value of style prop in libs related to React Native * Fixed manypkg errors * Update snapshots that has popped up after merge * Remove usage of the ColorPropType as it has been removed from react-native-web * Add changeset about upgradint css-to-react-native pkg
1 parent d949a37 commit 95ea283

File tree

15 files changed

+757
-505
lines changed

15 files changed

+757
-505
lines changed

‎.changeset/green-zoos-greet.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
'@emotion/native': major
3+
'@emotion/primitives': major
4+
'@emotion/primitives-core': major
5+
---
6+
7+
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

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
'@emotion/native': major
3+
'@emotion/primitives': major
4+
'@emotion/primitives-core': major
5+
---
6+
7+
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-7
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,2 @@
11
// @flow
2-
/* eslint-env jest */
3-
module.exports = {
4-
...jest.requireActual('react-primitives'),
5-
View: 'View',
6-
Image: 'Image',
7-
Text: 'Text'
8-
}
2+
export * from 'react-primitives/lib/index.web'

‎package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -251,9 +251,9 @@
251251
"react-helmet": "^5.2.0",
252252
"react-icons": "^2.2.7",
253253
"react-live": "1.10.0",
254-
"react-native": "^0.61.5",
255-
"react-native-web": "0.9.6",
256-
"react-primitives": "^0.7.0",
254+
"react-native": "^0.63.2",
255+
"react-native-web": "0.13.12",
256+
"react-primitives": "^0.8.1",
257257
"react-router-dom": "^4.2.2",
258258
"react-scripts": "1.1.5",
259259
"react-test-renderer": "16.8.6",

‎packages/native/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
"@types/react-native": "^0.63.2",
2020
"dtslint": "^0.3.0",
2121
"react": "^16.11.0",
22-
"react-native": "^0.61.5"
22+
"react-native": "^0.63.2"
2323
},
2424
"dependencies": {
2525
"@emotion/primitives-core": "11.0.0-next.17"

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

+80-45
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,12 @@ exports[`Emotion native styled primitive should work with \`withComponent\` 1`]
44
<Text
55
decor="hotpink"
66
style={
7-
Object {
8-
"color": "hotpink",
9-
}
7+
Array [
8+
Object {
9+
"color": "hotpink",
10+
},
11+
undefined,
12+
]
1013
}
1114
>
1215
Mike
@@ -17,9 +20,12 @@ exports[`Emotion native styled should pass props in withComponent 1`] = `
1720
<View
1821
color="green"
1922
style={
20-
Object {
21-
"backgroundColor": "green",
22-
}
23+
Array [
24+
Object {
25+
"backgroundColor": "green",
26+
},
27+
undefined,
28+
]
2329
}
2430
/>
2531
`;
@@ -28,9 +34,12 @@ exports[`Emotion native styled should pass props in withComponent 2`] = `
2834
<Text
2935
color="hotpink"
3036
style={
31-
Object {
32-
"backgroundColor": "hotpink",
33-
}
37+
Array [
38+
Object {
39+
"backgroundColor": "hotpink",
40+
},
41+
undefined,
42+
]
3443
}
3544
/>
3645
`;
@@ -45,23 +54,30 @@ exports[`Emotion native styled should render <Image /> 1`] = `
4554
}
4655
}
4756
style={
48-
Object {
49-
"borderBottomLeftRadius": 2,
50-
"borderBottomRightRadius": 2,
51-
"borderTopLeftRadius": 2,
52-
"borderTopRightRadius": 2,
53-
}
57+
Array [
58+
Object {
59+
"borderBottomLeftRadius": 2,
60+
"borderBottomRightRadius": 2,
61+
"borderTopLeftRadius": 2,
62+
"borderTopRightRadius": 2,
63+
},
64+
undefined,
65+
]
5466
}
5567
/>
5668
`;
5769

5870
exports[`Emotion native styled should render primitive with style prop 1`] = `
5971
<Text
6072
style={
61-
Object {
62-
"color": "hotpink",
63-
"padding": 10,
64-
}
73+
Array [
74+
Object {
75+
"color": "hotpink",
76+
},
77+
Object {
78+
"padding": 10,
79+
},
80+
]
6581
}
6682
>
6783
Emotion primitives
@@ -72,10 +88,13 @@ exports[`Emotion native styled should render styles correctly from all nested st
7288
<Text
7389
backgroundColor="blue"
7490
style={
75-
Object {
76-
"backgroundColor": "blue",
77-
"color": "hotpink",
78-
}
91+
Array [
92+
Object {
93+
"backgroundColor": "blue",
94+
"color": "hotpink",
95+
},
96+
undefined,
97+
]
7998
}
8099
>
81100
Hello World
@@ -86,13 +105,16 @@ exports[`Emotion native styled should render the primitive on changing the props
86105
<Text
87106
decor="hotpink"
88107
style={
89-
Object {
90-
"color": "hotpink",
91-
"paddingBottom": 20,
92-
"paddingLeft": 20,
93-
"paddingRight": 20,
94-
"paddingTop": 20,
95-
}
108+
Array [
109+
Object {
110+
"color": "hotpink",
111+
"paddingBottom": 20,
112+
"paddingLeft": 20,
113+
"paddingRight": 20,
114+
"paddingTop": 20,
115+
},
116+
undefined,
117+
]
96118
}
97119
>
98120
Emotion Primitives
@@ -103,11 +125,16 @@ exports[`Emotion native styled should render the primitive when styles applied u
103125
<Text
104126
back="red"
105127
style={
106-
Object {
107-
"backgroundColor": "red",
108-
"color": "red",
109-
"fontSize": 40,
110-
}
128+
Array [
129+
Object {
130+
"backgroundColor": "red",
131+
"color": "red",
132+
"fontSize": 20,
133+
},
134+
Object {
135+
"fontSize": 40,
136+
},
137+
]
111138
}
112139
>
113140
Emotion Primitives
@@ -117,9 +144,12 @@ exports[`Emotion native styled should render the primitive when styles applied u
117144
exports[`Emotion native styled should style any other component 1`] = `
118145
<Text
119146
style={
120-
Object {
121-
"color": "hotpink",
122-
}
147+
Array [
148+
Object {
149+
"color": "hotpink",
150+
},
151+
undefined,
152+
]
123153
}
124154
>
125155
Hello World
@@ -129,10 +159,12 @@ exports[`Emotion native styled should style any other component 1`] = `
129159
exports[`Emotion native styled should work with StyleSheet.create API 1`] = `
130160
<Text
131161
style={
132-
Object {
133-
"color": "red",
134-
"fontSize": 10,
135-
}
162+
Array [
163+
Object {
164+
"fontSize": 10,
165+
},
166+
74,
167+
]
136168
}
137169
>
138170
Emotion primitives
@@ -142,9 +174,12 @@ exports[`Emotion native styled should work with StyleSheet.create API 1`] = `
142174
exports[`Emotion native styled should work with theming from @emotion/react 1`] = `
143175
<Text
144176
style={
145-
Object {
146-
"color": "magenta",
147-
}
177+
Array [
178+
Object {
179+
"color": "magenta",
180+
},
181+
undefined,
182+
]
148183
}
149184
>
150185
Hello World

‎packages/primitives-core/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
],
1414
"license": "MIT",
1515
"dependencies": {
16-
"css-to-react-native": "^2.2.1"
16+
"css-to-react-native": "^3.0.0"
1717
},
1818
"peerDependencies": {
1919
"@emotion/react": "^11.0.0-next.17",

‎packages/primitives-core/src/styled.js

+1-7
Original file line numberDiff line numberDiff line change
@@ -52,12 +52,6 @@ export function createStyled(
5252
mergedProps.theme = React.useContext(ThemeContext)
5353
}
5454

55-
let stylesWithStyleProp = styles
56-
if (props.style) {
57-
stylesWithStyleProp = styles.concat(props.style)
58-
}
59-
const emotionStyles = css.apply(mergedProps, stylesWithStyleProp)
60-
6155
let newProps = {}
6256

6357
for (let key in props) {
@@ -66,7 +60,7 @@ export function createStyled(
6660
}
6761
}
6862

69-
newProps.style = emotionStyles
63+
newProps.style = [css.apply(mergedProps, styles), props.style]
7064
newProps.ref = ref
7165

7266
// $FlowFixMe

‎packages/primitives/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
"peerDependencies": {
2020
"@babel/core": "^7.0.0",
2121
"react": ">=16.8.0",
22-
"react-primitives": "^0.7.0"
22+
"react-primitives": "^0.8.1"
2323
},
2424
"peerDependenciesMeta": {
2525
"@babel/core": {
@@ -31,7 +31,7 @@
3131
"enzyme": "^3.7.0",
3232
"enzyme-adapter-react-16": "^1.6.0",
3333
"react": "^16.11.0",
34-
"react-primitives": "^0.7.0"
34+
"react-primitives": "^0.8.1"
3535
},
3636
"homepage": "https://emotion.sh",
3737
"license": "MIT",

0 commit comments

Comments
 (0)