react-native-unistyles 3.0.0-beta.1 → 3.0.0-beta.2

package/src/core/withUnistyles/withUnistyles.native.tsx

@@ -0,0 +1,96 @@
+import React, { forwardRef, useEffect, useRef, type ComponentType } from 'react'
+import { StyleSheet, UnistyleDependency } from '../../specs'
+import type { PartialBy } from '../../types/common'
+import { deepMergeObjects } from '../../utils'
+import { SUPPORTED_STYLE_PROPS } from './types'
+import type { Mappings, SupportedStyleProps } from './types'
+import { useDependencies } from './useDependencies'
+
+// @ts-expect-error
+type GenericComponentProps<P> = ComponentProps<P>
+// @ts-expect-error
+type GenericComponentRef<T> = ComponentRef<T>
+
+export const withUnistyles = <TComponent, TMappings extends GenericComponentProps<TComponent>>(Component: TComponent, mappings?: Mappings<TMappings>) => {
+    type TProps = GenericComponentProps<TComponent>
+    type PropsWithUnistyles = PartialBy<TProps, keyof TMappings | SupportedStyleProps> & {
+        uniProps?: Mappings<TProps>
+    }
+
+    return forwardRef<GenericComponentRef<TComponent>, PropsWithUnistyles>((props, ref) => {
+        const narrowedProps = props as PropsWithUnistyles
+        const stylesRef = useRef<Record<string, any>>({})
+        const isForcedRef = useRef(false)
+        const NativeComponent = Component as ComponentType
+
+        if (!isForcedRef.current) {
+            SUPPORTED_STYLE_PROPS.forEach(propName => {
+                if (narrowedProps?.[propName]) {
+                    if (Array.isArray(narrowedProps[propName])) {
+                        console.error(`🦄 Unistyles: withUnistyles requires ${propName} to be an object. Please check props for component: ${NativeComponent.displayName}`)
+                    }
+
+                    // @ts-expect-error - this is hidden from TS
+                    if (props[propName].__unistyles_name && !props[propName].__proto__?.getStyle) {
+                        console.error(`🦄 Unistyles: withUnistyles received style that is not bound. You likely used the spread operator on a Unistyle style. Please check props for component: ${NativeComponent.displayName}`)
+                    }
+
+                    stylesRef.current = {
+                        ...stylesRef.current,
+                        [propName]: narrowedProps[propName]
+                    }
+                }
+            })
+        }
+
+        const { mappingsCallback, addDependencies } = useDependencies(({ dependencies, updateTheme, updateRuntime }) => {
+            const listensToTheme = dependencies.includes(UnistyleDependency.Theme)
+            // @ts-expect-error - this is hidden from TS
+            const dispose = StyleSheet.addChangeListener(changedDependencies => {
+                if (listensToTheme && changedDependencies.includes(UnistyleDependency.Theme)) {
+                    updateTheme()
+                }
+
+                if (changedDependencies.some((dependency: UnistyleDependency) => dependencies.includes(dependency))) {
+                    SUPPORTED_STYLE_PROPS.forEach(propName => {
+                        if (narrowedProps?.[propName]) {
+                            stylesRef.current = {
+                                ...stylesRef.current,
+                                // @ts-expect-error - this is hidden from TS
+                                [propName]: props[propName].__proto__?.getStyle?.() || props[propName]
+                            }
+
+                            isForcedRef.current = true
+                        }
+                    })
+
+                    updateRuntime()
+                }
+            })
+
+            return () => dispose()
+        })
+
+        useEffect(() => {
+            const styleDependencies = narrowedProps.style?.__proto__.uni__dependencies ?? [] as Array<UnistyleDependency>
+            const contentContainerStyleDependencies = narrowedProps.contentContainerStyle?.__proto__.uni__dependencies ?? [] as Array<UnistyleDependency>
+
+            addDependencies([...styleDependencies, ...contentContainerStyleDependencies])
+        }, [narrowedProps.style, narrowedProps.contentContainerStyle])
+
+        const mappingProps = mappings ? mappingsCallback(mappings) : {}
+        const unistyleProps = narrowedProps.uniProps ? mappingsCallback(narrowedProps.uniProps) : {}
+        const finalProps = deepMergeObjects<Record<string, any>>(mappingProps, unistyleProps, props)
+
+        // override with Unistyles styles
+        SUPPORTED_STYLE_PROPS.forEach(propName => {
+            if (finalProps[propName]) {
+                finalProps[propName] = stylesRef.current[propName]
+            }
+        })
+
+        isForcedRef.current = false
+
+        return <NativeComponent {...finalProps as TProps} ref={ref} />
+    })
+}

