fix: correctly handle style props

z0al · Nov 29, 2020 · 5873ac9 · 5873ac9
1 parent a67767d
commit 5873ac9
Show file tree

Hide file tree

Showing 15 changed files with 279 additions and 137 deletions.
diff --git a/package.json b/package.json
@@ -65,7 +65,7 @@
 		"eslint-plugin-prettier": "^3.1.4",
 		"jest-expo": "^39.0.0",
 		"json.macro": "^1.3.0",
-		"prettier": "^2.2.0",
+		"prettier": "^2.2.1",
 		"react": "^16.14.0",
 		"react-dom": "^16.14.0",
 		"react-native": "^0.63.3",
@@ -74,7 +74,7 @@
 		"rimraf": "^3.0.2",
 		"semantic-release": "^17.3.0",
 		"ts-node": "^9.0.0",
-		"type-fest": "^0.20.1",
+		"type-fest": "^0.20.2",
 		"typescript": "^4.1.2"
 	},
 	"peerDependencies": {

diff --git a/src/__tests__/__snapshots__/samples.test.ts.snap.android b/src/__tests__/__snapshots__/samples.test.ts.snap.android
@@ -26,7 +26,7 @@ import { View } from 'react-native';
 const Button = () => (
 	<View
 		{...{
-			style: _styles._default,
+			style: [_styles._default],
 		}}
 	/>
 );
@@ -87,7 +87,7 @@ const _styles = _StyleSheet.create({
 });
 
 console.log({
-	style: _styles._default,
+	style: [_styles._default],
 });
 
 
@@ -147,7 +147,7 @@ import { Text } from 'react-native';
 const Heading = ({ text }) => (
 	<Text
 		{...{
-			style: _styles._default,
+			style: [_styles._default],
 		}}
 	>
 		{text}
@@ -224,17 +224,17 @@ export default function App() {
 	return (
 		<SafeAreaView
 			{...{
-				style: _styles._default,
+				style: [_styles._default],
 			}}
 		>
 			<Pressable
 				{...{
-					style: _styles._default2,
+					style: [_styles._default2],
 				}}
 			>
 				<Text
 					{...{
-						style: _styles._default3,
+						style: [_styles._default3],
 					}}
 				>
 					Press me
@@ -278,10 +278,34 @@ const bgWhite = 'bg-white';
 const buttonStyle = [bgWhite, 'text-black'];
 const inputStyle = [bgWhite, 'text-black'];
 console.log({
-	style: _styles._default,
+	style: [_styles._default],
 });
 console.log({
-	style: _styles._default2,
+	style: [_styles._default2],
+});
+
+
+`;
+
+exports[`babel-plugin-macros 8. babel-plugin-macros: 8. babel-plugin-macros 1`] = `
+
+import styled from '../../build/module/macro.js';
+
+console.log(styled(['bg-black', 'selectable']))
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+import { StyleSheet as _StyleSheet } from 'react-native';
+
+const _styles = _StyleSheet.create({
+	_default: {
+		backgroundColor: 'black',
+	},
+});
+
+console.log({
+	selectable: true,
+	style: [_styles._default],
 });
 
 

diff --git a/src/__tests__/__snapshots__/samples.test.ts.snap.ios b/src/__tests__/__snapshots__/samples.test.ts.snap.ios
@@ -26,7 +26,7 @@ import { View } from 'react-native';
 const Button = () => (
 	<View
 		{...{
-			style: _styles._default,
+			style: [_styles._default],
 		}}
 	/>
 );
@@ -87,7 +87,7 @@ const _styles = _StyleSheet.create({
 });
 
 console.log({
-	style: _styles._default,
+	style: [_styles._default],
 });
 
 
@@ -147,7 +147,7 @@ import { Text } from 'react-native';
 const Heading = ({ text }) => (
 	<Text
 		{...{
-			style: _styles._default,
+			style: [_styles._default],
 		}}
 	>
 		{text}
@@ -224,17 +224,17 @@ export default function App() {
 	return (
 		<SafeAreaView
 			{...{
-				style: _styles._default,
+				style: [_styles._default],
 			}}
 		>
 			<Pressable
 				{...{
-					style: _styles._default2,
+					style: [_styles._default2],
 				}}
 			>
 				<Text
 					{...{
-						style: _styles._default3,
+						style: [_styles._default3],
 					}}
 				>
 					Press me
@@ -278,10 +278,34 @@ const bgWhite = 'bg-white';
 const buttonStyle = [bgWhite, 'text-black'];
 const inputStyle = [bgWhite, 'text-black'];
 console.log({
-	style: _styles._default,
+	style: [_styles._default],
 });
 console.log({
-	style: _styles._default2,
+	style: [_styles._default2],
+});
+
+
+`;
+
+exports[`babel-plugin-macros 8. babel-plugin-macros: 8. babel-plugin-macros 1`] = `
+
+import styled from '../../build/module/macro.js';
+
+console.log(styled(['bg-black', 'selectable']))
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+import { StyleSheet as _StyleSheet } from 'react-native';
+
+const _styles = _StyleSheet.create({
+	_default: {
+		backgroundColor: 'black',
+	},
+});
+
+console.log({
+	selectable: true,
+	style: [_styles._default],
 });
 
 

diff --git a/src/__tests__/__snapshots__/samples.test.ts.snap.node b/src/__tests__/__snapshots__/samples.test.ts.snap.node
@@ -26,7 +26,7 @@ import { View } from 'react-native';
 const Button = () => (
 	<View
 		{...{
-			style: _styles._default,
+			style: [_styles._default],
 		}}
 	/>
 );
@@ -87,7 +87,7 @@ const _styles = _StyleSheet.create({
 });
 
 console.log({
-	style: _styles._default,
+	style: [_styles._default],
 });
 
 
@@ -147,7 +147,7 @@ import { Text } from 'react-native';
 const Heading = ({ text }) => (
 	<Text
 		{...{
-			style: _styles._default,
+			style: [_styles._default],
 		}}
 	>
 		{text}
@@ -224,17 +224,17 @@ export default function App() {
 	return (
 		<SafeAreaView
 			{...{
-				style: _styles._default,
+				style: [_styles._default],
 			}}
 		>
 			<Pressable
 				{...{
-					style: _styles._default2,
+					style: [_styles._default2],
 				}}
 			>
 				<Text
 					{...{
-						style: _styles._default3,
+						style: [_styles._default3],
 					}}
 				>
 					Press me
@@ -278,10 +278,34 @@ const bgWhite = 'bg-white';
 const buttonStyle = [bgWhite, 'text-black'];
 const inputStyle = [bgWhite, 'text-black'];
 console.log({
-	style: _styles._default,
+	style: [_styles._default],
 });
 console.log({
-	style: _styles._default2,
+	style: [_styles._default2],
+});
+
+
+`;
+
+exports[`babel-plugin-macros 8. babel-plugin-macros: 8. babel-plugin-macros 1`] = `
+
+import styled from '../../build/module/macro.js';
+
+console.log(styled(['bg-black', 'selectable']))
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+import { StyleSheet as _StyleSheet } from 'react-native';
+
+const _styles = _StyleSheet.create({
+	_default: {
+		backgroundColor: 'black',
+	},
+});
+
+console.log({
+	selectable: true,
+	style: [_styles._default],
 });
 
 

diff --git a/src/__tests__/__snapshots__/samples.test.ts.snap.web b/src/__tests__/__snapshots__/samples.test.ts.snap.web
@@ -26,7 +26,7 @@ import { View } from 'react-native';
 const Button = () => (
 	<View
 		{...{
-			style: _styles._default,
+			style: [_styles._default],
 		}}
 	/>
 );
@@ -87,7 +87,7 @@ const _styles = _StyleSheet.create({
 });
 
 console.log({
-	style: _styles._default,
+	style: [_styles._default],
 });
 
 
@@ -147,7 +147,7 @@ import { Text } from 'react-native';
 const Heading = ({ text }) => (
 	<Text
 		{...{
-			style: _styles._default,
+			style: [_styles._default],
 		}}
 	>
 		{text}
@@ -224,17 +224,17 @@ export default function App() {
 	return (
 		<SafeAreaView
 			{...{
-				style: _styles._default,
+				style: [_styles._default],
 			}}
 		>
 			<Pressable
 				{...{
-					style: _styles._default2,
+					style: [_styles._default2],
 				}}
 			>
 				<Text
 					{...{
-						style: _styles._default3,
+						style: [_styles._default3],
 					}}
 				>
 					Press me
@@ -278,10 +278,34 @@ const bgWhite = 'bg-white';
 const buttonStyle = [bgWhite, 'text-black'];
 const inputStyle = [bgWhite, 'text-black'];
 console.log({
-	style: _styles._default,
+	style: [_styles._default],
 });
 console.log({
-	style: _styles._default2,
+	style: [_styles._default2],
+});
+
+
+`;
+
+exports[`babel-plugin-macros 8. babel-plugin-macros: 8. babel-plugin-macros 1`] = `
+
+import styled from '../../build/module/macro.js';
+
+console.log(styled(['bg-black', 'selectable']))
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+import { StyleSheet as _StyleSheet } from 'react-native';
+
+const _styles = _StyleSheet.create({
+	_default: {
+		backgroundColor: 'black',
+	},
+});
+
+console.log({
+	selectable: true,
+	style: [_styles._default],
 });
 
 

diff --git a/src/__tests__/samples.test.ts b/src/__tests__/samples.test.ts
@@ -96,5 +96,10 @@ pluginTester({
 		console.log(styled(buttonStyle))
 		console.log(styled(inputStyle))
 		`,
+		`
+		import styled from '${macroPath}';
+
+		console.log(styled(['bg-black', 'selectable']))
+		`,
 	],
 });