react-native-unistyles 3.0.0-alpha.38 → 3.0.0-alpha.39

package/src/core/createUnistylesComponent.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, type ComponentType } from 'react'
+import React, { useEffect, useState, type ComponentType, forwardRef, useRef, useMemo } from 'react'
 import type { UnistylesTheme } from '../types'
 import { UnistylesRuntime } from '../specs'
 import { UnistyleDependency } from '../specs/NativePlatform'
@@ -6,6 +6,7 @@ import type { PartialBy } from '../types/common'
 import { UnistylesListener } from '../web/listener'
 import { UnistylesShadowRegistry } from '../web'
 import { equal } from '../web/utils'
+import { deepMergeObjects } from '../utils'
 
 const SUPPORTED_STYLE_PROPS = ['style', 'contentContainerStyle'] as const
 const ALL_DEPENDENCIES = Object.values(UnistyleDependency).filter((dependency): dependency is UnistyleDependency => typeof dependency === 'number')
@@ -13,34 +14,40 @@ const ALL_DEPENDENCIES = Object.values(UnistyleDependency).filter((dependency):
 type SupportedStyleProps = typeof SUPPORTED_STYLE_PROPS[number]
 
 const useShadowRegistry = (style?: Record<string, any>) => {
-    const [classNames, setClassNames] = useState<Array<string>>([])
     const [ref] = useState(document.createElement('div'))
+    const oldClassNames = useRef<Array<string>>([])
+    const classNames = useMemo(() => {
+        if (!style) {
+            return []
+        }
 
-    if (style) {
-        UnistylesShadowRegistry
-            .add(ref, style)
-            .then(newClassNames => {
-                if (equal(classNames, newClassNames)) {
-                    return
-                }
+        const newClassNames = UnistylesShadowRegistry.add(ref, [style], undefined, []) ?? []
 
-                setClassNames(newClassNames)
-            })
-    }
+        if (equal(oldClassNames.current, newClassNames)) {
+            return oldClassNames.current
+        }
+
+        oldClassNames.current = newClassNames
+
+        return newClassNames
+    }, [style])
 
     useEffect(() => () => {
         // Remove styles on unmount
-        UnistylesShadowRegistry.add(null, style)
+        if (style) {
+            UnistylesShadowRegistry.add(null, [style], undefined, [])
+        }
     })
 
     return classNames
 }
 
 export const createUnistylesComponent = <TProps extends Record<string, any>, TMappings extends Partial<Omit<TProps, SupportedStyleProps>>>(Component: ComponentType<TProps>, mappings?: (theme: UnistylesTheme) => TMappings) => {
-    return (props: PartialBy<TProps, keyof TMappings | SupportedStyleProps>) => {
+    return forwardRef<unknown, PartialBy<TProps, keyof TMappings | SupportedStyleProps>>((props, ref) => {
+        const narrowedProps = props as PartialBy<TProps, keyof TMappings | SupportedStyleProps>
         const [mappingsProps, setMappingsProps] = useState(mappings?.(UnistylesRuntime.getTheme()))
-        const styleClassNames = useShadowRegistry(props.style)
-        const contentContainerStyleClassNames = useShadowRegistry(props.contentContainerStyle)
+        const styleClassNames = useShadowRegistry(narrowedProps.style)
+        const contentContainerStyleClassNames = useShadowRegistry(narrowedProps.contentContainerStyle)
 
         useEffect(() => {
             const disposeMappings = UnistylesListener.addListeners(ALL_DEPENDENCIES, () => {
@@ -54,18 +61,17 @@ export const createUnistylesComponent = <TProps extends Record<string, any>, TMa
             })
 
             return () => disposeMappings()
-        }, [mappingsProps, props.style])
+        }, [mappingsProps, narrowedProps.style])
 
         const combinedProps = {
-            ...mappingsProps,
-            ...props,
-            ...props.style ? {
+            ...deepMergeObjects(props, (mappingsProps ?? {}) as object),
+            ...narrowedProps.style ? {
                 style: {
                     $$css: true,
                     'unistyles': styleClassNames.join(' ')
                 },
             } : {},
-            ...props.contentContainerStyle ? {
+            ...narrowedProps.contentContainerStyle ? {
                 style: {
                     $$css: true,
                     'unistyles': contentContainerStyleClassNames.join(' ')
@@ -73,6 +79,6 @@ export const createUnistylesComponent = <TProps extends Record<string, any>, TMa
             } : {},
         } as unknown as TProps
 
-        return <Component {...combinedProps} />
-    }
+        return <Component {...combinedProps} ref={ref} />
+    })
 }

package/src/specs/NativePlatform/NativePlatform.nitro.ts

@@ -51,15 +51,13 @@ export interface NativePlatform extends HybridObject<{ ios: 'swift', android: 'k
     getPrefersRtlDirection(): boolean,
 
     setRootViewBackgroundColor(color: number): void,
-    setNavigationBarBackgroundColor?(color: number): void,
     setNavigationBarHidden?(isHidden: boolean): void,
     setStatusBarHidden(isHidden: boolean): void,
-    setStatusBarBackgroundColor?(color: number): void,
     setImmersiveMode(isEnabled: boolean): void,
 
     // private
     getMiniRuntime(): UnistylesNativeMiniRuntime,
-    registerPlatformListener(callback: (dependencies: Array<UnistyleDependency>) => void): void,
-    registerImeListener(callback: () => void): void,
+    registerPlatformListener(callback: (dependencies: Array<UnistyleDependency>, miniRuntime: UnistylesNativeMiniRuntime) => void): void,
+    registerImeListener(callback: (miniRuntime: UnistylesNativeMiniRuntime) => void): void,
     unregisterPlatformListeners(): void
 }

package/src/specs/NavigtionBar/UnistylesNavigationBar.nitro.ts

@@ -5,6 +5,5 @@ export interface UnistylesNavigationBar extends HybridObject<{ ios: 'c++', andro
     readonly width: number,
     readonly height: number,
 
-    setBackgroundColor(color: number): void,
     setHidden(isHidden: boolean): void
 }

package/src/specs/NavigtionBar/index.ts

@@ -1,30 +1 @@
-import { processColor } from 'react-native'
-import type { UnistylesNavigationBar as UnistylesNavigationBarSpec } from './UnistylesNavigationBar.nitro'
-import type { Color } from '../types'
-
-interface PrivateUnistylesNavigationBar extends Omit<UnistylesNavigationBarSpec, 'setBackgroundColor'> {
-    /**
-     * Apps targeting Android SDK 35
-     * This API is deprecated but continues to affect 3-button navigation
-     * @deprecated
-     */
-    setBackgroundColor(color?: string): void,
-    _setBackgroundColor(color?: Color): void
-}
-
-export const attachNavigationBarJSMethods = (hybridObject: UnistylesNavigationBar) => {
-    const privateHybrid = hybridObject as PrivateUnistylesNavigationBar
-
-    privateHybrid._setBackgroundColor = hybridObject.setBackgroundColor
-    hybridObject.setBackgroundColor = (color?: string) => {
-        const parsedColor = processColor(color) ?? 0
-
-        privateHybrid._setBackgroundColor(parsedColor as number)
-    }
-}
-
-type PrivateMethods =
-    | '_setBackgroundColor'
-    | 'dispose'
-
-export type UnistylesNavigationBar = Omit<PrivateUnistylesNavigationBar, PrivateMethods>
+export type { UnistylesNavigationBar } from './UnistylesNavigationBar.nitro'

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>, args?: Array<any>): void,
-    remove(handle?: ViewHandle, style?: Unistyle): void,
+    add(handle?: ViewHandle, styles?: Array<Unistyle>, variants?: Record<string, string | boolean>, args?: Array<Array<any>>): void,
+    remove(handle?: ViewHandle): void,
     // JSI
-    link(node: ShadowNode, style?: Unistyle, variants?: Record<string, string | boolean>, args?: Array<any>): void,
+    link(node: ShadowNode, styles?: Array<Unistyle>, variants?: Record<string, string | boolean>, args?: Array<Array<any>>): void,
     unlink(node: ShadowNode): void
 }
 