package/src/core/withUnistyles/withUnistyles.tsx

@@ -0,0 +1,90 @@
+import React, { useEffect, useState, type ComponentType, forwardRef, useRef, useMemo, type ComponentProps, type ComponentRef } from 'react'
+import type { PartialBy } from '../../types/common'
+import { UnistylesListener } from '../../web/listener'
+import { UnistylesShadowRegistry } from '../../web'
+import { equal } from '../../web/utils'
+import { deepMergeObjects } from '../../utils'
+import type { Mappings, SupportedStyleProps } from './types'
+import { useDependencies } from './useDependencies'
+import { UnistyleDependency } from '../../specs/NativePlatform'
+import type { UnistylesValues } from '../../types'
+
+const useShadowRegistry = (style?: Record<string, any>) => {
+    const [ref] = useState(document.createElement('div'))
+    const oldClassNames = useRef<Array<string>>([])
+    const classNames = useMemo(() => {
+        if (!style) {
+            return []
+        }
+
+        const newClassNames = UnistylesShadowRegistry.add(ref, [style]) ?? []
+
+        if (equal(oldClassNames.current, newClassNames)) {
+            return oldClassNames.current
+        }
+
+        oldClassNames.current = newClassNames
+
+        return newClassNames
+    }, [style])
+
+    useEffect(() => () => {
+        // Remove styles on unmount
+        if (style) {
+            UnistylesShadowRegistry.add(null, [style])
+        }
+    })
+
+    return classNames
+}
+
+// @ts-expect-error
+type GenericComponentProps<T> = ComponentProps<T>
+// @ts-expect-error
+type GenericComponentRef<T> = ComponentRef<T>
+
+export const withUnistyles = <TComponent, TMappings extends GenericComponentProps<TComponent>>(Component: TComponent, mappings?: Mappings<TMappings>) => {
+    type TProps = GenericComponentProps<TComponent>
+    type PropsWithUnistyles = PartialBy<TProps, keyof TMappings | SupportedStyleProps> & {
+        uniProps?: Mappings<TProps>
+        style?: UnistylesValues,
+        contentContainerStyle?: UnistylesValues
+    }
+
+    return forwardRef<GenericComponentRef<TComponent>, PropsWithUnistyles>((props, ref) => {
+        const narrowedProps = props as PropsWithUnistyles
+        const styleClassNames = useShadowRegistry(narrowedProps.style)
+        const contentContainerStyleClassNames = useShadowRegistry(narrowedProps.contentContainerStyle)
+        const { mappingsCallback } = useDependencies(({ dependencies, updateTheme, updateRuntime }) => {
+            const disposeTheme = UnistylesListener.addListeners(dependencies.filter(dependency => dependency === UnistyleDependency.Theme), updateTheme)
+            const disposeRuntime = UnistylesListener.addListeners(dependencies.filter(dependency => dependency !== UnistyleDependency.Theme), updateRuntime)
+
+            return () => {
+                disposeTheme()
+                disposeRuntime()
+            }
+        })
+        const mappingsProps = mappings ? mappingsCallback(mappings) : {}
+        const unistyleProps = narrowedProps.uniProps ? mappingsCallback(narrowedProps.uniProps) : {}
+
+        const combinedProps = {
+            ...deepMergeObjects(mappingsProps, unistyleProps, props),
+            ...narrowedProps.style ? {
+                style: {
+                    $$css: true,
+                    'unistyles': styleClassNames.join(' ')
+                },
+            } : {},
+            ...narrowedProps.contentContainerStyle ? {
+                style: {
+                    $$css: true,
+                    'unistyles': contentContainerStyleClassNames.join(' ')
+                },
+            } : {},
+        } as any
+
+        const NativeComponent = Component as ComponentType
+
+        return <NativeComponent {...combinedProps} ref={ref} />
+    })
+}

package/src/hooks/useMedia.native.ts

