react-native-unistyles 3.0.0-alpha.2 → 3.0.0-alpha.21

package/plugin/__tests__/dependencies.spec.js

@@ -16,6 +16,7 @@ pluginTester({
         {
             title: 'Should detect dependencies in variants',
             code: `
+                import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
@@ -44,15 +45,16 @@ pluginTester({
             `,
             output: `
                 import { UnistylesShadowRegistry } from 'react-native-unistyles'
+                import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
                     return (
                         <View
-                            style={styles.container}
+                            style={[styles.container]}
                             ref={ref => {
-                                UnistylesShadowRegistry.add(ref, styles.container)
-                                return () => UnistylesShadowRegistry.remove(ref, styles.container)
+                                UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
+                                return () => UnistylesShadowRegistry.remove(ref)
                             }}
                         >
                             <Text>Hello world</Text>
@@ -60,25 +62,29 @@ pluginTester({
                     )
                 }
 
-                const styles = StyleSheet.create((theme, rt) => ({
-                    container: {
-                        variants: {
-                            size: {
-                                small: {
-                                    backgroundColor: theme.colors.blue,
-                                    paddingTop: theme.gap(10),
-                                    marginBottom: rt.insets.bottom === 0 ? theme.gap(20) : theme.gap(30)
+                const styles = StyleSheet.create(
+                    (theme, rt) => ({
+                        container: {
+                            variants: {
+                                size: {
+                                    small: {
+                                        backgroundColor: theme.colors.blue,
+                                        paddingTop: theme.gap(10),
+                                        marginBottom: rt.insets.bottom === 0 ? theme.gap(20) : theme.gap(30)
+                                    }
                                 }
-                            }
-                        },
-                        uni__dependencies: [0, 9, 4]
-                    }
-                }))
+                            },
+                            uni__dependencies: [0, 9, 4]
+                        }
+                    }),
+                    276736056
+                )
             `
         },
         {
             title: 'Should detect dependencies in breakpoints',
             code: `
+                import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
@@ -102,15 +108,16 @@ pluginTester({
             `,
             output: `
                 import { UnistylesShadowRegistry } from 'react-native-unistyles'
+                import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
                     return (
                         <View
-                            style={styles.container}
+                            style={[styles.container]}
                             ref={ref => {
-                                UnistylesShadowRegistry.add(ref, styles.container)
-                                return () => UnistylesShadowRegistry.remove(ref, styles.container)
+                                UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
+                                return () => UnistylesShadowRegistry.remove(ref)
                             }}
                         >
                             <Text>Hello world</Text>
@@ -118,22 +125,26 @@ pluginTester({
                     )
                 }
 
-                const styles = StyleSheet.create((theme, rt) => ({
-                    container: {
-                        backgroundColor: {
-                            sm: theme.colors.blue
-                        },
-                        padding: {
-                            xs: rt.insets.top
-                        },
-                        uni__dependencies: [0, 9]
-                    }
-                }))
+                const styles = StyleSheet.create(
+                    (theme, rt) => ({
+                        container: {
+                            backgroundColor: {
+                                sm: theme.colors.blue
+                            },
+                            padding: {
+                                xs: rt.insets.top
+                            },
+                            uni__dependencies: [0, 9]
+                        }
+                    }),
+                    276736056
+                )
             `
         },
         {
             title: 'Should detect dependencies in calculations',
             code: `
+                import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
@@ -154,15 +165,16 @@ pluginTester({
             `,
             output: `
                 import { UnistylesShadowRegistry } from 'react-native-unistyles'
+                import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
                     return (
                         <View
-                            style={styles.container}
+                            style={[styles.container]}
                             ref={ref => {
-                                UnistylesShadowRegistry.add(ref, styles.container)
-                                return () => UnistylesShadowRegistry.remove(ref, styles.container)
+                                UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
+                                return () => UnistylesShadowRegistry.remove(ref)
                             }}
                         >
                             <Text>Hello world</Text>
@@ -170,19 +182,23 @@ pluginTester({
                     )
                 }
 
-                const styles = StyleSheet.create((theme, rt) => ({
-                    container: {
-                        marginTop: theme.gap(2) + rt.insets.bottom,
-                        marginBottom: theme.gap(2) * rt.statusBar.height,
-                        paddingTop: theme.gap(2) - rt.navigationBar.height,
-                        uni__dependencies: [0, 9, 12, 13]
-                    }
-                }))
+                const styles = StyleSheet.create(
+                    (theme, rt) => ({
+                        container: {
+                            marginTop: theme.gap(2) + rt.insets.bottom,
+                            marginBottom: theme.gap(2) * rt.statusBar.height,
+                            paddingTop: theme.gap(2) - rt.navigationBar.height,
+                            uni__dependencies: [0, 9, 12, 13]
+                        }
+                    }),
+                    276736056
+                )
             `
         },
         {
             title: 'Should detect dependencies in _web',
             code: `
+                import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
@@ -264,15 +280,16 @@ pluginTester({
             `,
             output: `
                 import { UnistylesShadowRegistry } from 'react-native-unistyles'
+                import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
                     return (
                         <View
-                            style={styles.container}
+                            style={[styles.container]}
                             ref={ref => {
-                                UnistylesShadowRegistry.add(ref, styles.container)
-                                return () => UnistylesShadowRegistry.remove(ref, styles.container)
+                                UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
+                                return () => UnistylesShadowRegistry.remove(ref)
                             }}
                         >
                             <Text>Hello world</Text>
@@ -280,80 +297,151 @@ pluginTester({
                     )
                 }
 
-                const styles = StyleSheet.create((theme, rt) => ({
-                    container: {
-                        flex: 1,
-                        display: 'flex'
-                    },
-                    static: {
-                        backgroundColor: 'pink'
-                    },
-                    staticText: {
-                        color: 'red'
-                    },
-                    theme: {
-                        backgroundColor: theme.colors.backgroundColor,
-                        uni__dependencies: [0]
-                    },
-                    themeText: {
-                        color: theme.colors.typography,
-                        uni__dependencies: [0]
-                    },
-                    themeButtonsContainer: {
-                        marginTop: 20,
-                        flexDirection: 'row',
-                        gap: 10
-                    },
-                    dynamic: state => ({
-                        backgroundColor: state % 2 === 0 ? theme.colors.fog : theme.colors.oak,
-                        uni__dependencies: [0]
-                    }),
-                    whiteText: {
-                        color: 'white',
-                        textAlign: 'center'
-                    },
-                    hover: {
-                        backgroundColor: theme.colors.blood,
-                        cursor: 'pointer',
-                        _web: {
-                            _hover: {
-                                backgroundColor: theme.colors.sky,
-                                paddingTop: rt.insets.top
-                            }
+                const styles = StyleSheet.create(
+                    (theme, rt) => ({
+                        container: {
+                            flex: 1,
+                            display: 'flex'
                         },
-                        uni__dependencies: [0, 9]
-                    },
-                    breakpoint: {
-                        backgroundColor: {
-                            xs: theme.colors.blood,
-                            md: theme.colors.sky,
-                            xl: theme.colors.aloes
+                        static: {
+                            backgroundColor: 'pink'
                         },
-                        transform: [
-                            {
-                                translateX: {
-                                    xs: rt.fontScale * 10,
-                                    md: rt.pixelRatio * 10
+                        staticText: {
+                            color: 'red'
+                        },
+                        theme: {
+                            backgroundColor: theme.colors.backgroundColor,
+                            uni__dependencies: [0]
+                        },
+                        themeText: {
+                            color: theme.colors.typography,
+                            uni__dependencies: [0]
+                        },
+                        themeButtonsContainer: {
+                            marginTop: 20,
+                            flexDirection: 'row',
+                            gap: 10
+                        },
+                        dynamic: state => ({
+                            backgroundColor: state % 2 === 0 ? theme.colors.fog : theme.colors.oak,
+                            uni__dependencies: [0]
+                        }),
+                        whiteText: {
+                            color: 'white',
+                            textAlign: 'center'
+                        },
+                        hover: {
+                            backgroundColor: theme.colors.blood,
+                            cursor: 'pointer',
+                            _web: {
+                                _hover: {
+                                    backgroundColor: theme.colors.sky,
+                                    paddingTop: rt.insets.top
                                 }
-                            }
-                        ],
+                            },
+                            uni__dependencies: [0, 9]
+                        },
+                        breakpoint: {
+                            backgroundColor: {
+                                xs: theme.colors.blood,
+                                md: theme.colors.sky,
+                                xl: theme.colors.aloes
+                            },
+                            transform: [
+                                {
+                                    translateX: {
+                                        xs: rt.fontScale * 10,
+                                        md: rt.pixelRatio * 10
+                                    }
+                                }
+                            ],
 
-                        position: 'relative',
-                        _web: {
-                            _after: {
-                                fontWeight: 'bold',
-                                content: rt.breakpoint,
-                                color: 'white',
-                                position: 'absolute',
-                                top: '60%',
-                                left: '50%',
-                                transform: 'translate(-50%, -50%)',
-                                backgroundColor: rt.colorScheme === 'dark' ? 'black' : 'white'
+                            position: 'relative',
+                            _web: {
+                                _after: {
+                                    fontWeight: 'bold',
+                                    content: rt.breakpoint,
+                                    color: 'white',
+                                    position: 'absolute',
+                                    top: '60%',
+                                    left: '50%',
+                                    transform: 'translate(-50%, -50%)',
+                                    backgroundColor: rt.colorScheme === 'dark' ? 'black' : 'white'
+                                }
+                            },
+                            uni__dependencies: [0, 11, 10, 3, 5]
+                        }
+                    }),
+                    276736056
+                )
+            `
+        },
+        {
+            title: 'Should allow user to use arrow functions with body for dynamic functions',
+            code: `
+                import { View, Text } from 'react-native'
+                import { StyleSheet } from 'react-native-unistyles'
+
+                export const Example = () => {
+                    return (
+                        <View style={styles.container}>
+                            <Text>Hello world</Text>
+                        </View>
+                    )
+                }
+
+                const styles = StyleSheet.create((theme, rt) => ({
+                    container: () => {
+                        const b = 2 + 2
+
+                        return {
+                            backgroundColor: {
+                                sm: theme.colors.blue
+                            },
+                            padding: {
+                                xs: rt.insets.top + b
                             }
-                        },
-                        uni__dependencies: [0, 11, 10, 3, 5]
+                        }
                     }
                 }))
+            `,
+            output: `
+                import { UnistylesShadowRegistry } from 'react-native-unistyles'
+                import { View, Text } from 'react-native'
+                import { StyleSheet } from 'react-native-unistyles'
+
+                export const Example = () => {
+                    return (
+                        <View
+                            style={[styles.container]}
+                            ref={ref => {
+                                UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
+                                return () => UnistylesShadowRegistry.remove(ref)
+                            }}
+                        >
+                            <Text>Hello world</Text>
+                        </View>
+                    )
+                }
+
+                const styles = StyleSheet.create(
+                    (theme, rt) => ({
+                        container: () => {
+                            const b = 2 + 2
+
+                            return {
+                                backgroundColor: {
+                                    sm: theme.colors.blue
+                                },
+                                padding: {
+                                    xs: rt.insets.top + b
+                                },
+                                uni__dependencies: [0, 9]
+                            }
+                        }
+                    }),
+                    276736056
+                )
             `
         },
     ]