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

package/plugin/ref.js

@@ -14,21 +14,39 @@ function hasStringRef(t, path) {
     )
 }
 
-function addRef(t, path, styleObj, styleProp) {
+function memberExpressionFromArray(t, identifiers) {
+    // possible for inline styles
+    if (identifiers.length === 0) {
+        return undefined
+    }
+
+    const [base, ...members] = identifiers
+
+    return members.reduce((object, property) => t.memberExpression(object, t.identifier(property)), t.identifier(base))
+}
+
+function addRef(t, path, metadata, state) {
+    const hasVariants = state.file.hasVariants
+
     const newRefFunction = t.arrowFunctionExpression(
         [t.identifier('ref')],
         t.blockStatement([
             t.expressionStatement(
                 t.callExpression(
                     t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('add')),
-                    [t.identifier('ref'), t.memberExpression(t.identifier(styleObj), t.identifier(styleProp))]
+                    [
+                        t.identifier('ref'),
+                        memberExpressionFromArray(t, metadata.members) || metadata.inlineStyle,
+                        t.identifier(hasVariants ? '__uni__variants' : 'undefined'),
+                        metadata.dynamicFunction ? t.arrayExpression(metadata.dynamicFunction.arguments) : t.identifier('undefined')
+                    ]
                 )
             ),
             t.returnStatement(
                 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')]
                     )
                 )
             )
@@ -43,7 +61,8 @@ function addRef(t, path, styleObj, styleProp) {
     path.node.openingElement.attributes.push(newRefProp)
 }
 
-function overrideRef(t, path, refProp, styleObj, styleProp) {
+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)
     const binding = path.scope.getBinding(refProp.value.expression.name)
@@ -55,19 +74,30 @@ function overrideRef(t, path, refProp, styleObj, styleProp) {
             [t.identifier(uniqueRefName)],
             t.blockStatement([
                 t.expressionStatement(
-                    t.assignmentExpression('=', t.identifier(userVariableName), t.identifier(uniqueRefName))
+                    t.assignmentExpression(
+                        '=',
+                        t.memberExpression(t.identifier(userVariableName), t.identifier('current')),
+                        t.identifier(uniqueRefName)
+                    )
                 ),
                 t.expressionStatement(
                     t.callExpression(
                         t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('add')),
-                        [t.identifier(uniqueRefName), t.memberExpression(t.identifier(styleObj), t.identifier(styleProp))]
+                        [
+                            t.identifier(uniqueRefName),
+                            memberExpressionFromArray(t, metadata.members) || metadata.inlineStyle,
+                            t.identifier(hasVariants ? '__uni__variants' : 'undefined'),
+                            metadata.dynamicFunction ? t.arrayExpression(metadata.dynamicFunction.arguments) : t.identifier('undefined')
+                        ]
                     )
                 ),
                 t.returnStatement(
                     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)
+                            ]
                         )
                     )
                 )
@@ -87,15 +117,23 @@ function overrideRef(t, path, refProp, styleObj, styleProp) {
         const userCleanupFunction = userReturnStatement
             ? userReturnStatement.argument
             : null
+        const userRefName = refProp.value.expression.params.length >= 1
+            ? refProp.value.expression.params.at(0).name
+            : 'ref'
 
         const newRefFunction = t.arrowFunctionExpression(
-            [t.identifier('ref')],
+            [t.identifier(userRefName)],
             t.blockStatement([
                 ...userStatements.filter(statement => !t.isReturnStatement(statement)),
                 t.expressionStatement(
                     t.callExpression(
                         t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('add')),
-                        [t.identifier('ref'), t.memberExpression(t.identifier(styleObj), t.identifier(styleProp))]
+                        [
+                            t.identifier(userRefName),
+                            memberExpressionFromArray(t, metadata.members) || metadata.inlineStyle,
+                            t.identifier(hasVariants ? '__uni__variants' : 'undefined'),
+                            metadata.dynamicFunction ? t.arrayExpression(metadata.dynamicFunction.arguments) : t.identifier('undefined')
+                        ]
                     )
                 ),
                 // Merged cleanup function
@@ -109,7 +147,9 @@ function overrideRef(t, path, refProp, styleObj, styleProp) {
                         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(userRefName)
+                                ]
                             )
                         )
                     ]))
@@ -122,6 +162,10 @@ function overrideRef(t, path, refProp, styleObj, styleProp) {
         return
     }
 
+    if (!binding) {
+        return
+    }
+
     // ref={scopedFunction}
     const isArrowFunction = t.isArrowFunctionExpression(binding.path.node.init)
     const isFunction = t.isFunctionDeclaration(binding.path.node)