@@ -26,18 +26,15 @@ const findShadowNodeForHandle = (handle: ViewHandle) => {
     return node
 }
 
-HybridShadowRegistry.add = (handle, style, variants, args) => {
+HybridShadowRegistry.add = (handle, styles, variants, args) => {
     // virtualized nodes can be null
-    if (!handle || !style) {
+    if (!handle || !styles || !Array.isArray(styles)) {
         return
     }
 
-    // don't register Reanimated styles
-    if (style?.initial?.updater) {
-        return
-    }
-
-    HybridShadowRegistry.link(findShadowNodeForHandle(handle), style, variants ?? {}, args ?? [])
+    // filter Reanimated styles
+    const filteredStyles = styles.filter(style => !style?.initial?.updater)
+    HybridShadowRegistry.link(findShadowNodeForHandle(handle), filteredStyles, variants ?? {}, args ?? [])
 }
 
 HybridShadowRegistry.remove = handle => {

package/src/specs/StatusBar/UnistylesStatusBar.nitro.ts

@@ -5,6 +5,5 @@ export interface UnistylesStatusBar extends HybridObject<{ ios: 'c++', android:
     readonly width: number,
     readonly height: number,
 
-    setBackgroundColor(color: number): void,
     setHidden(isHidden: boolean): void,
 }

package/src/specs/StatusBar/index.ts

@@ -1,6 +1,6 @@
-import { processColor, StatusBar as NativeStatusBar } from 'react-native'
+import { StatusBar as NativeStatusBar } from 'react-native'
 import type { UnistylesStatusBar as UnistylesStatusBarSpec } from './UnistylesStatusBar.nitro'
-import { type Color, StatusBarStyle } from '../types'
+import { StatusBarStyle } from '../types'
 
 export type StatusBarHiddenAnimation = 'none' | 'fade' | 'slide'
 
@@ -8,13 +8,6 @@ interface PrivateUnistylesStatusBar extends Omit<UnistylesStatusBarSpec, 'setBac
     setStyle(style: StatusBarStyle, animated?: boolean): void,
     setHidden(isHidden: boolean, animation?: StatusBarHiddenAnimation): void,
     _setHidden(isHidden: boolean, animation?: StatusBarHiddenAnimation): void,
-    /**
-     * Apps targeting Android SDK 35
-     * This API is deprecated as status bar background color is always transparent
-     * @deprecated
-     */
-    setBackgroundColor(color?: string): void,
-    _setBackgroundColor(color?: Color): void
 }
 
 export const attachStatusBarJSMethods = (hybridObject: UnistylesStatusBar) => {
@@ -36,17 +29,9 @@ export const attachStatusBarJSMethods = (hybridObject: UnistylesStatusBar) => {
         NativeStatusBar.setHidden(isHidden, animation)
         privateHybrid._setHidden(isHidden)
     }
-
-    privateHybrid._setBackgroundColor = hybridObject.setBackgroundColor
-    hybridObject.setBackgroundColor = (color?: string) => {
-        const parsedColor = processColor(color) ?? 0
-
-        privateHybrid._setBackgroundColor(parsedColor as number)
-    }
 }
 
 type PrivateMethods =
-    | '_setBackgroundColor'
     | '_setHidden'
     | 'dispose'
 

package/src/specs/UnistylesRuntime/index.ts

@@ -3,7 +3,7 @@ import { NitroModules } from 'react-native-nitro-modules'
 import type { UnistylesRuntime as UnistylesRuntimeSpec, UnistylesMiniRuntime } from './UnistylesRuntime.nitro'
 import type { AppBreakpoint, AppTheme, AppThemeName, Color, ColorScheme, Orientation } from '../types'
 import { attachStatusBarJSMethods, type UnistylesStatusBar } from '../StatusBar'
-import { attachNavigationBarJSMethods, type UnistylesNavigationBar } from '../NavigtionBar'
+import { type UnistylesNavigationBar } from '../NavigtionBar'
 import type { AndroidContentSizeCategory, IOSContentSizeCategory, UnistylesTheme } from '../../types'
 import { isIOS } from '../../common'
 import type { UnistylesThemes } from '../../global'
@@ -57,7 +57,6 @@ if (isIOS) {
 }
 
 attachStatusBarJSMethods(HybridUnistylesRuntime.statusBar)
-attachNavigationBarJSMethods(HybridUnistylesRuntime.navigationBar)
 
 export const Runtime = HybridUnistylesRuntime as UnistylesRuntime
 

package/src/utils.ts

@@ -0,0 +1,22 @@
+export const deepMergeObjects = <T extends Record<PropertyKey, any>>(...sources: Array<T>) => {
+    const target = {} as T
+
+    sources.forEach(source => {
+        Object.keys(source).forEach(key => {
+            const sourceValue = source[key]
+            const targetValue = target[key]
+
+            if (Object(sourceValue) == sourceValue && Object(targetValue) === targetValue) {
+                // @ts-expect-error - can't assign to generic
+                target[key] = deepMergeObjects(targetValue, sourceValue)
+
+                return
+            }
+
+            // @ts-expect-error - can't assign to generic
+            target[key] = sourceValue
+        })
+    })
+
+    return target
+}

package/src/web/convert/index.ts

@@ -1,7 +1,7 @@
 import type { UnistylesValues } from '../../types'
 import { isPseudo } from './pseudo'
 import { getStyle } from './style'
-import { deepMergeObjects } from '../utils'
+import { deepMergeObjects } from '../../utils'
 import { getTransformStyle, getBoxShadow, getFilterStyle } from './object'
 import { isShadow, isFilter, isTextShadow, isTransform, isBoxShadow } from './utils'
 import { getTextShadowStyle, getBoxShadowStyle } from './shadow'

package/src/web/convert/object/boxShadow.ts

@@ -1,6 +1,7 @@
 import type { BoxShadowValue } from 'react-native'
 import { normalizeNumericValue } from '../utils'
-import { deepMergeObjects, keyInObject } from '../../utils'
+import { keyInObject } from '../../utils'
+import { deepMergeObjects } from '../../../utils'
 
 const createBoxShadowValue = (style: BoxShadowValue) => {
     const { offsetX, offsetY, blurRadius = 0, spreadDistance = 0, color = '#000', inset } = style

package/src/web/convert/object/objectStyle.ts

@@ -1,4 +1,5 @@
-import { deepMergeObjects, keyInObject } from '../../utils'
+import { deepMergeObjects } from '../../../utils'
+import { keyInObject } from '../../utils'
 
 type Styles = Record<string, any>
 type Normalize<TStyles extends Styles> = (key: keyof TStyles, value: TStyles[keyof TStyles]) => any

package/src/web/convert/shadow/boxShadow.ts

@@ -1,4 +1,4 @@
-import { deepMergeObjects } from '../../utils'
+import { deepMergeObjects } from '../../../utils'
 import { BOX_SHADOW_STYLES, type BoxShadow } from '../types'
 import { extractShadowValue, normalizeColor, normalizeNumericValue } from '../utils'
 import { getShadowBreakpoints } from './getShadowBreakpoints'

package/src/web/convert/shadow/textShadow.ts

@@ -1,4 +1,4 @@
-import { deepMergeObjects } from '../../utils'
+import { deepMergeObjects } from '../../../utils'
 import { TEXT_SHADOW_STYLES, type TextShadow } from '../types'
 import { extractShadowValue, normalizeColor, normalizeNumericValue } from '../utils'
 import { getShadowBreakpoints } from './getShadowBreakpoints'

package/src/web/create.ts

@@ -1,6 +1,7 @@
 import type { ReactNativeStyleSheet } from '../types'
 import type { StyleSheetWithSuperPowers, StyleSheet } from '../types/stylesheet'
-import { assignSecrets, reduceObject, getStyles, deepMergeObjects } from './utils'
+import { assignSecrets, reduceObject, getStyles } from './utils'
+import { deepMergeObjects } from '../utils'
 import { UnistylesRuntime } from './runtime'
 import { createUseVariants, getVariants } from './variants'
 

package/src/web/index.ts

@@ -1,6 +1,6 @@
 import { create } from './create'
 import { UnistylesState } from './state'
-import { deepMergeObjects } from './utils'
+import { deepMergeObjects } from '../utils'
 
 export const StyleSheet = {
     configure: UnistylesState.init,

package/src/web/listener.ts

@@ -17,8 +17,28 @@ class UnistylesListenerBuilder {
         }
 
         this.isInitialized = true
-        UnistylesRuntime.darkMedia?.addEventListener('change', () => this.emitChange(UnistyleDependency.ColorScheme))
-        UnistylesRuntime.lightMedia?.addEventListener('change', () => this.emitChange(UnistyleDependency.ColorScheme))
+        UnistylesRuntime.darkMedia?.addEventListener('change', event => {
+            if (!event.matches) {
+                return
+            }
+
+            this.emitChange(UnistyleDependency.ColorScheme)
+
+            if (UnistylesRuntime.hasAdaptiveThemes) {
+                this.emitChange(UnistyleDependency.Theme)
+            }
+        })
+        UnistylesRuntime.lightMedia?.addEventListener('change', event => {
+            if (!event.matches) {
+                return
+            }
+
+            this.emitChange(UnistyleDependency.ColorScheme)
+
+            if (UnistylesRuntime.hasAdaptiveThemes) {
+                this.emitChange(UnistyleDependency.Theme)
+            }
+        })
         window.addEventListener('orientationchange', () => this.emitChange(UnistyleDependency.Orientation))
         window.addEventListener('resize', () => this.emitChange(UnistyleDependency.Dimensions))
     }

package/src/web/mock.ts

@@ -6,7 +6,6 @@ export const StatusBar: StatusBarSpec = {
     height: 0,
     setStyle: () => {},
     setHidden: () => {},
-    setBackgroundColor: () => {},
     equals: () => true,
     toString: () => 'StatusBar',
     __type: 'web',
@@ -17,8 +16,8 @@ export const NavigationBar: NavigationBarSpec = {
     width: 0,
     height: 0,
     setHidden: () => {},
-    setBackgroundColor: () => {},
     equals: () => true,
+    dispose: () => {},
     toString: () => 'NavigationBar',
     __type: 'web',
     name: 'NavigationBar'

package/src/web/runtime.ts

@@ -5,7 +5,7 @@ import { WebContentSizeCategory } from '../types'
 import { UnistylesListener } from './listener'
 import { NavigationBar, StatusBar } from './mock'
 import { UnistylesState } from './state'
-import { hexToRGBA, isServer, schemeToTheme } from './utils'
+import { isServer, schemeToTheme } from './utils'
 
 class UnistylesRuntimeBuilder {
     lightMedia = this.getLightMedia()
@@ -47,6 +47,10 @@ class UnistylesRuntimeBuilder {
     }
 
     get themeName() {
+        if (UnistylesState.hasAdaptiveThemes) {
+            return schemeToTheme(this.colorScheme) as AppThemeName
+        }
+
         return UnistylesState.themeName
     }
 
@@ -167,12 +171,12 @@ class UnistylesRuntimeBuilder {
         this.setTheme(schemeToTheme(UnistylesRuntime.colorScheme) as AppThemeName)
     }
 
-    setRootViewBackgroundColor = (hex: string, alpha?: number) => {
+    setRootViewBackgroundColor = (color: string) => {
         if (isServer()) {
             return
         }
 
-        document.documentElement.style.backgroundColor = alpha ? hexToRGBA(hex, alpha) : hex
+        document.documentElement.style.backgroundColor = color
     }
 
     setImmersiveMode = () => {}

package/src/web/shadowRegistry.ts

@@ -2,7 +2,8 @@ import type { UnistylesValues } from '../types'
 import { convertUnistyles } from './convert'
 import { UnistylesListener } from './listener'
 import { UnistylesRegistry } from './registry'
-import { deepMergeObjects, equal, extractSecrets, extractUnistyleDependencies, isInDocument } from './utils'
+import { deepMergeObjects } from '../utils'
+import { equal, extractSecrets, extractUnistyleDependencies, isInDocument } from './utils'
 import { getVariants } from './variants'
 
 type Style = UnistylesValues | ((...args: Array<any>) => UnistylesValues)
@@ -19,27 +20,13 @@ class UnistylesShadowRegistryBuilder {
     private resultsMap = new Map<HTMLElement, UnistylesValues>()
     private hashMap = new Map<HTMLElement, string>()
     private classNamesMap = new Map<HTMLElement, Array<string>>()
-    private timeoutMap = new Map<HTMLElement, NodeJS.Timeout>()
-    private queuedResultMap = new Map<HTMLElement, Record<string, any>>()
 
-    add = (ref: any, _style?: Style | Array<Style>, _variants?: Record<string, any>, _args?: Array<any>) => new Promise<Array<string>>(resolve => {
+    add = (ref: any, _style: Array<Style>, _variants: Record<string, any> | undefined, _args: Array<Array<any>>) => {
         // Style is not provided
         if (!_style) {
             return
         }
 
-        // Array of styles
-        if (Array.isArray(_style)) {
-            _style.forEach(style => this.add(ref, style, _variants, _args))
-
-            return
-        }
-
-        // Not a unistyle
-        if (!Object.keys(_style).some(key => key.startsWith('__uni__'))) {
-            return
-        }
-
         // Ref is unmounted, remove style tags from the document
         if (ref === null) {
             const secrets = extractSecrets(_style)
@@ -68,70 +55,34 @@ class UnistylesShadowRegistryBuilder {
             return
         }
 
-        extractSecrets(_style).forEach(secret => {
+        const styles = _style.filter(style => Object.keys(style ?? {}).some(key => key.startsWith('__uni__')))
+
+        // No unistyles
+        if (styles.length === 0) {
+            return
+        }
+
+        const parsedStyles = styles.flatMap((style, styleIndex) => extractSecrets(style).map(secret => {
             const { __uni__key, __uni__stylesheet, __uni__variants, __uni__args = [], __uni__refs } = secret
             const newComputedStylesheet = UnistylesRegistry.getComputedStylesheet(__uni__stylesheet)
             const style = newComputedStylesheet[__uni__key]!
-            const args = _args ?? __uni__args
             const variants = _variants && Object.keys(_variants).length > 0 ? _variants : __uni__variants
+            const args = _args[styleIndex] ? _args[styleIndex] : __uni__args
             const result = typeof style === 'function'
                 ? style(...args)
                 : style
             const { variantsResult } = Object.fromEntries(getVariants({ variantsResult: result }, variants))
             const resultWithVariants = deepMergeObjects(result, variantsResult ?? {})
+            const dependencies = extractUnistyleDependencies(resultWithVariants)
 
-            // Get stored result from queue
-            const storedResult = this.queuedResultMap.get(ref) ?? {}
-            // Merge stored result with new result
-            const newResult = deepMergeObjects(storedResult, resultWithVariants)
-            const timeout = this.timeoutMap.get(ref)
-
-            // Add callback to the queue and remove old one
-            this.queuedResultMap.set(ref, newResult)
-            clearTimeout(timeout)
-            this.timeoutMap.set(ref, setTimeout(() => {
-                const oldResult = this.resultsMap.get(ref)
-
-                // If results are the same do nothing
-                if (equal(oldResult, newResult)) {
-                    return
-                }
-
-                const oldClassNames = this.classNamesMap.get(ref)
-
-                // Remove old styles
-                if (oldResult) {
-                    UnistylesRegistry.remove(oldResult)
-                }
-
-                // Remove old classnames from the ref
-                oldClassNames?.forEach(className => ref.classList.remove(className))
-                this.resultsMap.set(ref, newResult)
+            if (typeof __uni__stylesheet === 'function') {
+                // Add dependencies from dynamic styles to stylesheet
+                UnistylesRegistry.addDependenciesToStylesheet(__uni__stylesheet, dependencies)
+            }
 
-                const { hash, existingHash } = UnistylesRegistry.add(newResult)
-                const injectedClassNames: Array<string> = newResult?._web?._classNames ?? []
-                const newClassNames = injectedClassNames.concat(hash)
-                const dependencies = extractUnistyleDependencies(newResult)
+            __uni__refs.add(ref)
 
-                if (typeof __uni__stylesheet === 'function') {
-                    // Add dependencies from dynamic styles to stylesheet
-                    UnistylesRegistry.addDependenciesToStylesheet(__uni__stylesheet, dependencies)
-                }
-
-                __uni__refs.add(ref)
-                this.classNamesMap.set(ref, newClassNames)
-                // Add new classnames to the ref
-                ref.classList.add(...newClassNames)
-                resolve(newClassNames)
-
-                // If it is new hash add it to the map to use for the listener
-                if (!existingHash) {
-                    this.hashMap.set(ref, hash)
-                }
-            }, 0))
-
-            // Listen for theme / runtime changes
-            const dispose = UnistylesListener.addListeners(extractUnistyleDependencies(newResult), () => {
+            const dispose = UnistylesListener.addListeners(extractUnistyleDependencies(resultWithVariants), () => {
                 const hash = this.hashMap.get(ref)
 
                 // Dispose listener if there is no hash
@@ -151,8 +102,42 @@ class UnistylesShadowRegistryBuilder {
 
                 UnistylesRegistry.applyStyles(hash, convertUnistyles(resultWithVariants))
             })
-        })
-    })
+
+            return resultWithVariants as UnistylesValues
+        }))
+        const combinedStyles = deepMergeObjects(...parsedStyles)
+        const oldStyles = this.resultsMap.get(ref)
+
+        if (equal(combinedStyles, oldStyles)) {
+            return
+        }
+
+        const oldClassNames = this.classNamesMap.get(ref)
+
+        // Remove old styles
+        if (oldStyles) {
+            UnistylesRegistry.remove(oldStyles)
+        }
+
+        // Remove old classnames from the ref
+        oldClassNames?.forEach(className => ref.classList.remove(className))
+        this.resultsMap.set(ref, combinedStyles)
+
+        const { hash, existingHash } = UnistylesRegistry.add(combinedStyles)
+        const injectedClassNames = combinedStyles?._web?._classNames ?? []
+        const newClassNames = (Array.isArray(injectedClassNames) ? injectedClassNames : [injectedClassNames]).concat(hash)
+
+        this.classNamesMap.set(ref, newClassNames)
+        // Add new classnames to the ref
+        ref.classList.add(...newClassNames)
+
+        // If it is new hash add it to the map to use for the listener
+        if (!existingHash) {
+            this.hashMap.set(ref, hash)
+        }
+
+        return newClassNames
+    }
 
     remove = () => {}
 }

package/src/web/utils/common.ts

@@ -7,32 +7,6 @@ export const keyInObject = <T extends Record<string, any>>(obj: T, key: Property
 
 export const isServer = () => typeof window === 'undefined'
 
-/**
-* Deeply merges properties of passed object
-*/
-export const deepMergeObjects = <T extends Record<PropertyKey, any>>(...sources: Array<T>) => {
-    const target = {} as T
-
-    sources.forEach(source => {
-        Object.keys(source).forEach(key => {
-            const sourceValue = source[key]
-            const targetValue = target[key]
-
-            if (Object(sourceValue) == sourceValue && Object(targetValue) === targetValue) {
-                // @ts-expect-error - can't assign to generic
-                target[key] = deepMergeObjects(targetValue, sourceValue)
-
-                return
-            }
-
-            // @ts-expect-error - can't assign to generic
-            target[key] = sourceValue
-        })
-    })
-
-    return target
-}
-
 export const warn = (message: string) => console.warn(`🦄 [react-native-unistyles] ${message}`)
 
 export const equal = <T>(a: T, b: T) => {

package/src/web/utils/unistyle.ts

@@ -5,7 +5,7 @@ import { isUnistylesMq, parseMq } from '../../mq'
 import { UnistylesState } from '../state'
 import { keyInObject, reduceObject } from './common'
 
-export const schemeToTheme = (scheme: ColorScheme): string => {
+export const schemeToTheme = (scheme: ColorScheme) => {
     switch (scheme) {
         case ColorScheme.Dark:
             return 'dark'

package/src/web/variants/getVariants.ts

@@ -1,5 +1,5 @@
 import type { ReactNativeStyleSheet, StyleSheet } from '../../types'
-import { deepMergeObjects } from '../utils'
+import { deepMergeObjects } from '../../utils'
 
 type StylesWithVariants = {
     variants: Record<string, any>,