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

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,15 +71,15 @@ 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)
-                                return () => UnistylesShadowRegistry.remove(ref, styles.container)
+                                UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
+                                return () => UnistylesShadowRegistry.remove(ref)
                             }}
                         >
                             <Text>Hello world</Text>
@@ -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)
+                            }}
+                        >
+                            <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)
-                                return () => UnistylesShadowRegistry.remove(_ref, styles.container)
+                                ref.current = _ref
+                                UnistylesShadowRegistry.add(_ref, styles.container, undefined, undefined)
+                                return () => UnistylesShadowRegistry.remove(_ref)
                             }}
-                            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)
+                                    UnistylesShadowRegistry.remove(ref)
                                 }
                             }}
-                            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,49 +306,54 @@ 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()
                                     })()
-                                    UnistylesShadowRegistry.remove(ref, styles.container)
+                                    UnistylesShadowRegistry.remove(ref)
                                 }
                             }}
-                            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,52 +379,57 @@ 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()
                                     })()
-                                    UnistylesShadowRegistry.remove(_ref, styles.container)
+                                    UnistylesShadowRegistry.remove(_ref)
                                 }
                             }}
-                            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,49 +455,54 @@ 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()
                                     })()
-                                    UnistylesShadowRegistry.remove(_ref, styles.container)
+                                    UnistylesShadowRegistry.remove(_ref)
                                 }
                             }}
-                            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
@@ -445,39 +523,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={myRef}
-                            style={{
-                                backgroundColor: 'red'
+                            ref={_ref => {
+                                myRef.current = _ref
+                                UnistylesShadowRegistry.add(
+                                    _ref,
+                                    {
+                                        backgroundColor: 'red'
+                                    },
+                                    undefined,
+                                    undefined
+                                )
+                                return () => UnistylesShadowRegistry.remove(_ref)
                             }}
+                            style={[{ backgroundColor: 'red' }]}
                         >
                             <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',
+            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 +592,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))()
+                                    UnistylesShadowRegistry.remove(_ref)
+                                }
                             }}
+                            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 +655,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))()
+                                    UnistylesShadowRegistry.remove(_ref)
+                                }
+                            }}
+                            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 +725,56 @@ 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)
-                            }}
-                            style={{
-                                ...styles.container,
-                                ...{
-                                    backgroundColor: 'red'
+                                myRef.current = _ref
+                                UnistylesShadowRegistry.add(_ref, styles.container, undefined, undefined)
+                                UnistylesShadowRegistry.add(
+                                    _ref,
+                                    {
+                                        backgroundColor: 'red'
+                                    },
+                                    undefined,
+                                    undefined
+                                )
+                                return () => {
+                                    ;(() => UnistylesShadowRegistry.remove(_ref))()
+                                    UnistylesShadowRegistry.remove(_ref)
                                 }
                             }}
+                            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,50 +800,61 @@ 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)
-                            }}
-                            style={[
-                                styles.container,
-                                {
-                                    backgroundColor: 'red'
+                                myRef.current = _ref
+                                UnistylesShadowRegistry.add(_ref, styles.container, undefined, undefined)
+                                UnistylesShadowRegistry.add(
+                                    _ref,
+                                    {
+                                        backgroundColor: 'red'
+                                    },
+                                    undefined,
+                                    undefined
+                                )
+                                return () => {
+                                    ;(() => UnistylesShadowRegistry.remove(_ref))()
+                                    UnistylesShadowRegistry.remove(_ref)
                                 }
-                            ]}
+                            }}
+                            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 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,17 +870,18 @@ 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, styles.container, undefined, undefined)
+                                return () => UnistylesShadowRegistry.remove(_ref)
                             }}
                             style={[styles.container]}
                         >
