react-native-unistyles 3.0.0-beta.4 → 3.0.0-beta.6

package/src/core/createUnistylesImageBackground.tsx

@@ -1,24 +1,50 @@
-import React from 'react'
-import type { ImageBackground, ImageBackgroundProps } from 'react-native'
+import React, { useLayoutEffect, useRef } from 'react'
+import type { Image, ImageBackground, ImageBackgroundProps } from 'react-native'
 import { UnistylesShadowRegistry } from '../specs'
 import { passForwardedRef } from './passForwardRef'
+import { maybeWarnAboutMultipleUnistyles } from './warn'
+import { copyComponentProperties } from '../utils'
 
-export const createUnistylesImageBackground = (Component: typeof ImageBackground) => React.forwardRef<ImageBackground, ImageBackgroundProps>((props, forwardedRef) => (
-    <Component
-        {...props}
-        ref={ref => passForwardedRef(props, ref, forwardedRef)}
-        imageRef={ref => {
-            const style = Array.isArray(props.imageStyle)
-                ? props.imageStyle
-                : [props.imageStyle]
-
-            // @ts-expect-error - This is hidden from TS
-            UnistylesShadowRegistry.add(ref, style)
+export const createUnistylesImageBackground = (Component: typeof ImageBackground) => {
+    const UnistylesImageBackground = React.forwardRef<ImageBackground, ImageBackgroundProps>((props, forwardedRef) => {
+        const storedImageRef = useRef<Image | null>(null)
 
+        useLayoutEffect(() => {
             return () => {
-                // @ts-expect-error - This is hidden from TS
-                UnistylesShadowRegistry.remove(ref)
+                if (storedImageRef.current) {
+                    // @ts-ignore
+                    UnistylesShadowRegistry.remove(storedImageRef.current)
+                }
             }
-        }}
-    />
-))
+        }, [])
+
+        // @ts-expect-error we don't know the type of the component
+        maybeWarnAboutMultipleUnistyles(props.style, 'ImageBackground')
+        // @ts-ignore we don't know the type of the component
+        maybeWarnAboutMultipleUnistyles(props.imageStyle, 'ImageBackground')
+
+        return (
+            <Component
+                {...props}
+                ref={ref => {
+                    passForwardedRef(props, ref, forwardedRef)
+
+                    return () => {
+                        // @ts-ignore
+                        UnistylesShadowRegistry.remove(ref)
+                    }
+                }}
+                imageRef={ref => {
+                    if (ref) {
+                        storedImageRef.current = ref
+                    }
+
+                    // @ts-expect-error web types are not compatible with RN styles
+                    UnistylesShadowRegistry.add(ref, props.imageStyle)
+                }}
+            />
+        )
+    })
+
+    return copyComponentProperties(Component, UnistylesImageBackground)
+}

package/src/core/getClassname.native.ts

@@ -0,0 +1 @@
+export const getClassName = () => undefined

package/src/core/getClassname.ts

@@ -0,0 +1,14 @@
+import type { UnistylesValues } from '../types'
+import { UnistylesWeb } from '../web'
+
+export const getClassName = (unistyle: UnistylesValues | undefined | Array<UnistylesValues>) => {
+    if (!unistyle) {
+        return undefined
+    }
+
+    const { hash, injectedClassName } = UnistylesWeb.shadowRegistry.addStyles(
+        Array.isArray(unistyle) ? unistyle.flat(Number.POSITIVE_INFINITY) : [unistyle]
+    )
+
+    return hash ? { $$css: true, hash, injectedClassName } : undefined
+}

package/src/core/index.ts

@@ -1,5 +1,6 @@
-export { createUnistylesComponent } from './createUnistylesComponent'
 export { createUnistylesElement } from './createUnistylesElement'
 export { createUnistylesImageBackground } from './createUnistylesImageBackground'
 export { withUnistyles } from './withUnistyles'
 export { passForwardedRef } from './passForwardRef'
+export { getClassName } from './getClassname'
+export { useUnistyles } from './useUnistyles'

package/src/core/passForwardRef.ts

@@ -19,11 +19,10 @@ export const passForwardedRef = <T>(
     }
     const forwardedRefReturnFn = passForwardedRef()
 
+    // @ts-expect-error hidden from TS
     UnistylesShadowRegistry.add(ref, props.style)
 
     return () => {
-        // @ts-expect-error - This is hidden from TS
-        UnistylesShadowRegistry.remove(ref)
         forwardedRefReturnFn?.()
     }
 }

package/src/core/useProxifiedUnistyles/index.ts

