react-native-unistyles 3.0.0-alpha.7 → 3.0.0-alpha.9

package/lib/typescript/src/web/variants/getVariants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getVariants.d.ts","sourceRoot":"","sources":["../../../../../src/web/variants/getVariants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAWpE,eAAO,MAAM,WAAW,WAAY,qBAAqB,CAAC,UAAU,CAAC,oBAAoB,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,+BA8B3G,CAAA"}

package/lib/typescript/src/web/variants/index.d.ts

@@ -0,0 +1,3 @@
+export * from './useVariants';
+export * from './getVariants';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/web/variants/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/web/variants/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA"}

package/lib/typescript/src/web/variants/useVariants.d.ts

@@ -0,0 +1,3 @@
+import type { ReactNativeStyleSheet, StyleSheet } from '../../types';
+export declare const createUseVariants: (styles: ReactNativeStyleSheet<StyleSheet>, setSelectedVariants: (variants: Record<string, any>) => void) => void;
+//# sourceMappingURL=useVariants.d.ts.map

package/lib/typescript/src/web/variants/useVariants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useVariants.d.ts","sourceRoot":"","sources":["../../../../../src/web/variants/useVariants.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAKpE,eAAO,MAAM,iBAAiB,WAAY,qBAAqB,CAAC,UAAU,CAAC,uBAAuB,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,SAuExI,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-unistyles",
-  "version": "3.0.0-alpha.7",
+  "version": "3.0.0-alpha.9",
   "description": "Level up your React Native StyleSheet",
   "scripts": {
     "test": "jest",

package/plugin/__tests__/dependencies.spec.js

@@ -51,7 +51,7 @@ pluginTester({
                         <View
                             style={styles.container}
                             ref={ref => {
-                                UnistylesShadowRegistry.add(ref, styles.container, undefined)
+                                UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
                                 return () => UnistylesShadowRegistry.remove(ref, styles.container)
                             }}
                         >
@@ -112,7 +112,7 @@ pluginTester({
                         <View
                             style={styles.container}
                             ref={ref => {
-                                UnistylesShadowRegistry.add(ref, styles.container, undefined)
+                                UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
                                 return () => UnistylesShadowRegistry.remove(ref, styles.container)
                             }}
                         >
@@ -167,7 +167,7 @@ pluginTester({
                         <View
                             style={styles.container}
                             ref={ref => {
-                                UnistylesShadowRegistry.add(ref, styles.container, undefined)
+                                UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
                                 return () => UnistylesShadowRegistry.remove(ref, styles.container)
                             }}
                         >
@@ -280,7 +280,7 @@ pluginTester({
                         <View
                             style={styles.container}
                             ref={ref => {
-                                UnistylesShadowRegistry.add(ref, styles.container, undefined)
+                                UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
                                 return () => UnistylesShadowRegistry.remove(ref, styles.container)
                             }}
                         >
@@ -405,7 +405,7 @@ pluginTester({
                         <View
                             style={styles.container}
                             ref={ref => {
-                                UnistylesShadowRegistry.add(ref, styles.container, undefined)
+                                UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
                                 return () => UnistylesShadowRegistry.remove(ref, styles.container)
                             }}
                         >

package/plugin/__tests__/ref.spec.js

@@ -78,7 +78,7 @@ pluginTester({
                         <View
                             style={styles.container}
                             ref={ref => {
-                                UnistylesShadowRegistry.add(ref, styles.container, undefined)
+                                UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
                                 return () => UnistylesShadowRegistry.remove(ref, styles.container)
                             }}
                         >
@@ -131,7 +131,7 @@ pluginTester({
                         <View
                             ref={_ref => {
                                 ref.current = _ref
-                                UnistylesShadowRegistry.add(_ref, styles.container, undefined)
+                                UnistylesShadowRegistry.add(_ref, styles.container, undefined, undefined)
                                 return () => UnistylesShadowRegistry.remove(_ref, styles.container)
                             }}
                             style={styles.container}
@@ -192,7 +192,7 @@ pluginTester({
                             ref={ref => {
                                 doSomething(ref)
                                 myRef.current = ref
-                                UnistylesShadowRegistry.add(ref, styles.container, undefined)
+                                UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
                                 return () => {
                                     UnistylesShadowRegistry.remove(ref, styles.container)
                                 }
@@ -259,7 +259,7 @@ pluginTester({
                             ref={ref => {
                                 doSomething(ref)
                                 myRef.current = ref
-                                UnistylesShadowRegistry.add(ref, styles.container, undefined)
+                                UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
                                 return () => {
                                     ;(() => {
                                         customCleanup()
@@ -333,7 +333,7 @@ pluginTester({
                         <View
                             ref={_ref => {
                                 fn(_ref)
-                                UnistylesShadowRegistry.add(_ref, styles.container, undefined)
+                                UnistylesShadowRegistry.add(_ref, styles.container, undefined, undefined)
                                 return () => {
                                     ;(() => {
                                         customCleanup2()
@@ -407,7 +407,7 @@ pluginTester({
                         <View
                             ref={_ref => {
                                 fn(_ref)
-                                UnistylesShadowRegistry.add(_ref, styles.container, undefined)
+                                UnistylesShadowRegistry.add(_ref, styles.container, undefined, undefined)
                                 return () => {
                                     ;(() => {
                                         customCleanup2()
@@ -637,7 +637,7 @@ pluginTester({
                         <View
                             ref={_ref => {
                                 myRef.current = _ref
-                                UnistylesShadowRegistry.add(_ref, styles.container, undefined)
+                                UnistylesShadowRegistry.add(_ref, styles.container, undefined, undefined)
                                 return () => UnistylesShadowRegistry.remove(_ref, styles.container)
                             }}
                             style={{
@@ -704,7 +704,7 @@ pluginTester({
                         <View
                             ref={_ref => {
                                 myRef.current = _ref
-                                UnistylesShadowRegistry.add(_ref, styles.container, undefined)
+                                UnistylesShadowRegistry.add(_ref, styles.container, undefined, undefined)
                                 return () => UnistylesShadowRegistry.remove(_ref, styles.container)
                             }}
                             style={[
@@ -766,7 +766,7 @@ pluginTester({
                         <View
                             ref={_ref => {
                                 myRef.current = _ref
-                                UnistylesShadowRegistry.add(_ref, styles.container, undefined)
+                                UnistylesShadowRegistry.add(_ref, styles.container, undefined, undefined)
                                 return () => UnistylesShadowRegistry.remove(_ref, styles.container)
                             }}
                             style={[styles.container]}
@@ -825,7 +825,7 @@ pluginTester({
                         <View
                             ref={_ref => {
                                 myRef.current = _ref
-                                UnistylesShadowRegistry.add(_ref, styles.container, undefined)
+                                UnistylesShadowRegistry.add(_ref, styles.container, undefined, [1, 2])
                                 return () => UnistylesShadowRegistry.remove(_ref, styles.container)
                             }}
                             style={[styles.container(1, 2)]}
@@ -885,13 +885,10 @@ pluginTester({
                         <View
                             ref={_ref => {
                                 myRef.current = _ref
-                                UnistylesShadowRegistry.add(_ref, styles.container, undefined)
+                                UnistylesShadowRegistry.add(_ref, styles.container, undefined, [1, 2])
                                 return () => UnistylesShadowRegistry.remove(_ref, styles.container)
                             }}
-                            style={{
-                                backgroundColor: 'red',
-                                ...styles.container(1, 2)
-                            }}
+                            style={{ backgroundColor: 'red', ...styles.container(1, 2) }}
                         >
                             <Text>Hello world</Text>
                         </View>
@@ -963,7 +960,7 @@ pluginTester({
                         <View
                             ref={_ref => {
                                 myRef.current = _ref
-                                UnistylesShadowRegistry.add(_ref, uhh.dkk, __uni__variants)
+                                UnistylesShadowRegistry.add(_ref, uhh.dkk, __uni__variants, [])
                                 return () => UnistylesShadowRegistry.remove(_ref, uhh.dkk)
                             }}
                             style={uhh.dkk()}
@@ -1031,7 +1028,7 @@ pluginTester({
                         <View
                             ref={_ref => {
                                 myRef.current = _ref
-                                UnistylesShadowRegistry.add(_ref, uhh.dkk, undefined)
+                                UnistylesShadowRegistry.add(_ref, uhh.dkk, undefined, [])
                                 return () => UnistylesShadowRegistry.remove(_ref, uhh.dkk)
                             }}
                             style={uhh.dkk()}
@@ -1050,6 +1047,124 @@ pluginTester({
                     921918562
                 )
             `
+        },
+        {
+            title: 'Should pass ref for dynamic functions to bind it to shadow node',
+            code: `
+                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 { StyleSheet } from 'react-native-unistyles'
+
+                export const Example = () => {
+                    return (
+                        <React.Fragment>
+                            <View
+                                style={styles.container(1, 5)}
+                                ref={ref => {
+                                    UnistylesShadowRegistry.add(ref, styles.container, undefined, [1, 5])
+                                    return () => UnistylesShadowRegistry.remove(ref, styles.container)
+                                }}
+                            />
+                            <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 { 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: (flex, gap) => ({
+                        flex,
+                        gap
+                    })
+                })
+            `,
+            output: `
+                import { UnistylesShadowRegistry } from 'react-native-unistyles'
+                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
+                )
+            `
         }
     ]
 })

package/plugin/__tests__/stylesheet.spec.js

@@ -41,7 +41,7 @@ pluginTester({
                         <View
                             style={styles.container}
                             ref={ref => {
-                                UnistylesShadowRegistry.add(ref, styles.container, undefined)
+                                UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
                                 return () => UnistylesShadowRegistry.remove(ref, styles.container)
                             }}
                         >
@@ -88,7 +88,7 @@ pluginTester({
                         <View
                             style={styles.container}
                             ref={ref => {
-                                UnistylesShadowRegistry.add(ref, styles.container, undefined)
+                                UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
                                 return () => UnistylesShadowRegistry.remove(ref, styles.container)
                             }}
                         >
@@ -136,7 +136,7 @@ pluginTester({
                         <View
                             style={styles.container}
                             ref={ref => {
-                                UnistylesShadowRegistry.add(ref, styles.container, undefined)
+                                UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
                                 return () => UnistylesShadowRegistry.remove(ref, styles.container)
                             }}
                         >
@@ -185,7 +185,7 @@ pluginTester({
                         <View
                             style={styles.container}
                             ref={ref => {
-                                UnistylesShadowRegistry.add(ref, styles.container, undefined)
+                                UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
                                 return () => UnistylesShadowRegistry.remove(ref, styles.container)
                             }}
                         >
@@ -235,7 +235,7 @@ pluginTester({
                         <View
                             style={styles.container}
                             ref={ref => {
-                                UnistylesShadowRegistry.add(ref, styles.container, undefined)
+                                UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
                                 return () => UnistylesShadowRegistry.remove(ref, styles.container)
                             }}
                         >
@@ -286,7 +286,7 @@ pluginTester({
                         <View
                             style={styles.container}
                             ref={ref => {
-                                UnistylesShadowRegistry.add(ref, styles.container, undefined)
+                                UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
                                 return () => UnistylesShadowRegistry.remove(ref, styles.container)
                             }}
                         >
@@ -338,7 +338,7 @@ pluginTester({
                         <View
                             style={styles.container}
                             ref={ref => {
-                                UnistylesShadowRegistry.add(ref, styles.container, undefined)
+                                UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
                                 return () => UnistylesShadowRegistry.remove(ref, styles.container)
                             }}
                         >
@@ -392,7 +392,7 @@ pluginTester({
                         <View
                             style={styles.container}
                             ref={ref => {
-                                UnistylesShadowRegistry.add(ref, styles.container, undefined)
+                                UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
                                 return () => UnistylesShadowRegistry.remove(ref, styles.container)
                             }}
                         >
@@ -454,7 +454,7 @@ pluginTester({
                         <View
                             style={styles.container}
                             ref={ref => {
-                                UnistylesShadowRegistry.add(ref, styles.container, undefined)
+                                UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
                                 return () => UnistylesShadowRegistry.remove(ref, styles.container)
                             }}
                         >

package/plugin/index.js

@@ -1,5 +1,5 @@
 const addShadowRegistryImport = require('./import')
-const { getStyleObjectPath, getStyleAttribute } = require('./style')
+const { getStyleMetadata, getStyleAttribute } = require('./style')
 const { getRefProp, addRef, overrideRef, hasStringRef } = require('./ref')
 const { isUnistylesStyleSheet, analyzeDependencies, addStyleSheetTag, getUnistyle } = require('./stylesheet')
 const { isUsingVariants, extractVariants } = require('./variants')
@@ -46,28 +46,27 @@ module.exports = function ({ types: t }) {
                     return
                 }
 
-                const stylePath = getStyleObjectPath(t, styleAttr.value.expression)
+                const metadata = getStyleMetadata(t, styleAttr.value.expression)
 
                 // style prop is not using object expression
-                if (stylePath.length !== 2) {
+                if (metadata.length === 0) {
                     return
                 }
 
                 // to add import
                 state.file.hasAnyUnistyle = true
 
-                const refProp = getRefProp(t, path)
+                metadata.forEach(meta => {
+                    const refProp = getRefProp(t, path)
 
-                if (!refProp && hasStringRef(t, path)) {
-                    throw new Error("Detected string based ref which is not supported by Unistyles.")
-                }
-
-                const styleObj = stylePath[0]
-                const styleProp = stylePath[1]
+                    if (!refProp && hasStringRef(t, path)) {
+                        throw new Error("Detected string based ref which is not supported by Unistyles.")
+                    }
 
-                refProp
-                    ? overrideRef(t, path, refProp, styleObj, styleProp, state)
-                    : addRef(t, path, styleObj, styleProp, state)
+                    refProp
+                        ? overrideRef(t, path, refProp, meta, state)
+                        : addRef(t, path, meta, state)
+                })
             },
             CallExpression(path, state) {
                 if (isUsingVariants(t, path)) {

package/plugin/ref.js

@@ -14,7 +14,7 @@ function hasStringRef(t, path) {
     )
 }
 
-function addRef(t, path, styleObj, styleProp, state) {
+function addRef(t, path, metadata, state) {
     const hasVariants = state.file.hasVariants
 
     const newRefFunction = t.arrowFunctionExpression(
@@ -25,8 +25,9 @@ function addRef(t, path, styleObj, styleProp, state) {
                     t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('add')),
                     [
                         t.identifier('ref'),
-                        t.memberExpression(t.identifier(styleObj), t.identifier(styleProp)),
-                        t.identifier(hasVariants ? '__uni__variants' : 'undefined')
+                        t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp)),
+                        t.identifier(hasVariants ? '__uni__variants' : 'undefined'),
+                        metadata.dynamicFunction ? t.arrayExpression(metadata.dynamicFunction.arguments) : t.identifier('undefined')
                     ]
                 )
             ),
@@ -34,7 +35,7 @@ function addRef(t, path, styleObj, styleProp, state) {
                 t.arrowFunctionExpression([],
                     t.callExpression(
                         t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('remove')),
-                        [t.identifier('ref'), t.memberExpression(t.identifier(styleObj), t.identifier(styleProp))]
+                        [t.identifier('ref'), t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp))]
                     )
                 )
             )
@@ -49,7 +50,7 @@ function addRef(t, path, styleObj, styleProp, state) {
     path.node.openingElement.attributes.push(newRefProp)
 }
 
-function overrideRef(t, path, refProp, styleObj, styleProp, state) {
+function overrideRef(t, path, refProp, metadata, state) {
     const hasVariants = state.file.hasVariants
     const uniqueRefName = path.scope.generateUidIdentifier('ref').name
     const isIdentifier = t.isIdentifier(refProp.value.expression)
@@ -74,8 +75,9 @@ function overrideRef(t, path, refProp, styleObj, styleProp, state) {
 
                         [
                             t.identifier(uniqueRefName),
-                            t.memberExpression(t.identifier(styleObj), t.identifier(styleProp)),
-                            t.identifier(hasVariants ? '__uni__variants' : 'undefined')
+                            t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp)),
+                            t.identifier(hasVariants ? '__uni__variants' : 'undefined'),
+                            metadata.dynamicFunction ? t.arrayExpression(metadata.dynamicFunction.arguments) : t.identifier('undefined')
                         ]
                     )
                 ),
@@ -83,7 +85,7 @@ function overrideRef(t, path, refProp, styleObj, styleProp, state) {
                     t.arrowFunctionExpression([],
                         t.callExpression(
                             t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('remove')),
-                            [t.identifier(uniqueRefName), t.memberExpression(t.identifier(styleObj), t.identifier(styleProp))]
+                            [t.identifier(uniqueRefName), t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp))]
                         )
                     )
                 )
@@ -113,8 +115,9 @@ function overrideRef(t, path, refProp, styleObj, styleProp, state) {
                         t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('add')),
                         [
                             t.identifier('ref'),
-                            t.memberExpression(t.identifier(styleObj), t.identifier(styleProp)),
-                            t.identifier(hasVariants ? '__uni__variants' : 'undefined')
+                            t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp)),
+                            t.identifier(hasVariants ? '__uni__variants' : 'undefined'),
+                            metadata.dynamicFunction ? t.arrayExpression(metadata.dynamicFunction.arguments) : t.identifier('undefined')
                         ]
                     )
                 ),
@@ -129,7 +132,7 @@ function overrideRef(t, path, refProp, styleObj, styleProp, state) {
                         t.expressionStatement(
                             t.callExpression(
                                 t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('remove')),
-                                [t.identifier('ref'), t.memberExpression(t.identifier(styleObj), t.identifier(styleProp))]
+                                [t.identifier('ref'), t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp))]
                             )
                         )
                     ]))
@@ -172,8 +175,9 @@ function overrideRef(t, path, refProp, styleObj, styleProp, state) {
                     t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('add')),
                     [
                         t.identifier(uniqueRefName),
-                        t.memberExpression(t.identifier(styleObj), t.identifier(styleProp)),
-                        t.identifier(hasVariants ? '__uni__variants' : 'undefined')
+                        t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp)),
+                        t.identifier(hasVariants ? '__uni__variants' : 'undefined'),
+                        metadata.dynamicFunction ? t.arrayExpression(metadata.dynamicFunction.arguments) : t.identifier('undefined')
                     ]
                 )
             ),
@@ -187,7 +191,7 @@ function overrideRef(t, path, refProp, styleObj, styleProp, state) {
                     t.expressionStatement(
                         t.callExpression(
                             t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('remove')),
-                            [t.identifier(uniqueRefName), t.memberExpression(t.identifier(styleObj), t.identifier(styleProp))]
+                            [t.identifier(uniqueRefName), t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp))]
                         )
                     )
                 ]))

package/plugin/style.js

@@ -1,27 +1,33 @@
-function getStyleObjectPath(t, node) {
+function getStyleMetadata(t, node, dynamicFunction = null) {
     // {styles.container}
     if (t.isMemberExpression(node)) {
-        return [node.object.name, node.property.name]
+        return [
+            {
+                styleObj: node.object.name,
+                styleProp: node.property.name,
+                dynamicFunction
+            }
+        ]
     }
 
     // [styles.container]
     if (t.isArrayExpression(node)) {
-        return node.elements.flatMap(element => getStyleObjectPath(t, element))
+        return node.elements.flatMap(element => getStyleMetadata(t, element))
     }
 
     // [...styles.container]
     if (t.isSpreadElement(node)) {
-        return getStyleObjectPath(t, node.argument)
+        return getStyleMetadata(t, node.argument)
     }
 
     // {{ ...styles.container }}
     if (t.isObjectExpression(node)) {
-        return node.properties.flatMap(prop => getStyleObjectPath(t, prop.argument))
+        return node.properties.flatMap(prop => getStyleMetadata(t, prop.argument))
     }
 
     // {styles.container(arg1, arg2)}
     if (t.isCallExpression(node)) {
-        return getStyleObjectPath(t, node.callee)
+        return getStyleMetadata(t, node.callee, node)
     }
 
     return []
@@ -36,6 +42,6 @@ function getStyleAttribute(t, path) {
 }
 
 module.exports = {
-    getStyleObjectPath,
+    getStyleMetadata,
     getStyleAttribute
 }

package/src/specs/ShadowRegistry/index.ts

@@ -4,10 +4,10 @@ import type { ShadowNode, Unistyle, ViewHandle } from './types'
 
 interface ShadowRegistry extends UnistylesShadowRegistrySpec {
     // Babel API
-    add(handle?: ViewHandle, style?: Unistyle, variants?: Record<string, string | boolean>): void,
+    add(handle?: ViewHandle, style?: Unistyle, variants?: Record<string, string | boolean>, args?: Array<any>): void,
     remove(handle?: ViewHandle, style?: Unistyle): void,
     // JSI
-    link(node: ShadowNode, style: Unistyle, variants?: Record<string, string | boolean>): void,
+    link(node: ShadowNode, style: Unistyle, variants?: Record<string, string | boolean>, args?: Array<any>): void,
     unlink(node: ShadowNode, style: Unistyle): void
 }
 
@@ -26,12 +26,12 @@ const findShadowNodeForHandle = (handle: ViewHandle) => {
     return node
 }
 
-HybridShadowRegistry.add = (handle, style, variants) => {
+HybridShadowRegistry.add = (handle, style, variants, args) => {
     if (!handle || !style?.__unid) {
         return
     }
 
-    HybridShadowRegistry.link(findShadowNodeForHandle(handle), style, variants ?? {})
+    HybridShadowRegistry.link(findShadowNodeForHandle(handle), style, variants ?? {}, args ?? [])
 }
 
 HybridShadowRegistry.remove = (handle, style) => {

package/src/specs/index.web.ts

@@ -2,4 +2,4 @@ import type { ReactElement } from 'react'
 
 export const getSSRUnistyles = () => [] as Array<ReactElement>
 
-export * from '../../web'
+export * from '../web'

package/src/types/stylesheet.ts

@@ -5,7 +5,7 @@ import type { UnistylesMiniRuntime } from '../specs'
 import type { ReactNativeStyleSheet } from './breakpoints'
 import type { ExtractVariantNames } from './variants'
 import type { CSSProperties } from 'react'
-import type { Pseudo } from '../../web/pseudo'
+import type { Pseudo } from '../web/pseudo'
 
 // these props are treated differently to nest breakpoints and media queries
 type NestedKeys = 'shadowOffset' | 'transform' | 'textShadowOffset'

package/{web → src/web}/convert/breakpoint.ts

@@ -2,7 +2,7 @@ import type { MediaQuery } from 'typestyle/lib/types'
 import { UnistylesState } from '../state'
 import { keyInObject } from '../utils'
 import { isUnistylesMq, parseMq } from '../mq'
-import { Orientation } from '../../src/specs/types'
+import { Orientation } from '../../specs/types'
 
 export const convertBreakpoint = (breakpoint: string): MediaQuery => {
     if (Object.values(Orientation).includes(breakpoint as Orientation)) {