@@ -746,21 +890,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 +931,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)
-                                return () => UnistylesShadowRegistry.remove(_ref, styles.container)
+                                myRef.current = _ref
+                                UnistylesShadowRegistry.add(_ref, styles.container, undefined, [1, 2])
+                                return () => UnistylesShadowRegistry.remove(_ref)
                             }}
-                            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 +985,61 @@ 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)
-                                return () => UnistylesShadowRegistry.remove(_ref, styles.container)
-                            }}
-                            style={{
-                                backgroundColor: 'red',
-                                ...styles.container(1, 2, 1)
+                                myRef.current = _ref
+                                UnistylesShadowRegistry.add(_ref, styles.container, undefined, [1, 2])
+                                UnistylesShadowRegistry.add(_ref, { backgroundColor: 'red' }, undefined, undefined)
+                                return () => {
+                                    ;(() => UnistylesShadowRegistry.remove(_ref))()
+                                    UnistylesShadowRegistry.remove(_ref)
+                                }
                             }}
+                            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 +1053,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)
-                                return () => UnistylesShadowRegistry.remove(_ref, uhh.dkk)
+                                myRef.current = _ref
+                                UnistylesShadowRegistry.add(_ref, uhh.dkk, __uni__variants, [])
+                                return () => UnistylesShadowRegistry.remove(_ref)
                             }}
-                            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 +1144,284 @@ 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)
                             }}
-                            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)
-                                    return () => UnistylesShadowRegistry.remove(ref, styles.container)
+                                    UnistylesShadowRegistry.add(ref, styles.container, undefined, [1, 5])
+                                    return () => UnistylesShadowRegistry.remove(ref)
                                 }}
-                            >
-                                Hello world
-                            </Text>
-                        </View>
+                            />
+                            <View
+                                style={[styles.container(2, 6)]}
+                                ref={ref => {
+                                    UnistylesShadowRegistry.add(ref, styles.container, undefined, [2, 6])
+                                    return () => UnistylesShadowRegistry.remove(ref)
+                                }}
+                            />
+                            <View
+                                style={[styles.container(5, 1)]}
+                                ref={ref => {
+                                    UnistylesShadowRegistry.add(ref, styles.container, undefined, [5, 1])
+                                    return () => UnistylesShadowRegistry.remove(ref)
+                                }}
+                            />
+                        </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))()
+                                        UnistylesShadowRegistry.remove(ref)
+                                    }
+                                }}
+                            />
+                        </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))()
+                                        UnistylesShadowRegistry.remove(ref)
+                                    })()
+                                    UnistylesShadowRegistry.remove(ref)
+                                }
+                            }}
+                        />
+                    )
+                }
+
+                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
+                )
             `
         },
+        {
+            title: 'Should support nested styles',
+            code: `
+                import { View } from 'react-native'
+                import { StyleSheet } from 'react-native-unistyles'
+
+                export const Example = ({ styles }) => {
+                    return (
+                        <View style={styles.nested.prop} />
+                    )
+                }
+
+                const styles = StyleSheet.create(theme => ({
+                    container: {
+                        flex: 1,
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        backgroundColor: theme.colors.backgroundColor
+                    }
+                }))
+            `,
+            output: `
+                import { UnistylesShadowRegistry } from 'react-native-unistyles'
+                import { View } from 'react-native'
+                import { StyleSheet } from 'react-native-unistyles'
+
+                export const Example = ({ styles }) => {
+                    return (
+                        <View
+                            style={[styles.nested.prop]}
+                            ref={ref => {
+                                UnistylesShadowRegistry.add(ref, styles.nested.prop, undefined, undefined)
+                                return () => UnistylesShadowRegistry.remove(ref)
+                            }}
+                        />
+                    )
+                }
+
+                const styles = StyleSheet.create(
+                    theme => ({
+                        container: {
+                            flex: 1,
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            backgroundColor: theme.colors.backgroundColor,
+                            uni__dependencies: [0]
+                        }
+                    }),
+                    921918562
+                )
+            `
+        }
     ]
 })