react-native-unistyles 3.0.0-alpha.1 → 3.0.0-alpha.11

package/plugin/__tests__/ref.spec.js

@@ -14,9 +14,9 @@ pluginTester({
     },
     tests: [
         {
-            title: 'Does nothing if there is no import from Unistyles',
+            title: 'Does nothing if there is no import from React Native',
             code: `
-                import { StyleSheet } from 'react-native'
+                import { StyleSheet, View, Text } from 'custom-lib'
 
                 export const Example = () => {
                     return (
@@ -33,7 +33,7 @@ pluginTester({
                 })
             `,
             output: `
-                import { StyleSheet } from 'react-native'
+                import { StyleSheet, View, Text } from 'custom-lib'
 
                 export const Example = () => {
                     return (
@@ -51,9 +51,9 @@ pluginTester({
             `
         },
         {
-            title: 'Adds ref if there is any import from Unistyles',
+            title: 'Adds ref if there is any import from React Native',
             code: `
-                import 'react-native-unistyles'
+                import { View, Text } from 'react-native'
 
                 export const Example = () => {
                     return (
@@ -71,14 +71,14 @@ pluginTester({
             `,
             output: `
                 import { UnistylesShadowRegistry } from 'react-native-unistyles'
-                import 'react-native-unistyles'
+                import { View, Text } from 'react-native'
 
                 export const Example = () => {
                     return (
                         <View
-                            style={styles.container}
+                            style={[styles.container]}
                             ref={ref => {
-                                UnistylesShadowRegistry.add(ref, styles.container)
+                                UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
                                 return () => UnistylesShadowRegistry.remove(ref, styles.container)
                             }}
                         >
@@ -94,10 +94,63 @@ pluginTester({
                 })
             `
         },
+        {
+            title: 'Adds ref only for React Native components',
+            code: `
+                import { View } from 'react-native'
+                import { Text } from 'custom-lib'
+
+                export const Example = () => {
+                    return (
+                        <View style={styles.container}>
+                            <Text style={styles.text}>Hello world</Text>
+                        </View>
+                    )
+                }
+
+                const styles = StyleSheet.create({
+                    container: {
+                        backgroundColor: 'red'
+                    },
+                   text: {
+                        color: 'blue'
+                    }
+                })
+            `,
+            output: `
+                import { UnistylesShadowRegistry } from 'react-native-unistyles'
+                import { View } from 'react-native'
+                import { Text } from 'custom-lib'
+
+                export const Example = () => {
+                    return (
+                        <View
+                            style={[styles.container]}
+                            ref={ref => {
+                                UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
+                                return () => UnistylesShadowRegistry.remove(ref, styles.container)
+                            }}
+                        >
+                            <Text style={styles.text}>Hello world</Text>
+                        </View>
+                    )
+                }
+
+                const styles = StyleSheet.create({
+                    container: {
+                        backgroundColor: 'red'
+                    },
+                    text: {
+                        color: 'blue'
+                    }
+                })
+            `
+        },
         {
             title: 'Preserves user\'s ref',
             code: `
                 import React from 'react'
+                import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
@@ -122,6 +175,7 @@ pluginTester({
             output: `
                 import { UnistylesShadowRegistry } from 'react-native-unistyles'
                 import React from 'react'
+                import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
@@ -130,38 +184,42 @@ pluginTester({
                     return (
                         <View
                             ref={_ref => {
-                                ref = _ref
-                                UnistylesShadowRegistry.add(_ref, styles.container)
+                                ref.current = _ref
+                                UnistylesShadowRegistry.add(_ref, styles.container, undefined, undefined)
                                 return () => UnistylesShadowRegistry.remove(_ref, styles.container)
                             }}
-                            style={styles.container}
+                            style={[styles.container]}
                         >
                             <Text>Hello world</Text>
                         </View>
                     )
                 }
 
-                const styles = StyleSheet.create({
-                    container: {
-                        backgroundColor: 'red'
-                    }
-                })
+                const styles = StyleSheet.create(
+                    {
+                        container: {
+                            backgroundColor: 'red'
+                        }
+                    },
+                    921918562
+                )
             `
         },
         {
             title: 'Preserves user\'s ref as function',
             code: `
                 import { useRef } from 'react'
+                import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
-                    let myRef = useRef()
+                    const myRef = useRef()
 
                     return (
                         <View
                             ref={ref => {
                                 doSomething(ref)
-                                myRef = ref
+                                myRef.current = ref
                             }}
                             style={styles.container}
                         >
@@ -179,49 +237,54 @@ pluginTester({
             output: `
                 import { UnistylesShadowRegistry } from 'react-native-unistyles'
                 import { useRef } from 'react'
+                import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
-                    let myRef = useRef()
+                    const myRef = useRef()
 
                     return (
                         <View
                             ref={ref => {
                                 doSomething(ref)
-                                myRef = ref
-                                UnistylesShadowRegistry.add(ref, styles.container)
+                                myRef.current = ref
+                                UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
                                 return () => {
                                     UnistylesShadowRegistry.remove(ref, styles.container)
                                 }
                             }}
-                            style={styles.container}
+                            style={[styles.container]}
                         >
                             <Text>Hello world</Text>
                         </View>
                     )
                 }
 
-                const styles = StyleSheet.create({
-                    container: {
-                        backgroundColor: 'red'
-                    }
-                })
+                const styles = StyleSheet.create(
+                    {
+                        container: {
+                            backgroundColor: 'red'
+                        }
+                    },
+                    921918562
+                )
             `
         },
         {
             title: 'Preserves user\'s ref as function with cleanup',
             code: `
                 import React from 'react'
+                import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
-                    let myRef = React.useRef()
+                    const myRef = React.useRef()
 
                     return (
                         <View
                             ref={ref => {
                                 doSomething(ref)
-                                myRef = ref
+                                myRef.current = ref
 
                                 return () => {
                                     customCleanup()
@@ -243,17 +306,18 @@ pluginTester({
             output: `
                 import { UnistylesShadowRegistry } from 'react-native-unistyles'
                 import React from 'react'
+                import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
-                    let myRef = React.useRef()
+                    const myRef = React.useRef()
 
                     return (
                         <View
                             ref={ref => {
                                 doSomething(ref)
-                                myRef = ref
-                                UnistylesShadowRegistry.add(ref, styles.container)
+                                myRef.current = ref
+                                UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
                                 return () => {
                                     ;(() => {
                                         customCleanup()
@@ -261,31 +325,35 @@ pluginTester({
                                     UnistylesShadowRegistry.remove(ref, styles.container)
                                 }
                             }}
-                            style={styles.container}
+                            style={[styles.container]}
                         >
                             <Text>Hello world</Text>
                         </View>
                     )
                 }
 
-                const styles = StyleSheet.create({
-                    container: {
-                        backgroundColor: 'red'
-                    }
-                })
+                const styles = StyleSheet.create(
+                    {
+                        container: {
+                            backgroundColor: 'red'
+                        }
+                    },
+                    921918562
+                )
             `
         },
         {
             title: 'Preserves user\'s ref as assigned arrow function',
             code: `
                 import React from 'react'
+                import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
-                    let myRef = React.useRef()
+                    const myRef = React.useRef()
                     const fn = ref => {
                         doSomething(ref)
-                        myRef = ref
+                        myRef.current = ref
 
                         return () => {
                             customCleanup2()
@@ -311,20 +379,21 @@ pluginTester({
             output: `
                 import { UnistylesShadowRegistry } from 'react-native-unistyles'
                 import React from 'react'
+                import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
-                    let myRef = React.useRef()
+                    const myRef = React.useRef()
                     const fn = ref => {
                         doSomething(ref)
-                        myRef = ref
+                        myRef.current = ref
                     }
 
                     return (
                         <View
                             ref={_ref => {
                                 fn(_ref)
-                                UnistylesShadowRegistry.add(_ref, styles.container)
+                                UnistylesShadowRegistry.add(_ref, styles.container, undefined, undefined)
                                 return () => {
                                     ;(() => {
                                         customCleanup2()
@@ -332,31 +401,35 @@ pluginTester({
                                     UnistylesShadowRegistry.remove(_ref, styles.container)
                                 }
                             }}
-                            style={styles.container}
+                            style={[styles.container]}
                         >
                             <Text>Hello world</Text>
                         </View>
                     )
                 }
 
-                const styles = StyleSheet.create({
-                    container: {
-                        backgroundColor: 'red'
-                    }
-                })
+                const styles = StyleSheet.create(
+                    {
+                        container: {
+                            backgroundColor: 'red'
+                        }
+                    },
+                    921918562
+                )
             `
         },
         {
             title: 'Preserves user\'s ref as assigned function function',
             code: `
                 import React from 'react'
+                import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
-                    let myRef = React.useRef()
+                    const myRef = React.useRef()
                     function fn(ref) {
                         doSomething(ref)
-                        myRef = ref
+                        myRef.current = ref
 
                         return () => {
                             customCleanup2()
@@ -382,20 +455,21 @@ pluginTester({
             output: `
                 import { UnistylesShadowRegistry } from 'react-native-unistyles'
                 import React from 'react'
+                import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
-                    let myRef = React.useRef()
+                    const myRef = React.useRef()
                     function fn(ref) {
                         doSomething(ref)
-                        myRef = ref
+                        myRef.current = ref
                     }
 
                     return (
                         <View
                             ref={_ref => {
                                 fn(_ref)
-                                UnistylesShadowRegistry.add(_ref, styles.container)
+                                UnistylesShadowRegistry.add(_ref, styles.container, undefined, undefined)
                                 return () => {
                                     ;(() => {
                                         customCleanup2()
@@ -403,28 +477,32 @@ pluginTester({
                                     UnistylesShadowRegistry.remove(_ref, styles.container)
                                 }
                             }}
-                            style={styles.container}
+                            style={[styles.container]}
                         >
                             <Text>Hello world</Text>
                         </View>
                     )
                 }
 
-                const styles = StyleSheet.create({
-                    container: {
-                        backgroundColor: 'red'
-                    }
-                })
+                const styles = StyleSheet.create(
+                    {
+                        container: {
+                            backgroundColor: 'red'
+                        }
+                    },
+                    921918562
+                )
             `
         },
         {
             title: 'Should not modify ref if user is using inline styles',
             code: `
                 import { useRef } from 'react'
+                import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
-                    let myRef = useRef()
+                    const myRef = useRef()
 
                     return (
                         <View
@@ -446,10 +524,11 @@ pluginTester({
             `,
             output: `
                 import { useRef } from 'react'
+                import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
-                    let myRef = useRef()
+                    const myRef = useRef()
 
                     return (
                         <View
@@ -463,21 +542,25 @@ pluginTester({
                     )
                 }
 
-                const styles = StyleSheet.create({
-                    container: {
-                        backgroundColor: 'red'
-                    }
-                })
+                const styles = StyleSheet.create(
+                    {
+                        container: {
+                            backgroundColor: 'red'
+                        }
+                    },
+                    921918562
+                )
             `
         },
         {
-            title: 'Should not modify ref if user is not member accessing styles',
+            title: 'Should modify ref if user is not member accessing styles',
             code: `
                 import { useRef } from 'react'
+                import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
-                    let myRef = useRef()
+                    const myRef = useRef()
 
                     return (
                         <View
@@ -499,40 +582,51 @@ pluginTester({
                 })
             `,
             output: `
+                import { UnistylesShadowRegistry } from 'react-native-unistyles'
                 import { useRef } from 'react'
+                import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
-                    let myRef = useRef()
+                    const myRef = useRef()
 
                     return (
                         <View
-                            ref={myRef}
-                            style={{
-                                ...obj1,
-                                ...obj2
+                            ref={_ref => {
+                                myRef.current = _ref
+                                UnistylesShadowRegistry.add(_ref, obj1, undefined, undefined)
+                                UnistylesShadowRegistry.add(_ref, obj2, undefined, undefined)
+                                return () => {
+                                    ;(() => UnistylesShadowRegistry.remove(_ref, obj1))()
+                                    UnistylesShadowRegistry.remove(_ref, obj2)
+                                }
                             }}
+                            style={[obj1, obj2]}
                         >
                             <Text>Hello world</Text>
                         </View>
                     )
                 }
 
-                const styles = StyleSheet.create({
-                    container: {
-                        backgroundColor: 'red'
-                    }
-                })
+                const styles = StyleSheet.create(
+                    {
+                        container: {
+                            backgroundColor: 'red'
+                        }
+                    },
+                    921918562
+                )
             `
         },
         {
-            title: 'Should not modify ref if user is not member accessing styles in array',
+            title: 'Should modify ref if user is not member accessing styles in array',
             code: `
                 import { useRef } from 'react'
+                import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
-                    let myRef = useRef()
+                    const myRef = useRef()
 
                     return (
                         <View
@@ -551,34 +645,51 @@ pluginTester({
                 })
             `,
             output: `
+                import { UnistylesShadowRegistry } from 'react-native-unistyles'
                 import { useRef } from 'react'
+                import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
-                    let myRef = useRef()
+                    const myRef = useRef()
 
                     return (
-                        <View ref={myRef} style={[obj1, obj2]}>
+                        <View
+                            ref={_ref => {
+                                myRef.current = _ref
+                                UnistylesShadowRegistry.add(_ref, obj1, undefined, undefined)
+                                UnistylesShadowRegistry.add(_ref, obj2, undefined, undefined)
+                                return () => {
+                                    ;(() => UnistylesShadowRegistry.remove(_ref, obj1))()
+                                    UnistylesShadowRegistry.remove(_ref, obj2)
+                                }
+                            }}
+                            style={[obj1, obj2]}
+                        >
                             <Text>Hello world</Text>
                         </View>
                     )
                 }
 
-                const styles = StyleSheet.create({
-                    container: {
-                        backgroundColor: 'red'
-                    }
-                })
+                const styles = StyleSheet.create(
+                    {
+                        container: {
+                            backgroundColor: 'red'
+                        }
+                    },
+                    921918562
+                )
             `
         },
         {
             title: 'Should modify ref if user is using spreads on styles',
             code: `
                 import { useRef } from 'react'
+                import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
-                    let myRef = useRef()
+                    const myRef = useRef()
 
                     return (
                         <View
@@ -604,45 +715,50 @@ pluginTester({
             output: `
                 import { UnistylesShadowRegistry } from 'react-native-unistyles'
                 import { useRef } from 'react'
+                import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
-                    let myRef = useRef()
+                    const myRef = useRef()
 
                     return (
                         <View
                             ref={_ref => {
-                                myRef = _ref
-                                UnistylesShadowRegistry.add(_ref, styles.container)
+                                myRef.current = _ref
+                                UnistylesShadowRegistry.add(_ref, styles.container, undefined, undefined)
                                 return () => UnistylesShadowRegistry.remove(_ref, styles.container)
                             }}
-                            style={{
-                                ...styles.container,
-                                ...{
+                            style={[
+                                styles.container,
+                                {
                                     backgroundColor: 'red'
                                 }
-                            }}
+                            ]}
                         >
                             <Text>Hello world</Text>
                         </View>
                     )
                 }
 
-                const styles = StyleSheet.create({
-                    container: {
-                        backgroundColor: 'red'
-                    }
-                })
+                const styles = StyleSheet.create(
+                    {
+                        container: {
+                            backgroundColor: 'red'
+                        }
+                    },
+                    921918562
+                )
             `
         },
         {
             title: 'Should modify ref if user is using array for styles',
             code: `
                 import { useRef } from 'react'
+                import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
-                    let myRef = useRef()
+                    const myRef = useRef()
 
                     return (
                         <View
@@ -668,16 +784,17 @@ pluginTester({
             output: `
                 import { UnistylesShadowRegistry } from 'react-native-unistyles'
                 import { useRef } from 'react'
+                import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
-                    let myRef = useRef()
+                    const myRef = useRef()
 
                     return (
                         <View
                             ref={_ref => {
-                                myRef = _ref
-                                UnistylesShadowRegistry.add(_ref, styles.container)
+                                myRef.current = _ref
+                                UnistylesShadowRegistry.add(_ref, styles.container, undefined, undefined)
                                 return () => UnistylesShadowRegistry.remove(_ref, styles.container)
                             }}
                             style={[
@@ -692,26 +809,30 @@ pluginTester({
                     )
                 }
 
-                const styles = StyleSheet.create({
-                    container: {
-                        backgroundColor: 'red'
-                    }
-                })
+                const styles = StyleSheet.create(
+                    {
+                        container: {
+                            backgroundColor: 'red'
+                        }
+                    },
+                    921918562
+                )
             `
         },
         {
             title: 'Should modify ref if user is using single style in array',
             code: `
                 import { useRef } from 'react'
+                import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
-                    let myRef = useRef()
+                    const myRef = useRef()
 
                     return (
                         <View
                             ref={myRef}
-                            style={[styles.container]}
+                            style={styles.container}
                         >
                             <Text>Hello world</Text>
                         </View>
@@ -727,16 +848,17 @@ pluginTester({
             output: `
                 import { UnistylesShadowRegistry } from 'react-native-unistyles'
                 import { useRef } from 'react'
+                import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
-                    let myRef = useRef()
+                    const myRef = useRef()
 
                     return (
                         <View
                             ref={_ref => {
-                                myRef = _ref
-                                UnistylesShadowRegistry.add(_ref, styles.container)
+                                myRef.current = _ref
+                                UnistylesShadowRegistry.add(_ref, styles.container, undefined, undefined)
                                 return () => UnistylesShadowRegistry.remove(_ref, styles.container)
                             }}
                             style={[styles.container]}
@@ -746,21 +868,25 @@ pluginTester({
                     )
                 }
 
-                const styles = StyleSheet.create({
-                    container: {
-                        backgroundColor: 'red'
-                    }
-                })
+                const styles = StyleSheet.create(
+                    {
+                        container: {
+                            backgroundColor: 'red'
+                        }
+                    },
+                    921918562
+                )
             `
         },
         {
             title: 'Should modify ref if user is using dynamic function in array',
             code: `
                 import { useRef } from 'react'
+                import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
-                    let myRef = useRef()
+                    const myRef = useRef()
 
                     return (
                         <View
@@ -783,40 +909,45 @@ pluginTester({
             output: `
                 import { UnistylesShadowRegistry } from 'react-native-unistyles'
                 import { useRef } from 'react'
+                import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
-                    let myRef = useRef()
+                    const myRef = useRef()
 
                     return (
                         <View
                             ref={_ref => {
-                                myRef = _ref
-                                UnistylesShadowRegistry.add(_ref, styles.container)
+                                myRef.current = _ref
+                                UnistylesShadowRegistry.add(_ref, styles.container, undefined, [1, 2])
                                 return () => UnistylesShadowRegistry.remove(_ref, styles.container)
                             }}
-                            style={[styles.container(1, 2, 1)]}
+                            style={[styles.container(1, 2)]}
                         >
                             <Text>Hello world</Text>
                         </View>
                     )
                 }
 
-                const styles = StyleSheet.create({
-                    container: () => ({
-                        backgroundColor: 'red'
-                    })
-                })
+                const styles = StyleSheet.create(
+                    {
+                        container: () => ({
+                            backgroundColor: 'red'
+                        })
+                    },
+                    921918562
+                )
             `
         },
         {
             title: 'Should modify ref if user is using dynamic function in object',
             code: `
                 import { useRef } from 'react'
+                import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
-                    let myRef = useRef()
+                    const myRef = useRef()
 
                     return (
                         <View
@@ -832,51 +963,57 @@ pluginTester({
                 }
 
                 const styles = StyleSheet.create({
-                    container: () => ({
+                    container: {
                         backgroundColor: 'red'
-                    })
+                    }
                 })
             `,
             output: `
                 import { UnistylesShadowRegistry } from 'react-native-unistyles'
                 import { useRef } from 'react'
+                import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
-                    let myRef = useRef()
+                    const myRef = useRef()
 
                     return (
                         <View
                             ref={_ref => {
-                                myRef = _ref
-                                UnistylesShadowRegistry.add(_ref, styles.container)
+                                myRef.current = _ref
+                                UnistylesShadowRegistry.add(_ref, styles.container, undefined, [1, 2])
                                 return () => UnistylesShadowRegistry.remove(_ref, styles.container)
                             }}
-                            style={{
-                                backgroundColor: 'red',
-                                ...styles.container(1, 2, 1)
-                            }}
+                            style={[{ backgroundColor: 'red' }, styles.container(1, 2)]}
                         >
                             <Text>Hello world</Text>
                         </View>
                     )
                 }
 
-                const styles = StyleSheet.create({
-                    container: () => ({
-                        backgroundColor: 'red'
-                    })
-                })
+                const styles = StyleSheet.create(
+                    {
+                        container: {
+                            backgroundColor: 'red'
+                        }
+                    },
+                    921918562
+                )
             `
         },
         {
-            title: 'Should modify registry names if user changes name of member expression',
+            title: 'It should extract variants and pass them to ShadowReigstry',
             code: `
                 import { useRef } from 'react'
+                import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
-                    let myRef = useRef()
+                    const myRef = useRef()
+
+                    styles.useVariants({
+                        size: 'default'
+                    })
 
                     return (
                         <View
@@ -890,62 +1027,90 @@ pluginTester({
 
                 const uhh = StyleSheet.create({
                     dkk: () => ({
-                        backgroundColor: 'red'
+                        backgroundColor: 'red',
+                        variants: {
+                            size: {
+                                small: {
+                                    backgroundColor: 'blue'
+                                },
+                                default: {
+                                    backgroundColor: 'green'
+                                }
+                            }
+                        }
                     })
                 })
             `,
             output: `
                 import { UnistylesShadowRegistry } from 'react-native-unistyles'
                 import { useRef } from 'react'
+                import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
-                    let myRef = useRef()
+                    const myRef = useRef()
+                    const __uni__variants = {
+                        size: 'default'
+                    }
+                    styles.useVariants(__uni__variants)
 
                     return (
                         <View
                             ref={_ref => {
-                                myRef = _ref
-                                UnistylesShadowRegistry.add(_ref, uhh.dkk)
+                                myRef.current = _ref
+                                UnistylesShadowRegistry.add(_ref, uhh.dkk, __uni__variants, [])
                                 return () => UnistylesShadowRegistry.remove(_ref, uhh.dkk)
                             }}
-                            style={uhh.dkk(1)}
+                            style={[uhh.dkk()]}
                         >
                             <Text>Hello world</Text>
                         </View>
                     )
                 }
 
-                const uhh = StyleSheet.create({
-                    dkk: () => ({
-                        backgroundColor: 'red'
-                    })
-                })
+                const uhh = StyleSheet.create(
+                    {
+                        dkk: () => ({
+                            backgroundColor: 'red',
+                            variants: {
+                                size: {
+                                    small: {
+                                        backgroundColor: 'blue'
+                                    },
+                                    default: {
+                                        backgroundColor: 'green'
+                                    }
+                                }
+                            },
+                            uni__dependencies: [4]
+                        })
+                    },
+                    921918562
+                )
             `
         },
         {
-            title: 'Should increment counter for web dynamic functions',
+            title: 'Should modify registry names if user changes name of member expression',
             code: `
                 import { useRef } from 'react'
+                import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
-                    let myRef = useRef()
+                    const myRef = useRef()
 
                     return (
                         <View
                             ref={myRef}
-                            style={styles.container()}
+                            style={uhh.dkk()}
                         >
-                            <Text style={styles.container()}>
-                                Hello world
-                            </Text>
+                            <Text>Hello world</Text>
                         </View>
                     )
                 }
 
-                const styles = StyleSheet.create({
-                    container: () => ({
+                const uhh = StyleSheet.create({
+                    dkk: () => ({
                         backgroundColor: 'red'
                     })
                 })
@@ -953,39 +1118,232 @@ pluginTester({
             output: `
                 import { UnistylesShadowRegistry } from 'react-native-unistyles'
                 import { useRef } from 'react'
+                import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
-                    let myRef = useRef()
+                    const myRef = useRef()
 
                     return (
                         <View
                             ref={_ref => {
-                                myRef = _ref
-                                UnistylesShadowRegistry.add(_ref, styles.container)
-                                return () => UnistylesShadowRegistry.remove(_ref, styles.container)
+                                myRef.current = _ref
+                                UnistylesShadowRegistry.add(_ref, uhh.dkk, undefined, [])
+                                return () => UnistylesShadowRegistry.remove(_ref, uhh.dkk)
                             }}
-                            style={styles.container(1)}
+                            style={[uhh.dkk()]}
                         >
-                            <Text
-                                style={styles.container(2)}
+                            <Text>Hello world</Text>
+                        </View>
+                    )
+                }
+
+                const uhh = StyleSheet.create(
+                    {
+                        dkk: () => ({
+                            backgroundColor: 'red'
+                        })
+                    },
+                    921918562
+                )
+            `
+        },
+        {
+            title: 'Should pass ref for dynamic functions to bind it to shadow node',
+            code: `
+                import { View } from 'react-native'
+                import { StyleSheet } from 'react-native-unistyles'
+
+                export const Example = () => {
+                    return (
+                        <React.Fragment>
+                            <View style={styles.container(1, 5)} />
+                            <View style={styles.container(2, 6)} />
+                            <View style={styles.container(5, 1)} />
+                        </React.Fragment>
+                    )
+                }
+
+                const styles = StyleSheet.create({
+                    container: (flex, gap) => ({
+                        flex,
+                        gap
+                    })
+                })
+            `,
+            output: `
+                import { UnistylesShadowRegistry } from 'react-native-unistyles'
+                import { View } from 'react-native'
+                import { StyleSheet } from 'react-native-unistyles'
+
+                export const Example = () => {
+                    return (
+                        <React.Fragment>
+                            <View
+                                style={[styles.container(1, 5)]}
                                 ref={ref => {
-                                    UnistylesShadowRegistry.add(ref, styles.container)
+                                    UnistylesShadowRegistry.add(ref, styles.container, undefined, [1, 5])
                                     return () => UnistylesShadowRegistry.remove(ref, styles.container)
                                 }}
-                            >
-                                Hello world
-                            </Text>
-                        </View>
+                            />
+                            <View
+                                style={[styles.container(2, 6)]}
+                                ref={ref => {
+                                    UnistylesShadowRegistry.add(ref, styles.container, undefined, [2, 6])
+                                    return () => UnistylesShadowRegistry.remove(ref, styles.container)
+                                }}
+                            />
+                            <View
+                                style={[styles.container(5, 1)]}
+                                ref={ref => {
+                                    UnistylesShadowRegistry.add(ref, styles.container, undefined, [5, 1])
+                                    return () => UnistylesShadowRegistry.remove(ref, styles.container)
+                                }}
+                            />
+                        </React.Fragment>
+                    )
+                }
+
+                const styles = StyleSheet.create(
+                    {
+                        container: (flex, gap) => ({
+                            flex,
+                            gap
+                        })
+                    },
+                    921918562
+                )
+            `
+        },
+        {
+            title: 'Should pass refs for dynamic functions',
+            code: `
+                import { View } from 'react-native'
+                import { StyleSheet } from 'react-native-unistyles'
+
+                export const Example = () => {
+                    return (
+                        <React.Fragment>
+                            <View style={[styles.container(1, 5), styles.container2(1, 6)]} />
+                        </React.Fragment>
                     )
                 }
 
                 const styles = StyleSheet.create({
-                    container: () => ({
-                        backgroundColor: 'red'
+                    container: (flex, gap) => ({
+                        flex,
+                        gap
                     })
                 })
+            `,
+            output: `
+                import { UnistylesShadowRegistry } from 'react-native-unistyles'
+                import { View } from 'react-native'
+                import { StyleSheet } from 'react-native-unistyles'
+
+                export const Example = () => {
+                    return (
+                        <React.Fragment>
+                            <View
+                                style={[styles.container(1, 5), styles.container2(1, 6)]}
+                                ref={ref => {
+                                    UnistylesShadowRegistry.add(ref, styles.container, undefined, [1, 5])
+                                    UnistylesShadowRegistry.add(ref, styles.container2, undefined, [1, 6])
+                                    return () => {
+                                        ;(() => UnistylesShadowRegistry.remove(ref, styles.container))()
+                                        UnistylesShadowRegistry.remove(ref, styles.container2)
+                                    }
+                                }}
+                            />
+                        </React.Fragment>
+                    )
+                }
+
+                const styles = StyleSheet.create(
+                    {
+                        container: (flex, gap) => ({
+                            flex,
+                            gap
+                        })
+                    },
+                    921918562
+                )
             `
         },
+        {
+            title: 'Should keep order of spreads',
+            code: `
+                import { View } from 'react-native'
+                import { StyleSheet } from 'react-native-unistyles'
+
+                export const Example = () => {
+                    return (
+                        <View style={{...styles.container, ...styles.secondProp, ...styles.thirdProp}} />
+                    )
+                }
+
+                const styles = StyleSheet.create(theme => ({
+                    container: {
+                        flex: 1,
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        backgroundColor: theme.colors.backgroundColor
+                    },
+                    secondProp: {
+                        marginHorizontal: theme.gap(10),
+                        backgroundColor: 'red'
+                    },
+                    thirdProp: {
+                        backgroundColor: 'blue'
+                    }
+                }))
+            `,
+            output: `
+                import { UnistylesShadowRegistry } from 'react-native-unistyles'
+                import { View } from 'react-native'
+                import { StyleSheet } from 'react-native-unistyles'
+
+                export const Example = () => {
+                    return (
+                        <View
+                            style={[styles.container, styles.secondProp, styles.thirdProp]}
+                            ref={ref => {
+                                UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
+                                UnistylesShadowRegistry.add(ref, styles.secondProp, undefined, undefined)
+                                UnistylesShadowRegistry.add(ref, styles.thirdProp, undefined, undefined)
+                                return () => {
+                                    ;(() => {
+                                        ;(() => UnistylesShadowRegistry.remove(ref, styles.container))()
+                                        UnistylesShadowRegistry.remove(ref, styles.secondProp)
+                                    })()
+                                    UnistylesShadowRegistry.remove(ref, styles.thirdProp)
+                                }
+                            }}
+                        />
+                    )
+                }
+
+                const styles = StyleSheet.create(
+                    theme => ({
+                        container: {
+                            flex: 1,
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            backgroundColor: theme.colors.backgroundColor,
+                            uni__dependencies: [0]
+                        },
+                        secondProp: {
+                            marginHorizontal: theme.gap(10),
+                            backgroundColor: 'red',
+                            uni__dependencies: [0]
+                        },
+                        thirdProp: {
+                            backgroundColor: 'blue'
+                        }
+                    }),
+                    921918562
+                )
+            `
+        }
     ]
 })