react-native-unistyles 3.0.24 → 3.1.1

package/src/web/listener.ts

@@ -1,18 +1,51 @@
-import { UnistyleDependency } from '../specs/NativePlatform'
 import type { UnistylesServices } from './types'
 
+import { UnistyleDependency } from '../specs/NativePlatform'
+
 type Listener = (dependency: UnistyleDependency) => void
+type PublicListener = (dependencies: Array<UnistyleDependency>) => void
 
 export class UnistylesListener {
     private isInitialized = false
     private listeners = Array.from({ length: Object.keys(UnistyleDependency).length / 2 }, () => new Set<Listener>())
-    private stylesheetListeners = Array.from({ length: Object.keys(UnistyleDependency).length / 2 }, () => new Set<Listener>())
+    private stylesheetListeners = Array.from(
+        { length: Object.keys(UnistyleDependency).length / 2 },
+        () => new Set<Listener>(),
+    )
+    private changeListeners = new Set<PublicListener>()
 
     constructor(private services: UnistylesServices) {}
 
+    emitChanges = (dependencies: Array<UnistyleDependency>) => {
+        for (const dependency of dependencies) {
+            const stylesheetListeners = this.stylesheetListeners[dependency] ?? []
+
+            for (const listener of stylesheetListeners) {
+                listener(dependency)
+            }
+
+            const listeners = this.listeners[dependency] ?? []
+
+            for (const listener of listeners) {
+                listener(dependency)
+            }
+        }
+
+        for (const listener of this.changeListeners) {
+            listener(dependencies.slice())
+        }
+    }
+
     emitChange = (dependency: UnistyleDependency) => {
-        this.stylesheetListeners[dependency]?.forEach(listener => listener(dependency))
-        this.listeners[dependency]?.forEach(listener => listener(dependency))
+        this.emitChanges([dependency])
+    }
+
+    addChangeListener = (listener: PublicListener) => {
+        this.changeListeners.add(listener)
+
+        return () => {
+            this.changeListeners.delete(listener)
+        }
     }
 
     initListeners = () => {
@@ -22,29 +55,39 @@ export class UnistylesListener {
 
         this.isInitialized = true
 
-        this.services.runtime.darkMedia?.addEventListener('change', event => {
+        this.services.runtime.darkMedia?.addEventListener('change', (event) => {
             if (!event.matches) {
                 return
             }
 
-            this.emitChange(UnistyleDependency.ColorScheme)
-
             if (this.services.runtime.hasAdaptiveThemes) {
-                this.emitChange(UnistyleDependency.Theme)
-                this.emitChange(UnistyleDependency.ThemeName)
+                this.emitChanges([
+                    UnistyleDependency.ColorScheme,
+                    UnistyleDependency.Theme,
+                    UnistyleDependency.ThemeName,
+                ])
+
+                return
             }
+
+            this.emitChange(UnistyleDependency.ColorScheme)
         })
-        this.services.runtime.lightMedia?.addEventListener('change', event => {
+        this.services.runtime.lightMedia?.addEventListener('change', (event) => {
             if (!event.matches) {
                 return
             }
 
-            this.emitChange(UnistyleDependency.ColorScheme)
-
             if (this.services.runtime.hasAdaptiveThemes) {
-                this.emitChange(UnistyleDependency.Theme)
-                this.emitChange(UnistyleDependency.ThemeName)
+                this.emitChanges([
+                    UnistyleDependency.ColorScheme,
+                    UnistyleDependency.Theme,
+                    UnistyleDependency.ThemeName,
+                ])
+
+                return
             }
+
+            this.emitChange(UnistyleDependency.ColorScheme)
         })
 
         window.addEventListener('orientationchange', () => this.emitChange(UnistyleDependency.Orientation))
@@ -52,18 +95,18 @@ export class UnistylesListener {
     }
 
     addListeners = (dependencies: Array<UnistyleDependency>, listener: Listener) => {
-        dependencies.forEach(dependency => this.listeners[dependency]?.add(listener))
+        dependencies.forEach((dependency) => this.listeners[dependency]?.add(listener))
 
         return () => {
-            dependencies.forEach(dependency => this.listeners[dependency]?.delete(listener))
+            dependencies.forEach((dependency) => this.listeners[dependency]?.delete(listener))
         }
     }
 
     addStylesheetListeners = (dependencies: Array<UnistyleDependency>, listener: Listener) => {
-        dependencies.forEach(dependency => this.stylesheetListeners[dependency]?.add(listener))
+        dependencies.forEach((dependency) => this.stylesheetListeners[dependency]?.add(listener))
 
         return () => {
-            dependencies.forEach(dependency => this.stylesheetListeners[dependency]?.delete(listener))
+            dependencies.forEach((dependency) => this.stylesheetListeners[dependency]?.delete(listener))
         }
     }
 }

package/src/web/mock.ts

@@ -9,7 +9,7 @@ export const StatusBar: StatusBarSpec = {
     equals: () => true,
     toString: () => 'StatusBar',
     __type: 'web',
-    name: 'StatusBar'
+    name: 'StatusBar',
 }
 
 export const NavigationBar: NavigationBarSpec = {
@@ -20,5 +20,5 @@ export const NavigationBar: NavigationBarSpec = {
     dispose: () => {},
     toString: () => 'NavigationBar',
     __type: 'web',
-    name: 'NavigationBar'
+    name: 'NavigationBar',
 }

package/src/web/registry.ts

@@ -1,8 +1,9 @@
 import type { UnistyleDependency, UnistylesMiniRuntime } from '../specs'
 import type { UnistylesTheme, UnistylesValues } from '../types'
 import type { StyleSheet, StyleSheetWithSuperPowers } from '../types/stylesheet'
-import { CSSState } from './css'
 import type { UnistylesServices } from './types'
+
+import { CSSState } from './css'
 import { error, extractUnistyleDependencies, generateHash } from './utils'
 
 export class UnistylesRegistry {
@@ -26,7 +27,9 @@ export class UnistylesRegistry {
             const scopedTheme = this.services.runtime.getTheme(scopedThemeName)
 
             if (!scopedTheme) {
-                throw error(`Unistyles: You're trying to use scoped theme '${scopedThemeName}' but it wasn't registered.`)
+                throw error(
+                    `Unistyles: You're trying to use scoped theme '${scopedThemeName}' but it wasn't registered.`,
+                )
             }
 
             return stylesheet(scopedTheme, this.services.runtime.miniRuntime)
@@ -38,9 +41,12 @@ export class UnistylesRegistry {
             return computedStylesheet
         }
 
-        const currentTheme = this.services.runtime.getTheme(this.services.runtime.themeName, this.services.state.CSSVars)
+        const currentTheme = this.services.runtime.getTheme(
+            this.services.runtime.themeName,
+            this.services.state.CSSVars,
+        )
         const createdStylesheet = stylesheet(currentTheme, this.services.runtime.miniRuntime)
-        const dependencies = Object.values(createdStylesheet).flatMap(value => extractUnistyleDependencies(value))
+        const dependencies = Object.values(createdStylesheet).flatMap((value) => extractUnistyleDependencies(value))
 
         this.addDependenciesToStylesheet(stylesheet, dependencies)
         this.stylesheets.set(stylesheet, createdStylesheet)
@@ -48,17 +54,20 @@ export class UnistylesRegistry {
         return createdStylesheet
     }
 
-    addDependenciesToStylesheet = (stylesheet: (theme: UnistylesTheme, miniRuntime: UnistylesMiniRuntime) => StyleSheet, dependencies: Array<UnistyleDependency>) => {
+    addDependenciesToStylesheet = (
+        stylesheet: (theme: UnistylesTheme, miniRuntime: UnistylesMiniRuntime) => StyleSheet,
+        dependencies: Array<UnistyleDependency>,
+    ) => {
         this.disposeListenersMap.get(stylesheet)?.()
 
         const dependenciesMap = this.dependenciesMap.get(stylesheet) ?? new Set(dependencies)
 
-        dependencies.forEach(dependency => dependenciesMap.add(dependency))
+        dependencies.forEach((dependency) => dependenciesMap.add(dependency))
 
         const dispose = this.services.listener.addStylesheetListeners(Array.from(dependenciesMap), () => {
             const newComputedStylesheet = stylesheet(
                 this.services.runtime.getTheme(this.services.runtime.themeName, this.services.state.CSSVars),
-                this.services.runtime.miniRuntime
+                this.services.runtime.miniRuntime,
             )
 
             this.stylesheets.set(stylesheet, newComputedStylesheet)
@@ -100,9 +109,7 @@ export class UnistylesRegistry {
 
     add = (value: UnistylesValues, forChild?: boolean) => {
         const generatedHash = generateHash(value)
-        const hash = forChild
-            ? `${generatedHash} > *`
-            : generatedHash
+        const hash = forChild ? `${generatedHash} > *` : generatedHash
 
         if (!this.stylesCache.has(hash)) {
             this.applyStyles(hash, value)

package/src/web/runtime.ts

@@ -1,9 +1,10 @@
-import { UnistyleDependency } from '../specs/NativePlatform'
 import type { UnistylesMiniRuntime } from '../specs/UnistylesRuntime'
+import type { UnistylesServices } from './types'
+
+import { UnistyleDependency } from '../specs/NativePlatform'
 import { type AppTheme, type AppThemeName, ColorScheme, Orientation } from '../specs/types'
 import { type UnistylesTheme, WebContentSizeCategory } from '../types'
 import { NavigationBar, StatusBar } from './mock'
-import type { UnistylesServices } from './types'
 import { convertTheme, error, isServer, schemeToTheme } from './utils'
 
 export class UnistylesRuntime {
@@ -102,13 +103,13 @@ export class UnistylesRuntime {
         if (isServer()) {
             return {
                 width: 0,
-                height: 0
+                height: 0,
             }
         }
 
         return {
             width: window.innerWidth,
-            height: window.innerHeight
+            height: window.innerHeight,
         }
     }
 
@@ -122,7 +123,7 @@ export class UnistylesRuntime {
             bottom: 0,
             left: 0,
             right: 0,
-            ime: 0
+            ime: 0,
         }
     }
 
@@ -156,14 +157,14 @@ export class UnistylesRuntime {
             insets: this.insets,
             statusBar: {
                 width: this.statusBar.width,
-                height: this.statusBar.height
+                height: this.statusBar.height,
             },
             navigationBar: {
                 width: this.navigationBar.width,
                 height: this.navigationBar.height,
             },
             rtl: this.rtl,
-            hasAdaptiveThemes: this.hasAdaptiveThemes
+            hasAdaptiveThemes: this.hasAdaptiveThemes,
         }
     }
 
@@ -179,8 +180,7 @@ export class UnistylesRuntime {
         const oldTheme = this.services.state.themeName
 
         this.services.state.themeName = themeName
-        this.services.listener.emitChange(UnistyleDependency.Theme)
-        this.services.listener.emitChange(UnistyleDependency.ThemeName)
+        this.services.listener.emitChanges([UnistyleDependency.Theme, UnistyleDependency.ThemeName])
 
         if (!isServer() && !this.services.state.hasAdaptiveThemes && this.services.state.CSSVars) {
             this.rootElement?.classList.remove(oldTheme ?? '')
@@ -232,9 +232,11 @@ export class UnistylesRuntime {
         if (this.services.state.CSSVars) {
             this.services.state.cssThemes.set(
                 themeName,
-                Object.fromEntries(Object.entries(newTheme).map(([key, value]) => {
-                    return convertTheme(key, value)
-                })) as UnistylesTheme
+                Object.fromEntries(
+                    Object.entries(newTheme).map(([key, value]) => {
+                        return convertTheme(key, value)
+                    }),
+                ) as UnistylesTheme,
             )
             this.services.registry.css.addTheme(themeName, newTheme)
             this.services.registry.css.recreate()
@@ -247,16 +249,20 @@ export class UnistylesRuntime {
         if (!hasSomeThemes) {
             return new Proxy({} as UnistylesTheme, {
                 get: () => {
-                    throw error('One of your stylesheets is trying to get the theme, but no theme has been selected yet. Did you forget to call StyleSheet.configure? If you called it, make sure you did so before any StyleSheet.create.')
-                }
+                    throw error(
+                        'One of your stylesheets is trying to get the theme, but no theme has been selected yet. Did you forget to call StyleSheet.configure? If you called it, make sure you did so before any StyleSheet.create.',
+                    )
+                },
             })
         }
 
         if (!themeName) {
             return new Proxy({} as UnistylesTheme, {
                 get: () => {
-                    throw error('One of your stylesheets is trying to get the theme, but no theme has been selected yet. Did you forget to select an initial theme?')
-                }
+                    throw error(
+                        'One of your stylesheets is trying to get the theme, but no theme has been selected yet. Did you forget to select an initial theme?',
+                    )
+                },
             })
         }
 
@@ -268,7 +274,7 @@ export class UnistylesRuntime {
             return new Proxy({} as UnistylesTheme, {
                 get: () => {
                     throw error(`You're trying to get theme "${themeName}" but it wasn't registered.`)
-                }
+                },
             })
         }
 

package/src/web/shadowRegistry.ts

@@ -1,7 +1,8 @@
-import { UnistyleDependency } from '../specs/NativePlatform/NativePlatform.nitro'
 import type { UnistylesTheme, UnistylesValues } from '../types'
-import { deepMergeObjects } from '../utils'
 import type { UniGeneratedStyle, UnistylesServices } from './types'
+
+import { UnistyleDependency } from '../specs/NativePlatform/NativePlatform.nitro'
+import { deepMergeObjects } from '../utils'
 import { extractSecrets, extractUnistyleDependencies, isGeneratedUnistyle, isServer } from './utils'
 import { getVariants } from './variants'
 
@@ -36,7 +37,7 @@ export class UnistylesShadowRegistry {
         }
 
         const getParsedStyles = () => {
-            const allStyles = unistyles.map(unistyle => {
+            const allStyles = unistyles.map((unistyle) => {
                 const secrets = extractSecrets(unistyle)
 
                 // Regular style
@@ -50,11 +51,12 @@ export class UnistylesShadowRegistry {
                 }
 
                 const { __uni__key, __uni__stylesheet, __uni__args = [], __stylesheetVariants: variants } = secrets
-                const newComputedStylesheet = this.services.registry.getComputedStylesheet(__uni__stylesheet, scopedTheme)
-                const style = newComputedStylesheet[__uni__key] as (UnistylesValues | ((...args: any) => UnistylesValues))
-                const result = typeof style === 'function'
-                    ? style(...__uni__args)
-                    : style
+                const newComputedStylesheet = this.services.registry.getComputedStylesheet(
+                    __uni__stylesheet,
+                    scopedTheme,
+                )
+                const style = newComputedStylesheet[__uni__key] as UnistylesValues | ((...args: any) => UnistylesValues)
+                const result = typeof style === 'function' ? style(...__uni__args) : style
                 const variantsResult = getVariants(result, variants)
                 const resultWithVariants = deepMergeObjects(result, variantsResult)
                 const dependencies = extractUnistyleDependencies(resultWithVariants)
@@ -66,7 +68,7 @@ export class UnistylesShadowRegistry {
 
                 return {
                     ...resultWithVariants,
-                    ...resultWithVariants._web
+                    ...resultWithVariants._web,
                 } as UnistylesValues
             })
 
@@ -81,18 +83,19 @@ export class UnistylesShadowRegistry {
         const injectedClassName = Array.isArray(injectedClassNames) ? injectedClassNames.join(' ') : injectedClassNames
         const dependencies = extractUnistyleDependencies(parsedStyles)
         const filteredDependencies = this.services.state.CSSVars
-            ? dependencies.filter(dependency => dependency !== UnistyleDependency.Theme)
+            ? dependencies.filter((dependency) => dependency !== UnistyleDependency.Theme)
             : dependencies
 
         if (!existingHash) {
-            this.disposeMap.set(hash, this.services.listener.addListeners(filteredDependencies, () => {
-                this.services.registry.applyStyles(hash, getParsedStyles())
-            }))
+            this.disposeMap.set(
+                hash,
+                this.services.listener.addListeners(filteredDependencies, () => {
+                    this.services.registry.applyStyles(hash, getParsedStyles())
+                }),
+            )
         }
 
-        const hashClassname = forChild
-            ? hash.replace(' > *', '')
-            : hash
+        const hashClassname = forChild ? hash.replace(' > *', '') : hash
 
         return { injectedClassName, hash: hashClassname, parsedStyles }
     }
@@ -108,15 +111,14 @@ export class UnistylesShadowRegistry {
             return
         }
 
-        this.services.registry.remove(ref, hash)
-            .then(removed => {
-                if (!removed) {
-                    return
-                }
+        this.services.registry.remove(ref, hash).then((removed) => {
+            if (!removed) {
+                return
+            }
 
-                this.disposeMap.get(hash)?.()
-                this.disposeMap.delete(hash)
-            })
+            this.disposeMap.get(hash)?.()
+            this.disposeMap.delete(hash)
+        })
     }
 
     flush = () => {}

package/src/web/state.ts

@@ -1,13 +1,14 @@
 import type { UnistylesBreakpoints, UnistylesThemes } from '../global'
-import { UnistyleDependency } from '../specs/NativePlatform'
 import type { UnistylesConfig } from '../specs/StyleSheet'
 import type { AppBreakpoint, AppTheme, AppThemeName } from '../specs/types'
 import type { UnistylesTheme } from '../types'
 import type { UnionToIntersection } from '../types'
 import type { UnistylesServices } from './types'
+
+import { UnistyleDependency } from '../specs/NativePlatform'
 import { convertTheme, error, isServer, schemeToTheme } from './utils'
 
-type RemoveNevers<T> = { [K in keyof T as T[K] extends (never | undefined) ? never : K]: T[K] }
+type RemoveNevers<T> = { [K in keyof T as T[K] extends never | undefined ? never : K]: T[K] }
 type UnistylesSettings = Partial<UnionToIntersection<RemoveNevers<Required<UnistylesConfig>['settings']>>>
 
 export class UnistylesState {
@@ -21,9 +22,10 @@ export class UnistylesState {
     private _config: UnistylesConfig = {}
 
     get breakpoint() {
-        const [currentBreakpoint] = Array.from(this.matchingBreakpoints)
-            .reverse()
-            .find(([_key, value]) => value) ?? []
+        const [currentBreakpoint] =
+            Array.from(this.matchingBreakpoints)
+                .reverse()
+                .find(([_key, value]) => value) ?? []
 
         return currentBreakpoint as AppBreakpoint | undefined
     }
@@ -72,9 +74,11 @@ export class UnistylesState {
                 this.services.registry.css.addTheme(themeName, theme)
                 this.cssThemes.set(
                     themeName,
-                    Object.fromEntries(Object.entries(theme).map(([key, value]) => {
-                        return convertTheme(key, value)
-                    })) as UnistylesTheme
+                    Object.fromEntries(
+                        Object.entries(theme).map(([key, value]) => {
+                            return convertTheme(key, value)
+                        }),
+                    ) as UnistylesTheme,
                 )
             }
         })
@@ -84,13 +88,17 @@ export class UnistylesState {
         this.hasAdaptiveThemes = settings?.adaptiveThemes ?? false
 
         if (settings?.initialTheme && settings.adaptiveThemes) {
-            throw error('You\'re trying to set initial theme and enable adaptiveThemes, but these options are mutually exclusive.')
+            throw error(
+                "You're trying to set initial theme and enable adaptiveThemes, but these options are mutually exclusive.",
+            )
         }
 
         // Adaptive themes
         if (settings?.adaptiveThemes) {
             if (!this.themes.get('light') || !this.themes.get('dark')) {
-                throw error(`You're trying to enable adaptiveThemes, but you didn't register both 'light' and 'dark' themes.`)
+                throw error(
+                    `You're trying to enable adaptiveThemes, but you didn't register both 'light' and 'dark' themes.`,
+                )
             }
 
             this.themeName = schemeToTheme(this.services.runtime.colorScheme) as AppThemeName
@@ -99,9 +107,8 @@ export class UnistylesState {
         }
 
         if (settings?.initialTheme) {
-            const initialTheme = typeof settings.initialTheme === 'function'
-                ? settings.initialTheme()
-                : settings.initialTheme
+            const initialTheme =
+                typeof settings.initialTheme === 'function' ? settings.initialTheme() : settings.initialTheme
 
             if (!this.themes.get(initialTheme)) {
                 throw error(`You're trying to select theme "${initialTheme}" but it wasn't registered.`)
@@ -126,11 +133,11 @@ export class UnistylesState {
         const breakpointsEntries = Object.entries(breakpoints)
 
         if (breakpointsEntries.length === 0) {
-            throw error('StyleSheet.configure\'s breakpoints can\'t be empty.')
+            throw error("StyleSheet.configure's breakpoints can't be empty.")
         }
 
         if (breakpointsEntries?.[0]?.[1] !== 0) {
-            throw error('StyleSheet.configure\'s first breakpoint must start from 0.')
+            throw error("StyleSheet.configure's first breakpoint must start from 0.")
         }
 
         breakpointsEntries
@@ -143,7 +150,7 @@ export class UnistylesState {
                 const mediaQuery = window.matchMedia(`(min-width: ${value}px)`)
                 this.matchingBreakpoints.set(breakpoint, mediaQuery.matches)
 
-                mediaQuery.addEventListener('change', event => {
+                mediaQuery.addEventListener('change', (event) => {
                     this.matchingBreakpoints.set(breakpoint, event.matches)
                     this.services.listener.emitChange(UnistyleDependency.Breakpoints)
                 })

package/src/web/types.ts

@@ -6,15 +6,15 @@ import type { UnistylesShadowRegistry } from './shadowRegistry'
 import type { UnistylesState } from './state'
 
 export type UnistylesServices = {
-    runtime: UnistylesRuntime,
-    registry: UnistylesRegistry,
-    shadowRegistry: UnistylesShadowRegistry,
-    state: UnistylesState,
+    runtime: UnistylesRuntime
+    registry: UnistylesRegistry
+    shadowRegistry: UnistylesShadowRegistry
+    state: UnistylesState
     listener: UnistylesListener
 }
 
 export const UNI_GENERATED_KEYS = ['$$css', 'hash', 'injectedClassName'] as const
-export type UniGeneratedKey = typeof UNI_GENERATED_KEYS[number]
+export type UniGeneratedKey = (typeof UNI_GENERATED_KEYS)[number]
 
 export type UniGeneratedStyle = Record<UniGeneratedKey, string> & {
     parsedStyles?: UnistylesValues

package/src/web/utils/common.ts

@@ -1,7 +1,10 @@
 export const reduceObject = <TObj extends Record<string, any>, TReducer>(
     obj: TObj,
     reducer: (value: TObj[keyof TObj], key: keyof TObj) => TReducer,
-) => Object.fromEntries(Object.entries(obj).map(([key, value]) => [key, reducer(value as TObj[keyof TObj], key)])) as { [K in keyof TObj]: TReducer }
+) =>
+    Object.fromEntries(Object.entries(obj).map(([key, value]) => [key, reducer(value as TObj[keyof TObj], key)])) as {
+        [K in keyof TObj]: TReducer
+    }
 
 export const keyInObject = <T extends Record<string, any>>(obj: T, key: PropertyKey): key is keyof T => key in obj
 
@@ -14,12 +17,7 @@ export const equal = <T>(a: T, b: T) => {
         return true
     }
 
-    if (
-        typeof a !== 'object'
-        || a === null
-        || typeof b !== 'object'
-        || b === null
-    ) {
+    if (typeof a !== 'object' || a === null || typeof b !== 'object' || b === null) {
         return false
     }
 
@@ -29,7 +27,7 @@ export const equal = <T>(a: T, b: T) => {
         return false
     }
 
-    return keysA.every(key => Object.is(a[key], b[key]) && Object.prototype.hasOwnProperty.call(b, key))
+    return keysA.every((key) => Object.is(a[key], b[key]) && Object.prototype.hasOwnProperty.call(b, key))
 }
 
 export const hyphenate = (propertyName: string) => propertyName.replace(/[A-Z]/g, (m: string) => `-${m.toLowerCase()}`)
@@ -40,7 +38,7 @@ export const serialize = (obj: string | number | object): string => {
     }
 
     const sortedKeys = Object.keys(obj).sort()
-    const sortedKeyValuePairs = sortedKeys.map(key => `${key}:${serialize(obj[key as keyof typeof obj])}`)
+    const sortedKeyValuePairs = sortedKeys.map((key) => `${key}:${serialize(obj[key as keyof typeof obj])}`)
 
     return `{${sortedKeyValuePairs.join(',')}}`
 }

package/src/web/utils/createUnistylesRef.ts

@@ -1,5 +1,7 @@
 import type React from 'react'
+
 import type { Nullable, UnistylesValues } from '../../types'
+
 import * as unistyles from '../services'
 import { isServer } from './common'
 
@@ -7,27 +9,29 @@ type Styles = readonly [
     {
         hash: string
     },
-    Array<UnistylesValues>
+    Array<UnistylesValues>,
 ]
 
 export const createUnistylesRef = <T>(styles?: Styles, forwardedRef?: React.ForwardedRef<T>) => {
     const storedRef = { current: null as Nullable<T> }
     const [classNames] = styles ?? []
 
-    return isServer() ? undefined : (ref: Nullable<T>) => {
-        if (!ref) {
-            unistyles.services.shadowRegistry.remove(storedRef, classNames?.hash)
-        }
+    return isServer()
+        ? undefined
+        : (ref: Nullable<T>) => {
+              if (!ref) {
+                  unistyles.services.shadowRegistry.remove(storedRef, classNames?.hash)
+              }
 
-        storedRef.current = ref
-        unistyles.services.shadowRegistry.add(ref, classNames?.hash)
+              storedRef.current = ref
+              unistyles.services.shadowRegistry.add(ref, classNames?.hash)
 
-        if (typeof forwardedRef === 'function') {
-            return forwardedRef(ref)
-        }
+              if (typeof forwardedRef === 'function') {
+                  return forwardedRef(ref)
+              }
 
-        if (forwardedRef) {
-            forwardedRef.current = ref
-        }
-    }
+              if (forwardedRef) {
+                  forwardedRef.current = ref
+              }
+          }
 }