@@ -0,0 +1 @@
+export { useProxifiedUnistyles } from './useProxifiedUnistyles'

package/src/core/useProxifiedUnistyles/listener.native.ts

@@ -0,0 +1,18 @@
+import { StyleSheet, UnistyleDependency } from '../../specs'
+import type { ListenerProps } from './types'
+
+export const listener = ({ dependencies, updateTheme, updateRuntime }: ListenerProps) => {
+    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))) {
+            updateRuntime()
+        }
+    })
+
+    return () => dispose()
+}

package/src/core/useProxifiedUnistyles/listener.ts

@@ -0,0 +1,13 @@
+import { UnistyleDependency } from '../../specs'
+import { UnistylesWeb } from '../../web'
+import type { ListenerProps } from './types'
+
+export const listener = ({ dependencies, updateTheme, updateRuntime }: ListenerProps) => {
+    const disposeTheme = UnistylesWeb.listener.addListeners(dependencies.filter(dependency => dependency === UnistyleDependency.Theme), updateTheme)
+    const disposeRuntime = UnistylesWeb.listener.addListeners(dependencies.filter(dependency => dependency !== UnistyleDependency.Theme), updateRuntime)
+
+    return () => {
+        disposeTheme()
+        disposeRuntime()
+    }
+}

package/src/core/useProxifiedUnistyles/types.ts

@@ -0,0 +1,7 @@
+import type { UnistyleDependency } from '../../specs'
+
+export type ListenerProps = {
+    updateTheme: VoidFunction,
+    updateRuntime: VoidFunction,
+    dependencies: Array<UnistyleDependency>
+}

package/src/core/{withUnistyles/useDependencies.ts → useProxifiedUnistyles/useProxifiedUnistyles.ts}

@@ -3,7 +3,7 @@ import { UnistylesRuntime, UnistylesShadowRegistry, type UnistylesMiniRuntime }
 // It's imported that way because of circular dependency
 import { UnistyleDependency } from '../../specs/NativePlatform'
 import type { UnistylesTheme } from '../../types'