@@ -0,0 +1,65 @@
+import { useEffect, useLayoutEffect, useState } from 'react'
+import { StyleSheet, UnistyleDependency, UnistylesRuntime } from '../specs'
+import { isValidMq, parseMq, isUnistylesMq } from '../mq'
+
+export const useMedia = (config: { mq: symbol }) => {
+    const computeIsVisible = (): boolean => {
+        const maybeMq = config.mq as unknown as string
+
+        if (!isUnistylesMq(maybeMq)) {
+            console.error(`🦄 Unistyles: Received invalid mq: ${maybeMq}`)
+
+            return false
+        }
+
+        const parsedMq = parseMq(maybeMq)
+
+        if (!isValidMq(parsedMq)) {
+            console.error(`🦄 Unistyles: Received invalid mq where min is greater than max: ${maybeMq}`)
+
+            return false
+        }
+
+        const { width, height } = UnistylesRuntime.screen
+
+        if (parsedMq.minWidth !== undefined && width < parsedMq.minWidth) {
+            return false
+        }
+
+        if (parsedMq.maxWidth !== undefined && width > parsedMq.maxWidth) {
+            return false
+        }
+
+        if (parsedMq.minHeight !== undefined && height < parsedMq.minHeight) {
+            return false
+        }
+
+        if (parsedMq.maxHeight !== undefined && height > parsedMq.maxHeight) {
+            return false
+        }
+
+        return true
+    }
+    const [isVisible, setIsVisible] = useState<boolean | null>(computeIsVisible())
+
+    useEffect(() => {
+        setIsVisible(computeIsVisible())
+    }, [config.mq])
+
+    useLayoutEffect(() => {
+        // @ts-expect-error - this is hidden from TS
+        const removeChangeListener = StyleSheet.addChangeListener((dependencies: Array<UnistyleDependency>) => {
+            if (dependencies.includes(UnistyleDependency.Breakpoints)) {
+                setIsVisible(computeIsVisible())
+            }
+        })
+
+        return () => {
+            removeChangeListener()
+        }
+    }, [config.mq])
+
+    return {
+        isVisible
+    }
+}

package/src/hooks/useMedia.ts