@@ -146,7 +190,12 @@ function overrideRef(t, path, refProp, styleObj, styleProp) {
             t.expressionStatement(
                 t.callExpression(
                     t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('add')),
-                    [t.identifier(uniqueRefName), t.memberExpression(t.identifier(styleObj), t.identifier(styleProp))]
+                    [
+                        t.identifier(uniqueRefName),
+                        memberExpressionFromArray(t, metadata.members) || metadata.inlineStyle,
+                        t.identifier(hasVariants ? '__uni__variants' : 'undefined'),
+                        metadata.dynamicFunction ? t.arrayExpression(metadata.dynamicFunction.arguments) : t.identifier('undefined')
+                    ]
                 )
             ),
             t.returnStatement(
@@ -159,10 +208,12 @@ function overrideRef(t, path, refProp, styleObj, styleProp) {
                     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)
+                            ]
                         )
                     )
-                ]))
+                ].filter(Boolean)))
             )
         ])
     )

package/plugin/style.js

@@ -1,44 +1,69 @@
-function getStyleObjectPath(t, node, state) {
+function getStyleMetadata(t, node, dynamicFunction = null) {
     // {styles.container}
     if (t.isMemberExpression(node)) {
-        return [node.object.name, node.property.name]
+        const members = t.isMemberExpression(node.object)
+            ? [node.object.object.name, node.object.property.name, node.property.name]
+            : [node.object.name, node.property.name]
+
+        return [
+            {
+                members: members.filter(Boolean),
+                inlineStyle: undefined,
+                dynamicFunction
+            }
+        ]
     }
 
     // [styles.container]
     if (t.isArrayExpression(node)) {
-        return node.elements.flatMap(element => getStyleObjectPath(t, element, state))
+        return node.elements.flatMap(element => getStyleMetadata(t, element))
     }
 
     // [...styles.container]
     if (t.isSpreadElement(node)) {
-        return getStyleObjectPath(t, node.argument, state)
+        return getStyleMetadata(t, node.argument)
     }
 
     // {{ ...styles.container }}
     if (t.isObjectExpression(node)) {
-        return node.properties.flatMap(prop => getStyleObjectPath(t, prop.argument, state))
-    }
+        const inlineStyles = []
 
-    // {styles.container(arg1, arg2)}
-    if (t.isCallExpression(node)) {
-        const path = getStyleObjectPath(t, node.callee, state)
-        const lastPart = path.slice(-1)
+        const partialResult = node
+            .properties
+            .flatMap(prop => {
+                // handle inline styles
+                if (t.isObjectProperty(prop)) {
+                    inlineStyles.push(prop)
 
-        if (!lastPart) {
-            return path
-        }
+                    return null
+                }
 
-        // for web increment counter for dynamic functions
-        if (state.file.webDynamicFunctions[lastPart]) {
-            node.arguments.push(t.numericLiteral(++state.file.webDynamicFunctions[lastPart]))
+                return getStyleMetadata(t, prop.argument)
+            })
+            .filter(Boolean)
 
-            return path
+        if (inlineStyles.length > 0) {
+            return partialResult.concat([{
+                members: [],
+                inlineStyle: t.objectExpression(inlineStyles),
+                dynamicFunction: undefined
+            }])
         }
 
-        state.file.webDynamicFunctions[lastPart] = 1
-        node.arguments.push(t.numericLiteral(1))
+        return partialResult
+    }
 
-        return path
+    // {styles.container(arg1, arg2)}
+    if (t.isCallExpression(node)) {
+        return getStyleMetadata(t, node.callee, node)
+    }
+
+    if (t.isIdentifier(node)) {
+        return [{
+            members: [node.name],
+            inlineStyle: undefined,
+            dynamicFunction: undefined
+        }]
     }
 
     return []
@@ -52,7 +77,42 @@ function getStyleAttribute(t, path) {
     )
 }
 
+function styleAttributeToArray(t, path) {
+    const styleAttribute = getStyleAttribute(t, path)
+
+    // {{...style.container, ...style.container}}
+    if (t.isObjectExpression(styleAttribute.value.expression)) {
+        const properties = styleAttribute.value.expression.properties
+            .map(property => t.isSpreadElement(property)
+                ? property.argument
+                : t.objectExpression([property])
+            )
+
+        styleAttribute.value.expression = t.arrayExpression(properties)
+
+        return
+    }
+
+    // [{...style.container, ...style.container}]
+    if (t.isArrayExpression(styleAttribute.value.expression)) {
+        const properties = styleAttribute.value.expression.elements
+            .flatMap(property => {
+                if (t.isSpreadElement(property)) {
+                    return property.argument
+                }
+                return property
+            })
+
+        styleAttribute.value.expression = t.arrayExpression(properties)
+
+        return
+    }
+
+    styleAttribute.value.expression = t.arrayExpression([styleAttribute.value.expression])
+}
+
 module.exports = {
-    getStyleObjectPath,
-    getStyleAttribute
+    getStyleMetadata,
+    getStyleAttribute,
+    styleAttributeToArray
 }

package/plugin/stylesheet.js

@@ -17,6 +17,19 @@ const UnistyleDependency = {
     NavigationBar: 13
 }
 
+function stringToUniqueId(str) {
+    let hash = 0;
+
+    for (let i = 0; i < str.length; i++) {
+        hash = (hash << 5) - hash + str.charCodeAt(i)
+        hash |= 0
+    }
+
+    const absHash = Math.abs(hash)
+
+    return absHash % 1000000000
+}
+
 function isUnistylesStyleSheet(t, path, state) {
     const callee = path.get('callee')
 
@@ -28,6 +41,13 @@ function isUnistylesStyleSheet(t, path, state) {
     )
 }
 
+function addStyleSheetTag(t, path, state) {
+    const callee = path.get('callee')
+    const uniqueId = stringToUniqueId(state.filename) + ++state.file.tagNumber
+
+    callee.container.arguments.push(t.numericLiteral(uniqueId))
+}
+
 function analyzeDependencies(t, state, name, unistyleObj, themeName, rtName) {
     const debugMessage = deps => {
         if (state.opts.debug) {
@@ -141,7 +161,30 @@ function analyzeDependencies(t, state, name, unistyleObj, themeName, rtName) {
     }
 }
 
+function getUnistyle(t, property) {
+    const propertyValue = t.isArrowFunctionExpression(property.value)
+        ? property.value.body
+        : property.value
+
+    if (t.isObjectExpression(propertyValue)) {
+        return propertyValue
+    }
+
+    if (t.isBlockStatement(propertyValue)) {
+        const returnStatement = propertyValue.body
+            .find(value => t.isReturnStatement(value))
+
+        return returnStatement
+            ? returnStatement.argument
+            : null
+    }
+
+    return null
+}
+
 module.exports = {
     isUnistylesStyleSheet,
-    analyzeDependencies
+    analyzeDependencies,
+    addStyleSheetTag,
+    getUnistyle
 }

package/plugin/variants.js

@@ -0,0 +1,33 @@
+function isUsingVariants(t, path) {
+    const callee = path.get('callee')
+
+    return (
+        t.isMemberExpression(callee) &&
+        t.isIdentifier(callee.node.object, { name: 'styles' }) &&
+        t.isIdentifier(callee.node.property, { name: 'useVariants' }) &&
+        t.isObjectExpression(path.node.arguments[0])
+    )
+}
+
+function extractVariants(t, path, state) {
+    const arg = path.node.arguments[0]
+
+    const variantDeclaration = t.variableDeclaration('const', [
+        t.variableDeclarator(
+            t.identifier('__uni__variants'),
+            arg
+        )
+    ])
+
+    // Replace useVariants argument with __uni__variants
+    path.node.arguments[0] = t.identifier('__uni__variants')
+
+    path.insertBefore(variantDeclaration)
+
+    state.file.hasVariants = true
+}
+
+module.exports = {
+    isUsingVariants,
+    extractVariants
+}

package/src/index.ts

@@ -3,6 +3,9 @@ import React from 'react'
 export * from './specs'
 export { mq } from './mq'
 export type { UnistylesThemes, UnistylesBreakpoints } from './global'
+// TODO: export Native createUnistylesComponent
+// can't import it this way, it will break native build
+// export { createUnistylesComponent } from './web/createUnistylesComponent'
 
 // todo verify true min version
 const minReactVersionRequiredByUnistyles = '18.3.1'

package/src/specs/NavigtionBar/index.ts

@@ -12,7 +12,7 @@ export const attachNavigationBarJSMethods = (hybridObject: UnistylesNavigationBa
 
     privateHybrid._setBackgroundColor = hybridObject.setBackgroundColor
     hybridObject.setBackgroundColor = (color?: string) => {
-        const parsedColor = processColor(color)
+        const parsedColor = processColor(color) ?? 0
 
         privateHybrid._setBackgroundColor(parsedColor as number)
     }

package/src/specs/ShadowRegistry/index.ts

@@ -4,11 +4,11 @@ import type { ShadowNode, Unistyle, ViewHandle } from './types'
 
 interface ShadowRegistry extends UnistylesShadowRegistrySpec {
     // Babel API
-    add(handle?: ViewHandle, style?: Unistyle): 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): void,
-    unlink(node: ShadowNode, style: Unistyle): void
+    link(node: ShadowNode, style?: Unistyle, variants?: Record<string, string | boolean>, args?: Array<any>): void,
+    unlink(node: ShadowNode): void
 }
 
 const HybridShadowRegistry = NitroModules.createHybridObject<ShadowRegistry>('UnistylesShadowRegistry')
@@ -26,20 +26,21 @@ const findShadowNodeForHandle = (handle: ViewHandle) => {
     return node
 }
 
-HybridShadowRegistry.add = (handle, style) => {
-    if (!handle || !style?.__unid) {
+HybridShadowRegistry.add = (handle, style, variants, args) => {
+    // virtualized nodes can be null
+    if (!handle || !style) {
         return
     }
 
-    HybridShadowRegistry.link(findShadowNodeForHandle(handle), style)
+    HybridShadowRegistry.link(findShadowNodeForHandle(handle), style, variants ?? {}, args ?? [])
 }
 
-HybridShadowRegistry.remove = (handle, style) => {
-    if (!handle || !style?.__unid) {
+HybridShadowRegistry.remove = handle => {
+    if (!handle) {
         return
     }
 
-    HybridShadowRegistry.unlink(findShadowNodeForHandle(handle), style)
+    HybridShadowRegistry.unlink(findShadowNodeForHandle(handle))
 }
 
 type PrivateMethods =

package/src/specs/StatusBar/index.ts

@@ -34,7 +34,7 @@ export const attachStatusBarJSMethods = (hybridObject: UnistylesStatusBar) => {
 
     privateHybrid._setBackgroundColor = hybridObject.setBackgroundColor
     hybridObject.setBackgroundColor = (color?: string) => {
-        const parsedColor = processColor(color)
+        const parsedColor = processColor(color) ?? 0
 
         privateHybrid._setBackgroundColor(parsedColor as number)
     }

package/src/specs/StyleSheet/index.ts

@@ -41,4 +41,6 @@ HybridUnistylesStyleSheet.jsMethods = {
     processColor
 }
 
-export const StyleSheet = HybridUnistylesStyleSheet as Omit<UnistylesStyleSheet, 'jsMethods'>
+type PrivateMethods = 'jsMethods'
+
+export const StyleSheet = HybridUnistylesStyleSheet as Omit<UnistylesStyleSheet, PrivateMethods>

package/src/specs/UnistylesRuntime/index.ts

@@ -45,7 +45,7 @@ HybridUnistylesRuntime.navigationBar = HybridUnistylesRuntime.createHybridNaviga
 HybridUnistylesRuntime._setRootViewBackgroundColor = HybridUnistylesRuntime.setRootViewBackgroundColor
 
 HybridUnistylesRuntime.setRootViewBackgroundColor = (color?: string) => {
-    const parsedColor = processColor(color)
+    const parsedColor = processColor(color) ?? 0
 
     HybridUnistylesRuntime._setRootViewBackgroundColor(parsedColor as number)
 }

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'
@@ -27,7 +27,7 @@ type VariantsObject = {
 }
 
 type CustomClassName = {
-    _css?: string | Array<string>
+    _classNames?: string | Array<string>
 }
 
 type CompoundVariant = {

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)) {

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

@@ -1,5 +1,5 @@
 import type { NestedCSSProperties } from 'typestyle/lib/types'
-import type { UnistylesValues } from '../../src/types'
+import type { UnistylesValues } from '../../types'
 import { media } from 'typestyle'
 import { isPseudo } from '../pseudo'
 import { convertBreakpoint } from './breakpoint'
@@ -21,7 +21,7 @@ export const convertToTypeStyle = (value: UnistylesValues) => {
         ...value._web
     }).flatMap(([unistylesKey, unistylesValue]) => {
         // Keys to omit
-        if (['_css', '_web', 'variants', 'compoundVariants', 'uni__dependencies'].includes(unistylesKey)) {
+        if (['_classNames', '_web', 'variants', 'compoundVariants', 'uni__dependencies', '__unistyles-secrets__'].includes(unistylesKey) || unistylesKey.startsWith('variant-')) {
             return []
         }
 

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

@@ -1,5 +1,5 @@
 import type { TextStyle, ViewStyle } from 'react-native'
-import type { ToDeepUnistyles } from '../../src/types/stylesheet'
+import type { ToDeepUnistyles } from '../../types/stylesheet'
 
 export type ShadowOffset = ToDeepUnistyles<{ width: number, height: number }>
 

package/src/web/create.ts

@@ -0,0 +1,50 @@
+import type { ReactNativeStyleSheet } from '../types'
+import type { StyleSheetWithSuperPowers, StyleSheet } from '../types/stylesheet'
+import { assignSecrets, reduceObject, getStyles } from './utils'
+import { UnistylesRuntime } from './runtime'
+import { createUseVariants, getVariants } from './variants'
+
+export const create = (stylesheet: StyleSheetWithSuperPowers<StyleSheet>) => {
+    const computedStylesheet = typeof stylesheet === 'function'
+        ? stylesheet(UnistylesRuntime.theme, UnistylesRuntime.miniRuntime)
+        : stylesheet
+    const selectedVariants = new Map<string, any>()
+
+    const copyVariants = () => Object.fromEntries(selectedVariants.entries())
+    const addSecrets = (value: any, key: string, args?: Array<any>) => assignSecrets(value, {
+        __uni__key: key,
+        __uni__refs: new Set(),
+        __uni__stylesheet: stylesheet,
+        __uni__args: args,
+        __uni__variants: copyVariants()
+    })
+
+    const styles = reduceObject(computedStylesheet, (value, _key) => {
+        const key = String(_key)
+
+        if (typeof value === 'function') {
+            const dynamicStyle = (...args: Array<any>) => {
+                const result = value(...args)
+                const variants = Object.fromEntries(getVariants({ [key]: result } as ReactNativeStyleSheet<StyleSheet>, copyVariants()))
+                const resultWithVariants = {
+                    ...result,
+                    ...variants[key]
+                }
+
+                // Add secrets to result of dynamic styles function
+                return addSecrets(getStyles(resultWithVariants), key, args)
+            }
+
+            // Add secrets to dynamic styles function
+            return addSecrets(dynamicStyle, key)
+        }
+
+        // Add secrets to static styles
+        return addSecrets(getStyles(value), key)
+    }) as ReactNativeStyleSheet<StyleSheet>
+
+    // Inject useVariants hook to styles
+    createUseVariants(styles, newVariants => Object.entries(newVariants).forEach(([key, value]) => selectedVariants.set(key, value)))
+
+    return styles
+}

package/src/web/createUnistylesComponent.tsx

@@ -0,0 +1,54 @@
+import React, { useEffect, useState } from 'react'
+import { extractHiddenProperties, extractSecrets } from './utils'
+import { getVariants } from './variants'
+import { UnistylesListener } from './listener'
+import { UnistylesRegistry } from './registry'
+
+const getStyles = (value: Record<string, any>) => {
+    const secrets = extractSecrets(value)
+
+    if (secrets.length === 0) {
+        return undefined
+    }
+
+    return secrets.reduce((acc, { __uni__stylesheet, __uni__key, __uni__args = [], __uni__variants }) => {
+        const newComputedStylesheet = UnistylesRegistry.getComputedStylesheet(__uni__stylesheet)
+        const style = newComputedStylesheet[__uni__key]
+        const resultHidden = typeof style === 'function'
+            ? style(...__uni__args)
+            : style
+        const result = extractHiddenProperties(resultHidden)
+        const { variants } = Object.fromEntries(getVariants({ variants: result }, __uni__variants ))
+        const resultWithVariants = {
+            ...result,
+            ...variants
+        }
+
+        return {
+            ...acc,
+            ...resultWithVariants
+        }
+    }, {} as Record<string, any>)
+}
+
+export const createUnistylesComponent = <TProps extends object>(Component: React.ComponentType<TProps>) => (props: TProps) => {
+    const passedStyles = (props as TProps & { style: Record<string, any> }).style ?? {}
+    const [style, setStyle] = useState(getStyles(passedStyles))
+
+    useEffect(() => {
+        const newStyles = getStyles(passedStyles)
+        const dependencies = newStyles?.['uni__dependencies'] ?? []
+        const dispose = UnistylesListener.addListeners(dependencies, () => setStyle(getStyles(passedStyles)))
+
+        setStyle(newStyles)
+
+        return dispose
+    }, [passedStyles])
+
+    return (
+        <Component
+            {...props}
+            style={style}
+        />
+    )
+}