-import type { Mappings } from './types'
+import { listener } from './listener'
 
 const getMiniRuntime = (): UnistylesMiniRuntime => {
     // @ts-expect-error This is hidden from TS
@@ -26,13 +26,7 @@ const RTDependencyMap = {
     themeName: UnistyleDependency.ThemeName,
 } satisfies Partial<Record<keyof UnistylesMiniRuntime, UnistyleDependency>>
 
-type ListenerProps = {
-    updateTheme: VoidFunction,
-    updateRuntime: VoidFunction,
-    dependencies: Array<UnistyleDependency>
-}
-
-export const useDependencies = (listener: (props: ListenerProps) => VoidFunction) => {
+export const useProxifiedUnistyles = () => {
     const scopedTheme = UnistylesShadowRegistry.getScopedTheme() as UnistylesTheme
     const [dependencies] = useState(() => new Set<number>())
     const [theme, setTheme] = useState(UnistylesRuntime.getTheme(scopedTheme))
@@ -60,27 +54,26 @@ export const useDependencies = (listener: (props: ListenerProps) => VoidFunction
         return () => disposeRef.current?.()
     }, [dependencies.size])
 
-    return {
-        mappingsCallback: (callback: Mappings) => {
-            const proxifiedTheme = new Proxy(theme, {
-                get: (target, prop) => {
-                    dependencies.add(UnistyleDependency.Theme)
+    const proxifiedTheme = new Proxy(theme, {
+        get: (target, prop) => {
+            dependencies.add(UnistyleDependency.Theme)
 
-                    return target[prop]
-                }
-            })
-            const proxifiedRuntime = new Proxy(getMiniRuntime(), {
-                get: (target, prop) => {
-                    if (prop in RTDependencyMap) {
-                        dependencies.add(RTDependencyMap[prop as keyof typeof RTDependencyMap])
-                    }
+            return target[prop]
+        }
+    })
+    const proxifiedRuntime = new Proxy(getMiniRuntime(), {
+        get: (target, prop) => {
+            if (prop in RTDependencyMap) {
+                dependencies.add(RTDependencyMap[prop as keyof typeof RTDependencyMap])
+            }
 
-                    return target[prop as keyof typeof target]
-                }
-            })
+            return target[prop as keyof typeof target]
+        }
+    })
 
-            return callback(proxifiedTheme, proxifiedRuntime)
-        },
+    return {
+        proxifiedTheme,
+        proxifiedRuntime,
         addDependencies: (newDependencies: Array<UnistyleDependency>) => {
             const dependenciesSize = dependencies.size
 

package/src/core/useUnistyles.ts

@@ -0,0 +1,11 @@
+import type { UnistylesTheme } from '../types'
+import { useProxifiedUnistyles } from './useProxifiedUnistyles'
+
+export const useUnistyles = () => {
+    const { proxifiedRuntime, proxifiedTheme } = useProxifiedUnistyles()
+
+    return {
+        theme: proxifiedTheme as UnistylesTheme,
+        rt: proxifiedRuntime
+    }
+}

package/src/core/warn.ts

@@ -0,0 +1,13 @@
+import type { ViewStyle } from 'react-native'
+
+export const maybeWarnAboutMultipleUnistyles = (style: ViewStyle, displayName = 'Unknown') => {
+    if (__DEV__ && style && !Array.isArray(style)) {
+        const unistylesKeys = Object
+            .keys(style)
+            .filter(key => key.startsWith('unistyles-'))
+
+        if (unistylesKeys.length > 1) {
+            console.warn(`Unistyles: we detected style object with ${unistylesKeys.length} unistyles styles. This might cause no updates or unpredictable behavior. Please check style prop for "${displayName}" and use array syntax instead of object syntax.`)
+        }
+    }
+}

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

@@ -1,10 +1,10 @@
-import React, { forwardRef, useEffect, useRef, type ComponentType } from 'react'
-import { StyleSheet, UnistyleDependency } from '../../specs'
+import React, { forwardRef, useEffect, type ComponentType } from 'react'
+import type { 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'
+import { maybeWarnAboutMultipleUnistyles } from '../warn'
+import { useProxifiedUnistyles } from '../useProxifiedUnistyles'
 
 // @ts-expect-error
 type GenericComponentProps<P> = ComponentProps<P>
@@ -16,81 +16,52 @@ export const withUnistyles = <TComponent, TMappings extends GenericComponentProp
     type PropsWithUnistyles = PartialBy<TProps, keyof TMappings | SupportedStyleProps> & {
         uniProps?: Mappings<TProps>
     }
+    const getSecrets = (styleProps: Record<string, any> = {}): { uni__getStyles(): any, uni__dependencies: Array<UnistyleDependency> } => {
+        const unistyleKey = Object
+            .keys(styleProps)
+            .find(key => key.startsWith('unistyles-'))
+
+        return unistyleKey
+            ? styleProps[unistyleKey]
+            : {
+                uni__getStyles: () => styleProps,
+                uni__dependencies: [],
+            }
+    }
 
     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,
-                        // @ts-expect-error - this is hidden from TS
-                        [propName]: props[propName].__proto__?.getStyle?.() || props[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]
-                            }
+        // @ts-ignore we don't know the type of the component
+        maybeWarnAboutMultipleUnistyles(narrowedProps.style, `withUnistyles(${Component.displayName ?? Component.name ?? 'Unknown'})`)
+        // @ts-ignore we don't know the type of the component
+        maybeWarnAboutMultipleUnistyles(narrowedProps.contentContainerStyle, `withUnistyles(${Component.displayName ?? Component.name ?? 'Unknown'})`)
 
-                            isForcedRef.current = true
-                        }
-                    })
-
-                    updateRuntime()
-                }
-            })
-
-            return () => dispose()
-        })
+        const { proxifiedRuntime, proxifiedTheme, addDependencies } = useProxifiedUnistyles()
 
         useEffect(() => {
-            const styleDependencies = narrowedProps.style?.__proto__.uni__dependencies ?? [] as Array<UnistyleDependency>
-            const contentContainerStyleDependencies = narrowedProps.contentContainerStyle?.__proto__.uni__dependencies ?? [] as Array<UnistyleDependency>
+            const styleSecrets = getSecrets(narrowedProps.style)
+            const contentContainerStyleSecrets = getSecrets(narrowedProps.contentContainerStyle)
 
-            addDependencies([...styleDependencies, ...contentContainerStyleDependencies])
+            addDependencies(Array.from(new Set([...styleSecrets.uni__dependencies, ...contentContainerStyleSecrets.uni__dependencies])))
         }, [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
+        const mappingsProps = mappings ? mappings(proxifiedTheme, proxifiedRuntime) : {}
+        const unistyleProps = narrowedProps.uniProps ? narrowedProps.uniProps(proxifiedTheme, proxifiedRuntime) : {}
+
+        const styleSecrets = getSecrets(narrowedProps.style)
+        const contentContainerStyleSecrets = getSecrets(narrowedProps.contentContainerStyle)
+
+        const finalProps = {
+            ...deepMergeObjects(mappingsProps, unistyleProps, props),
+            ...narrowedProps.style ? {
+                style: styleSecrets.uni__getStyles(),
+            } : {},
+            ...narrowedProps.contentContainerStyle ? {
+                contentContainerStyle: contentContainerStyleSecrets.uni__getStyles(),
+            } : {},
+        } as any
 
         return <NativeComponent {...finalProps as TProps} ref={ref} />
     })