@@ -1,9 +1,9 @@
-import { useEffect, useLayoutEffect, useState } from 'react'
-import { StyleSheet, UnistyleDependency, UnistylesRuntime, type UnistylesStyleSheet } from '../specs'
-import { isValidMq, parseMq, isUnistylesMq } from '../mq'
+import { useEffect, useRef, useState } from 'react'
+import { isUnistylesMq, isValidMq, parseMq } from '../mq'
 
 export const useMedia = (config: { mq: symbol }) => {
-    const computeIsVisible = (): boolean => {
+    const disposeRef = useRef(() => {})
+    const [isVisible, setIsVisible] = useState(() => {
         const maybeMq = config.mq as unknown as string
 
         if (!isUnistylesMq(maybeMq)) {
@@ -20,43 +20,26 @@ export const useMedia = (config: { mq: symbol }) => {
             return false
         }
 
-        const { width, height } = UnistylesRuntime.screen
+        const { minWidth, maxWidth, minHeight, maxHeight } = parsedMq
 
-        if (parsedMq.minWidth !== undefined && width < parsedMq.minWidth) {
-            return false
-        }
+        const mediaQuery = [
+            minWidth !== undefined ? `(min-width: ${minWidth}px)` : undefined,
+            maxWidth !== undefined ? `(max-width: ${maxWidth}px)` : undefined,
+            minHeight !== undefined ? `(min-height: ${minHeight}px)` : undefined,
+            maxHeight !== undefined ? `(max-height: ${maxHeight}px)` : undefined
+        ].filter(Boolean).join(' and ')
 
-        if (parsedMq.maxWidth !== undefined && width > parsedMq.maxWidth) {
-            return false
-        }
+        const media = window.matchMedia(mediaQuery)
+        const handler = (event: MediaQueryListEvent) => setIsVisible(event.matches)
 
-        if (parsedMq.minHeight !== undefined && height < parsedMq.minHeight) {
-            return false
-        }
+        media.addEventListener('change', handler)
+        disposeRef.current = () => media.removeEventListener('change', handler)
 
-        if (parsedMq.maxHeight !== undefined && height > parsedMq.maxHeight) {
-            return false
-        }
-
-        return true
-    }
-    const [isVisible, setIsVisible] = useState<boolean | null>(computeIsVisible())
+        return media.matches
+    })
 
-    useEffect(() => {
-        setIsVisible(computeIsVisible())
-    }, [config.mq])
-
-    useLayoutEffect(() => {
-        const removeChangeListener = (StyleSheet as UnistylesStyleSheet).addChangeListener(dependencies => {
-            if (dependencies.includes(UnistyleDependency.Breakpoints)) {
-                setIsVisible(computeIsVisible())
-            }
-        })
-
-        return () => {
-            removeChangeListener()
-        }
-    }, [config.mq])
+    // Unmount
+    useEffect(() => () => disposeRef.current(), [])
 
     return {
         isVisible

package/src/index.ts

@@ -1,6 +1,6 @@
 export * from './specs'
 export { mq } from './mq'
 export type { UnistylesThemes, UnistylesBreakpoints } from './global'
-export { createUnistylesComponent, getBoundArgs } from './core'
+export { createUnistylesComponent, withUnistyles } from './core'
 export type { UnistylesVariants } from './types'
-export * from './components'
+export { Display, Hide, Variants, ScopedTheme } from './components'

package/src/specs/ShadowRegistry/index.ts

@@ -2,13 +2,19 @@ import { NitroModules } from 'react-native-nitro-modules'
 import type { UnistylesShadowRegistry as UnistylesShadowRegistrySpec } from './ShadowRegistry.nitro'
 import type { ShadowNode, Unistyle, ViewHandle } from './types'
 
+type Variants = Record<string, string | boolean | undefined>
+
 interface ShadowRegistry extends UnistylesShadowRegistrySpec {
     // Babel API
-    add(handle?: ViewHandle, styles?: Array<Unistyle>, variants?: Record<string, string | boolean>, args?: Array<Array<any>>, id?: string): void,
+    add(handle?: ViewHandle, styles?: Array<Unistyle>): void,
     remove(handle?: ViewHandle): void,
     // JSI
-    link(node: ShadowNode, styles?: Array<Unistyle>, variants?: Record<string, string | boolean>, args?: Array<Array<any>>, id?: string): void,
-    unlink(node: ShadowNode): void
+    link(node: ShadowNode, styles?: Array<Unistyle>): void,
+    unlink(node: ShadowNode): void,
+    selectVariants(variants?: Variants): void,
+    setScopedTheme(themeName?: string): void,
+    getScopedTheme(): string | undefined,
+    getVariants(): Record<string, string | boolean | undefined> | undefined,
 }
 
 const HybridShadowRegistry = NitroModules.createHybridObject<ShadowRegistry>('UnistylesShadowRegistry')
@@ -17,6 +23,9 @@ const findShadowNodeForHandle = (handle: ViewHandle) => {
     const node = handle?.__internalInstanceHandle?.stateNode?.node
         ?? handle?.getScrollResponder?.()?.getNativeScrollRef?.()?.__internalInstanceHandle?.stateNode?.node
         ?? handle?.getNativeScrollRef?.()?.__internalInstanceHandle?.stateNode?.node
+        ?? handle?._viewRef?.__internalInstanceHandle?.stateNode?.node
+        ?? handle?.viewRef?.current?.__internalInstanceHandle?.stateNode?.node
+        ?? handle?._nativeRef?.__internalInstanceHandle?.stateNode?.node
 
     if (!node) {
         throw new Error(`Unistyles: Could not find shadow node for one of your components of type ${handle?.__internalInstanceHandle?.elementType ?? 'unknown'}`)
@@ -25,7 +34,7 @@ const findShadowNodeForHandle = (handle: ViewHandle) => {
     return node
 }
 
-HybridShadowRegistry.add = (handle, styles, variants, args, id) => {
+HybridShadowRegistry.add = (handle, styles) => {
     // virtualized nodes can be null
     if (!handle || !styles || !Array.isArray(styles)) {
         return
@@ -36,7 +45,7 @@ HybridShadowRegistry.add = (handle, styles, variants, args, id) => {
         .filter(style => !style?.initial?.updater)
         .filter(Boolean)
 
-    HybridShadowRegistry.link(findShadowNodeForHandle(handle), filteredStyles, variants ?? {}, args ?? [], id)
+    HybridShadowRegistry.link(findShadowNodeForHandle(handle), filteredStyles)
 }
 
 HybridShadowRegistry.remove = handle => {

package/src/specs/ShadowRegistry/types.ts

@@ -22,7 +22,24 @@ export type ViewHandle = {
         __internalInstanceHandle?: {
             stateNode?: StateNode
         }
-    })
+    }),
+    _viewRef?: {
+        __internalInstanceHandle?: {
+            stateNode?: StateNode
+        }
+    },
+    viewRef?: {
+        current?: {
+            __internalInstanceHandle?: {
+                stateNode?: StateNode
+            }
+        }
+    },
+    _nativeRef?: {
+        __internalInstanceHandle?: {
+            stateNode?: StateNode
+        }
+    }
 }
 
 export type Unistyle = {

package/src/specs/index.native.ts

@@ -0,0 +1,27 @@
+import './TurboUnistyles'
+
+import { Runtime } from './UnistylesRuntime'
+import { StyleSheet } from './StyleSheet'
+import type { UnistylesStyleSheet } from './StyleSheet'
+import { UnistylesShadowRegistry } from './ShadowRegistry'
+import type { UnistylesMiniRuntime } from './UnistylesRuntime'
+import { StatusBarStyle, ColorScheme, Orientation } from './types'
+import { UnistyleDependency } from './NativePlatform'
+
+export {
+    StatusBarStyle,
+    ColorScheme,
+    Orientation,
+    UnistyleDependency
+}
+
+export {
+    UnistylesShadowRegistry,
+    Runtime as UnistylesRuntime,
+    StyleSheet,
+}
+
+export type {
+    UnistylesMiniRuntime,
+    UnistylesStyleSheet
+}

package/src/specs/index.ts

@@ -1,27 +1,3 @@
-import './TurboUnistyles'
-
-import { Runtime } from './UnistylesRuntime'
-import { StyleSheet } from './StyleSheet'
-import type { UnistylesStyleSheet } from './StyleSheet'
-import { UnistylesShadowRegistry } from './ShadowRegistry'
-import type { UnistylesMiniRuntime } from './UnistylesRuntime'
-import { StatusBarStyle, ColorScheme, Orientation } from './types'
-import { UnistyleDependency } from './NativePlatform'
-
-export {
-    StatusBarStyle,
-    ColorScheme,
-    Orientation,
-    UnistyleDependency
-}
-
-export {
-    UnistylesShadowRegistry,
-    Runtime as UnistylesRuntime,
-    StyleSheet,
-}
-
-export type {
-    UnistylesMiniRuntime,
-    UnistylesStyleSheet
-}
+export * from '../web'
+export type { UnistylesMiniRuntime } from './UnistylesRuntime'
+export { UnistyleDependency } from './NativePlatform'

package/src/web/create.ts

@@ -1,9 +1,11 @@
-import type { ReactNativeStyleSheet } from '../types'
 import type { StyleSheetWithSuperPowers, StyleSheet } from '../types/stylesheet'
-import { assignSecrets, reduceObject, getStyles, error } from './utils'
-import { deepMergeObjects } from '../utils'
+import { assignSecrets, error, removeInlineStyles } from './utils'
 import { UnistylesRuntime } from './runtime'
-import { getVariants } from './variants'
+import { UnistylesShadowRegistry } from '../specs'
+
+const useVariants = ['useVariants', (variants: Record<string, string | boolean>) => {
+    UnistylesShadowRegistry.selectVariants(variants)
+}]
 
 export const create = (stylesheet: StyleSheetWithSuperPowers<StyleSheet>, id?: string) => {
     if (!id) {
@@ -13,45 +15,25 @@ export const create = (stylesheet: StyleSheetWithSuperPowers<StyleSheet>, id?: s
     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()
+        __uni__refs: new Set()
     })
 
-    const styles = reduceObject(computedStylesheet, (value, _key) => {
-        const key = String(_key)
-
+    const styleSheetStyles = Object.entries(computedStylesheet).map(([key, value]) => {
         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 = deepMergeObjects(result, variants[key] ?? {})
+            return [key, (...args: Array<any>) => {
+                const result = removeInlineStyles(value(...args))
 
-                // Add secrets to result of dynamic styles function
-                return addSecrets(getStyles(resultWithVariants), key, args)
-            }
-
-            // Add secrets to dynamic styles function
-            return addSecrets(dynamicStyle, key)
+                return addSecrets(result, key, args)
+            }]
         }
 
-        // Add secrets to static styles
-        return addSecrets(getStyles(value), key)
-    }) as ReactNativeStyleSheet<StyleSheet>
-
-    // Inject useVariants hook to styles
-    Object.defineProperty(styles, 'useVariants', {
-        value: (variants: Record<string, string | boolean>) => {
-            Object.entries(variants).forEach(([key, value]) => selectedVariants.set(key, value))
-        },
-        configurable: false,
+        return [key, addSecrets(removeInlineStyles(value), key)]
     })
 
-    return styles
+    return Object.fromEntries(styleSheetStyles.concat([useVariants]))
 }

package/src/web/index.ts

@@ -1,10 +1,11 @@
 import { create } from './create'
 import { UnistylesState } from './state'
 import { deepMergeObjects } from '../utils'
+import type { CreateUnistylesStyleSheet } from '../types'
 
 export const StyleSheet = {
     configure: UnistylesState.init,
-    create,
+    create: create as CreateUnistylesStyleSheet,
     absoluteFill: {
         position: 'absolute',
         left: 0,
@@ -21,7 +22,7 @@ export const StyleSheet = {
     },
     compose: (a: object, b: object) => deepMergeObjects(a, b),
     flatten: (...styles: Array<object>) => deepMergeObjects(...styles),
-    hairlineWidth: 1
+    hairlineWidth: 1 as number
 }
 
 export { UnistylesRuntime } from './runtime'

package/src/web/registry.ts

@@ -1,11 +1,10 @@
 import type { UnistylesTheme, UnistylesValues } from '../types'
 import type { StyleSheet, StyleSheetWithSuperPowers } from '../types/stylesheet'
 import { UnistylesRuntime } from './runtime'
-import { extractMediaQueryValue, keyInObject, getMediaQuery, generateHash, extractUnistyleDependencies } from './utils'
+import { extractMediaQueryValue, keyInObject, getMediaQuery, generateHash, extractUnistyleDependencies, error } from './utils'
 import { UnistylesListener } from './listener'
 import { convertUnistyles } from './convert'
-import type { UnistyleDependency } from '../specs/NativePlatform'
-import type { UnistylesMiniRuntime } from '../specs'
+import type { UnistylesMiniRuntime, UnistyleDependency } from '../specs'
 
 type ApplyRuleProps = {
     hash: string,
@@ -39,11 +38,21 @@ class UnistylesRegistryBuilder {
         return tag
     }
 
-    getComputedStylesheet = (stylesheet: StyleSheetWithSuperPowers<StyleSheet>) => {
+    getComputedStylesheet = (stylesheet: StyleSheetWithSuperPowers<StyleSheet>, scopedThemeName?: UnistylesTheme) => {
         if (typeof stylesheet !== 'function') {
             return stylesheet
         }
 
+        if (scopedThemeName) {
+            const scopedTheme = UnistylesRuntime.getTheme(scopedThemeName)
+
+            if (!scopedTheme) {
+                throw error(`Unistyles: You're trying to use scoped theme '${scopedThemeName}' but it wasn't registered.`)
+            }
+
+            return stylesheet(scopedTheme, UnistylesRuntime.miniRuntime)
+        }
+
         const computedStylesheet = this.stylesheets.get(stylesheet)
 
         if (computedStylesheet) {
@@ -85,7 +94,7 @@ class UnistylesRegistryBuilder {
 
             counter.add(value)
             this.stylesCounter.set(hash, counter)
-            this.applyStyles(hash, convertUnistyles(value))
+            this.applyStyles(hash, value)
 
             return { hash, existingHash: false }
         }
@@ -96,7 +105,7 @@ class UnistylesRegistryBuilder {
     }
 
     applyStyles = (hash: string, styles: Record<string, any>) => {
-        Object.entries(styles).forEach(([key, value]) => {
+        Object.entries(convertUnistyles(styles)).forEach(([key, value]) => {
             if (!this.styleTag.sheet) {
                 return
             }

package/src/web/runtime.ts

@@ -4,9 +4,11 @@ import type { UnistylesMiniRuntime } from '../specs/UnistylesRuntime'
 import { WebContentSizeCategory } from '../types'
 import { UnistylesListener } from './listener'
 import { NavigationBar, StatusBar } from './mock'
-import { UnistylesState } from './state'
 import { error, isServer, schemeToTheme } from './utils'
 
+// Keep this import here, otherwise circular dependency will occur and break the build
+import { UnistylesState } from './state'
+
 class UnistylesRuntimeBuilder {
     lightMedia = this.getLightMedia()
     darkMedia = this.getDarkMedia()