package/src/core/withUnistyles/withUnistyles.tsx

@@ -1,42 +1,11 @@
-import React, { useEffect, useState, type ComponentType, forwardRef, useRef, useMemo, type ComponentProps, type ComponentRef } from 'react'
+import React, { type ComponentType, forwardRef, 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
-}
+import { getClassName } from '../getClassname'
+import { maybeWarnAboutMultipleUnistyles } from '../warn'
+import { useProxifiedUnistyles } from '../useProxifiedUnistyles'
 
 // @ts-expect-error
 type GenericComponentProps<T> = ComponentProps<T>
@@ -47,42 +16,36 @@ export const withUnistyles = <TComponent, TMappings extends GenericComponentProp
     type TProps = GenericComponentProps<TComponent>
     type PropsWithUnistyles = PartialBy<TProps, keyof TMappings | SupportedStyleProps> & {
         uniProps?: Mappings<TProps>
+    }
+    type UnistyleStyles = {
         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)
+        const narrowedProps = props as PropsWithUnistyles & UnistyleStyles
+        const styleClassNames = getClassName(narrowedProps.style)
+        const contentContainerStyleClassNames = getClassName(narrowedProps.contentContainerStyle)
+        const { proxifiedRuntime, proxifiedTheme } = useProxifiedUnistyles()
 
-            return () => {
-                disposeTheme()
-                disposeRuntime()
-            }
-        })
-        const mappingsProps = mappings ? mappingsCallback(mappings) : {}
-        const unistyleProps = narrowedProps.uniProps ? mappingsCallback(narrowedProps.uniProps) : {}
+        const mappingsProps = mappings ? mappings(proxifiedTheme, proxifiedRuntime) : {}
+        const unistyleProps = narrowedProps.uniProps ? narrowedProps.uniProps(proxifiedTheme, proxifiedRuntime) : {}
 
         const combinedProps = {
             ...deepMergeObjects(mappingsProps, unistyleProps, props),
             ...narrowedProps.style ? {
-                style: {
-                    $$css: true,
-                    'unistyles': styleClassNames.join(' ')
-                },
+                style: styleClassNames,
             } : {},
             ...narrowedProps.contentContainerStyle ? {
-                style: {
-                    $$css: true,
-                    'unistyles': contentContainerStyleClassNames.join(' ')
-                },
+                style: contentContainerStyleClassNames,
             } : {},
         } as any
 
+        // @ts-ignore
+        maybeWarnAboutMultipleUnistyles(narrowedProps.style, `withUnistyles(${Component.displayName ?? Component.name ?? 'Unknown'})`)
+        // @ts-ignore
+        maybeWarnAboutMultipleUnistyles(narrowedProps.contentContainerStyle, `withUnistyles(${Component.displayName ?? Component.name ?? 'Unknown'})`)
+
         const NativeComponent = Component as ComponentType
 
         return <NativeComponent {...combinedProps} ref={ref} />

package/src/index.ts

@@ -1,6 +1,7 @@
 export { StyleSheet, UnistylesRuntime, StatusBar, NavigationBar } from './specs'
 export { mq } from './mq'
 export type { UnistylesThemes, UnistylesBreakpoints } from './global'
-export { createUnistylesComponent, withUnistyles } from './core'
+export { withUnistyles, useUnistyles } from './core'
 export type { UnistylesVariants } from './types'
-export { Display, Hide, Variants, ScopedTheme } from './components'
+export { Display, Hide, ScopedTheme } from './components'
+export { useServerUnistyles, hydrateServerUnistyles, getServerUnistyles, resetServerUnistyles } from './server'

package/src/server/getServerUnistyles.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { StyleSheet } from 'react-native'
+import { error, isServer } from '../web/utils'
+import { UnistylesWeb } from '../web'
+import { DefaultServerUnistylesSettings, type ServerUnistylesSettings } from './types'
+
+export const getServerUnistyles = ({ includeRNWStyles = true }: ServerUnistylesSettings = DefaultServerUnistylesSettings) => {
+    if (!isServer()) {
+        throw error('Server styles should only be read on the server')
+    }
+    // @ts-ignore
+    const rnwStyle: string | null = includeRNWStyles ? (StyleSheet?.getSheet().textContent ?? '') : null
+    const css = UnistylesWeb.registry.css.getStyles()
+    const state = UnistylesWeb.registry.css.getState()
+    return <>
+        {rnwStyle && <style id='rnw-style'>{rnwStyle}</style>}
+        <style id='unistyles-web'>{css}</style>
+        {/* biome-ignore lint/security/noDangerouslySetInnerHtml: Needs the json quotes to be unescaped */}
+        <script id='unistyles-script' dangerouslySetInnerHTML={{ __html: `window.__UNISTYLES_STATE__ = ${JSON.stringify(state)}`}} />
+    </>
+}

package/src/server/hydrateServerUnistyles.ts

@@ -0,0 +1,17 @@
+import { error, isServer } from '../web/utils'
+import { UnistylesWeb } from '../web'
+
+declare global {
+    interface Window {
+        // @ts-ignore
+        __UNISTYLES_STATE__: ReturnType<typeof UnistylesWeb.registry.css.getState>
+    }
+}
+
+export const hydrateServerUnistyles = () => {
+    if (isServer()) {
+        throw error('Server styles should only be hydrated on the client')
+    }
+    UnistylesWeb.registry.css.hydrate(window.__UNISTYLES_STATE__)
+    document.querySelector('#unistyles-script')?.remove()
+}

package/src/server/index.ts

@@ -0,0 +1,5 @@
+export { useServerUnistyles } from './useServerUnistyles'
+export { getServerUnistyles } from './getServerUnistyles'
+export { resetServerUnistyles } from './resetServerUnistyles'
+export { hydrateServerUnistyles } from './hydrateServerUnistyles'
+

package/src/server/resetServerUnistyles.ts

@@ -0,0 +1,9 @@
+import { error, isServer } from '../web/utils'
+import { UnistylesWeb } from '../web'
+
+export const resetServerUnistyles = () => {
+    if (!isServer()) {
+        throw error('Server styles should only be reset on the server')
+    }
+    UnistylesWeb.registry.reset()
+}

package/src/server/types.ts

@@ -0,0 +1,4 @@
+export type ServerUnistylesSettings = {
+  includeRNWStyles?: boolean
+}
+export const DefaultServerUnistylesSettings = {}

package/src/server/useServerUnistyles.tsx

@@ -0,0 +1,22 @@
+import React, { useRef } from 'react'
+import { isServer } from '../web/utils'
+import { DefaultServerUnistylesSettings, type ServerUnistylesSettings } from './types'
+import { getServerUnistyles } from './getServerUnistyles'
+import { resetServerUnistyles } from './resetServerUnistyles'
+import { hydrateServerUnistyles } from './hydrateServerUnistyles'
+
+export const useServerUnistyles = (settings: ServerUnistylesSettings = DefaultServerUnistylesSettings): React.ReactNode | null => {
+    const isServerInserted = useRef(false)
+
+    if (isServer() && !isServerInserted.current) {
+        isServerInserted.current = true
+        const components = getServerUnistyles(settings)
+        resetServerUnistyles()
+        return components
+    }
+
+    if (!isServer()) {
+        hydrateServerUnistyles()
+    }
+    return null
+}

package/src/specs/ShadowRegistry/index.ts

@@ -2,8 +2,6 @@ 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>): void,
@@ -11,10 +9,8 @@ interface ShadowRegistry extends UnistylesShadowRegistrySpec {
     // JSI
     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,
+    getScopedTheme(): string | undefined
 }
 
 const HybridShadowRegistry = NitroModules.createHybridObject<ShadowRegistry>('UnistylesShadowRegistry')
@@ -36,16 +32,23 @@ const findShadowNodeForHandle = (handle: ViewHandle) => {
 
 HybridShadowRegistry.add = (handle, styles) => {
     // virtualized nodes can be null
-    if (!handle || !styles || !Array.isArray(styles)) {
+    if (!handle || !styles) {
         return
     }
 
+    const stylesArray = Array.isArray(styles)
+        ? styles.flat()
+        : [styles]
+
     // filter Reanimated styles and styles that are undefined
-    const filteredStyles = styles
+    const filteredStyles = stylesArray
         .filter(style => !style?.initial?.updater)
-        .filter(Boolean)
+        .filter(style => style && Object.keys(style).length > 0)
+        .flat()
 
-    HybridShadowRegistry.link(findShadowNodeForHandle(handle), filteredStyles)
+    if (filteredStyles.length > 0) {
+        HybridShadowRegistry.link(findShadowNodeForHandle(handle), filteredStyles)
+    }
 }
 
 HybridShadowRegistry.remove = handle => {