react-native-unistyles 3.0.0-beta.7 → 3.0.0-experimental-2025051401

package/src/mocks.ts

@@ -0,0 +1,217 @@
+import type { UnistylesBreakpoints, UnistylesThemes } from './global'
+import type { UnistylesNavigationBar } from './specs/NavigtionBar'
+import type { UnistylesStatusBar } from './specs/StatusBar'
+import type { UnistylesConfig, UnistylesStyleSheet } from './specs/StyleSheet'
+import type { UnistylesRuntimePrivate } from './specs/UnistylesRuntime'
+import type { ColorScheme, Orientation } from './specs/types'
+import type { IOSContentSizeCategory, UnistylesTheme } from './types'
+
+type Registry = {
+    themes: UnistylesThemes
+    breakpoints: UnistylesBreakpoints
+}
+
+jest.mock('react-native-nitro-modules', () => ({
+    NitroModules: {
+        createHybridObject: () => ({
+            add: () => {},
+            init: () => {},
+            createHybridStatusBar: () => ({
+                setStyle: () => {},
+            }),
+            createHybridNavigationBar: () => {},
+        })
+    }
+}))
+
+jest.mock('react-native-unistyles', () => {
+    const React = require('react')
+    const _REGISTRY: Registry = {
+        themes: {},
+        breakpoints: {}
+    }
+    const miniRuntime = {
+        themeName: undefined,
+        breakpoint: undefined,
+        hasAdaptiveThemes: false,
+        colorScheme: 'unspecified' as ColorScheme,
+        contentSizeCategory: 'Medium' as IOSContentSizeCategory,
+        insets: {
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            ime: 0
+        },
+        pixelRatio: 1,
+        fontScale: 1,
+        rtl: false,
+        isLandscape: false,
+        isPortrait: true,
+        navigationBar: {
+            width: 0,
+            height: 0
+        },
+        screen: {
+            width: 0,
+            height: 0
+        },
+        statusBar: {
+            width: 0,
+            height: 0
+        }
+    }
+    const unistylesRuntime = {
+        colorScheme: 'unspecified' as ColorScheme,
+        contentSizeCategory: 'Medium' as IOSContentSizeCategory,
+        orientation: 'portrait' as Orientation,
+        breakpoints: {},
+        dispose: () => { },
+        equals: () => false,
+        name: 'UnistylesRuntimeMock',
+        miniRuntime: miniRuntime,
+        statusBar: {
+            height: 0,
+            width: 0,
+            name: 'StatusBarMock',
+            equals: () => false,
+            setHidden: () => { },
+            setStyle: () => { }
+        },
+        navigationBar: {
+            height: 0,
+            width: 0,
+            name: 'NavigationBarMock',
+            equals: () => false,
+            setHidden: () => { },
+            dispose: () => { }
+        },
+        fontScale: 1,
+        hasAdaptiveThemes: false,
+        pixelRatio: 0,
+        rtl: false,
+        getTheme: () => {
+            return {} as UnistylesTheme
+        },
+        setTheme: () => {},
+        updateTheme: () => {},
+        setRootViewBackgroundColor: () => {},
+        _setRootViewBackgroundColor: () => {},
+        createHybridStatusBar: () => {
+            return {} as UnistylesStatusBar
+        },
+        createHybridNavigationBar: () => {
+            return {} as UnistylesNavigationBar
+        },
+        setAdaptiveThemes: () => {},
+        setImmersiveMode: () => {},
+        insets: {
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            ime: 0
+        },
+        screen: {
+            width: 0,
+            height: 0
+        },
+        breakpoint: undefined
+    } satisfies UnistylesRuntimePrivate
+
+    return {
+        Hide: () => null,
+        Display: () => null,
+        ScopedTheme: () => null,
+        withUnistyles: <TComponent,>(Component: TComponent, mapper?: (theme: UnistylesTheme, runtime: typeof miniRuntime) => TComponent) => (props: any) =>
+            React.createElement(Component, {
+                ...mapper?.((Object.values(_REGISTRY.themes).at(0) ?? {}) as UnistylesTheme, miniRuntime),
+                ...props
+            }),
+        mq: {
+            only: {
+                width: () => ({
+                    and: {
+                        height: () => ({})
+                    }
+                }),
+                height: () => ({
+                    and: {
+                        width: () => ({})
+                    }
+                })
+            },
+            width: () => ({
+                and: {
+                    height: () => ({})
+                }
+            }),
+            height: () => ({
+                and: {
+                    width: () => ({})
+                }
+            })
+        },
+        useUnistyles: () => ({
+            theme: Object.values(_REGISTRY.themes).at(0) ?? {},
+            rt: unistylesRuntime
+        }),
+        StyleSheet: {
+            absoluteFillObject: {
+                position: 'absolute',
+                left: 0,
+                right: 0,
+                top: 0,
+                bottom: 0
+            },
+            absoluteFill: {
+                position: 'absolute',
+                left: 0,
+                right: 0,
+                top: 0,
+                bottom: 0
+            } as unknown as UnistylesStyleSheet['absoluteFill'],
+            compose: (styles: any) => {
+                return styles
+            },
+            flatten: (styles: any) => {
+                return styles
+            },
+            create: (styles: any) => {
+                if (typeof styles === 'function') {
+                    return {
+                        ...styles(Object.values(_REGISTRY.themes).at(0) ?? {}, miniRuntime),
+                        useVariants: () => {}
+                    }
+                }
+
+                return {
+                    ...styles,
+                    useVariants: () => {}
+                }
+            },
+            configure: (config: UnistylesConfig) => {
+                if (config.breakpoints) {
+                    _REGISTRY.breakpoints = config.breakpoints
+                }
+
+                if (config.themes) {
+                    _REGISTRY.themes = config.themes
+                }
+            },
+            jsMethods: {
+                processColor: () => null
+            },
+            hairlineWidth: 1,
+            unid: -1,
+            addChangeListener: () => () => {},
+            init: () => {},
+            name: 'StyleSheetMock',
+            dispose: () => {},
+            equals: () => false
+        } satisfies UnistylesStyleSheet,
+        UnistylesRuntime: unistylesRuntime
+    }
+})
+
+

package/src/mq.ts

@@ -2,10 +2,6 @@ import type { UnistylesBreakpoints } from './global'
 import { UnistylesRuntime } from './specs'
 import type { Nullable } from './types'
 
-const IS_UNISTYLES_REGEX = /:([hw])\[(\d+)(?:,\s*(\d+|Infinity))?]/
-const UNISTYLES_WIDTH_REGEX = /:(w)\[(\d+)(?:,\s*(\d+|Infinity))?]/
-const UNISTYLES_HEIGHT_REGEX = /:(h)\[(\d+)(?:,\s*(\d+|Infinity))?]/
-
 type MQValue = keyof UnistylesBreakpoints | number
 
 type MQHandler = {
@@ -62,23 +58,3 @@ export const mq: MQHandler = {
     })
 }
 
-export const parseMq = (mq: string) => {
-    const [, width, fromW, toW] = UNISTYLES_WIDTH_REGEX.exec(mq) || []
-    const [, height, fromH, toH] = UNISTYLES_HEIGHT_REGEX.exec(mq) || []
-
-    return {
-        minWidth: !width || fromW === 'Infinity' ? undefined : Number(fromW),
-        maxWidth: !width || toW === 'Infinity' ? undefined : Number(toW),
-        minHeight: !height || fromH === 'Infinity' ? undefined : Number(fromH),
-        maxHeight: !height || toH === 'Infinity' ? undefined : Number(toH),
-    }
-}
-
-export const isUnistylesMq = (mq: string) => IS_UNISTYLES_REGEX.test(mq)
-
-export const isValidMq = (parsedMQ: ReturnType<typeof parseMq>) => {
-    const isWidthValid = parsedMQ.minWidth === undefined || parsedMQ.maxWidth === undefined || parsedMQ.minWidth <= parsedMQ.maxWidth
-    const isHeightValid = parsedMQ.minHeight === undefined || parsedMQ.maxHeight === undefined || parsedMQ.minHeight <= parsedMQ.maxHeight
-
-    return isWidthValid && isHeightValid
-}

package/src/reanimated/index.ts

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

package/src/reanimated/useAnimatedTheme.native.ts

@@ -0,0 +1,21 @@
+import { useEffect } from 'react'
+import { type SharedValue, useSharedValue } from 'react-native-reanimated'
+import { StyleSheet, UnistyleDependency, UnistylesRuntime } from '../specs'
+import type { UnistylesTheme } from '../types'
+
+export const useAnimatedTheme = () => {
+    const theme = useSharedValue(UnistylesRuntime.getTheme())
+
+    useEffect(() => {
+        // @ts-ignore this is hidden from TS
+        const dispose = StyleSheet.addChangeListener(changedDependencies => {
+            if (changedDependencies.includes(UnistyleDependency.Theme)) {
+                theme.set(UnistylesRuntime.getTheme())
+            }
+        })
+
+        return () => dispose()
+    }, [])
+
+    return theme as SharedValue<UnistylesTheme>
+}

package/src/reanimated/useAnimatedTheme.ts

@@ -0,0 +1,19 @@
+import { useEffect } from 'react'
+import { type SharedValue, useSharedValue } from 'react-native-reanimated'
+import { UnistyleDependency, UnistylesRuntime } from '../specs'
+import type { UnistylesTheme } from '../types'
+import { services } from '../web/services'
+
+export const useAnimatedTheme = () => {
+    const theme = useSharedValue(UnistylesRuntime.getTheme())
+
+    useEffect(() => {
+        const dispose = services.listener.addListeners([UnistyleDependency.Theme], () => theme.set(UnistylesRuntime.getTheme()))
+
+        return () => {
+            dispose()
+        }
+    }, [])
+
+    return theme as SharedValue<UnistylesTheme>
+}

package/src/server/getServerUnistyles.tsx

@@ -1,21 +1,26 @@
 import React from 'react'
 import { StyleSheet } from 'react-native'
-import { UnistylesWeb } from '../web'
+import * as unistyles from '../web/services'
 import { error, isServer } from '../web/utils'
+import { serialize } from './serialize'
 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)}`}} />
-    </>
-}
+    const css = unistyles.services.registry.css.getStyles()
+    const state = unistyles.services.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' defer dangerouslySetInnerHTML={{ __html: `window.__UNISTYLES_STATE__ = ${serialize(state)}`}} />
+        </>
+    )
+}

package/src/server/hydrateServerUnistyles.ts

@@ -1,4 +1,4 @@
-import { UnistylesWeb } from '../web'
+import * as unistyles from '../web/services'
 import { error, isServer } from '../web/utils'
 
 declare global {
@@ -12,6 +12,7 @@ export const hydrateServerUnistyles = () => {
     if (isServer()) {
         throw error('Server styles should only be hydrated on the client')
     }
-    UnistylesWeb.registry.css.hydrate(window.__UNISTYLES_STATE__)
+
+    unistyles.services.registry.css.hydrate(window.__UNISTYLES_STATE__)
     document.querySelector('#unistyles-script')?.remove()
 }

package/src/server/resetServerUnistyles.ts

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

package/src/server/serialize.ts

@@ -0,0 +1,20 @@
+export const serialize = (value: any): string => {
+    switch (typeof value) {
+        case 'function':
+            return value.toString()
+        case 'object':
+            if (Array.isArray(value)) {
+                return `[${value.map(serialize).join(',')}]`
+            }
+
+            if (value === null) {
+                return 'null'
+            }
+
+            return `{${Object.entries(value)
+                .map(([key, value]) => `'${key}':${serialize(value)}`)
+                .join(',')}}`
+        default:
+            return JSON.stringify(value)
+    }
+}

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

@@ -19,7 +19,8 @@ export enum UnistyleDependency {
     FontScale = 11,
     StatusBar = 12,
     NavigationBar = 13,
-    Ime = 14
+    Ime = 14,
+    Rtl = 15
 }
 
 export interface UnistylesNativeMiniRuntime {

package/src/specs/ShadowRegistry/index.ts

@@ -40,11 +40,11 @@ HybridShadowRegistry.add = (handle, styles) => {
         ? styles.flat()
         : [styles]
 
-    // filter Reanimated styles and styles that are undefined
+    // filter styles that are undefined or with no keys
     const filteredStyles = stylesArray
-        .filter(style => !style?.initial?.updater)
         .filter(style => style && Object.keys(style).length > 0)
         .flat()
+        .filter(Boolean)
 
     if (filteredStyles.length > 0) {
         HybridShadowRegistry.link(findShadowNodeForHandle(handle), filteredStyles)

package/src/types/common.ts

@@ -1,5 +1,4 @@
 export type Optional<T> = T | undefined
 export type Nullable<T> = T | null
 export type SafeReturnType<T> = T extends (...args: any) => infer R ? R : T
-export type PartialBy<T, K> = Omit<T, K & keyof T> & Partial<Pick<T, K & keyof T>>
 export type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never

package/src/types/stylesheet.ts

@@ -62,7 +62,7 @@ export type UnistylesValues = FlatUnistylesValues & {
 } & VariantsAndCompoundVariants & {
     [propName in NestedKeys]?: UnistyleNestedStyles[propName]
 } & {
-    _web?: CSSProperties & CustomClassName & {
+    _web?: ToDeepUnistyles<CSSProperties> & CustomClassName & {
         [propName in Pseudo]?: ToDeepUnistyles<CSSProperties>
     }
 }

package/src/utils.ts

@@ -41,3 +41,28 @@ export const copyComponentProperties = (Component: any, UnistylesComponent: any)
 
     return UnistylesComponent
 }
+
+const IS_UNISTYLES_REGEX = /:([hw])\[(\d+)(?:,\s*(\d+|Infinity))?]/
+const UNISTYLES_WIDTH_REGEX = /:(w)\[(\d+)(?:,\s*(\d+|Infinity))?]/
+const UNISTYLES_HEIGHT_REGEX = /:(h)\[(\d+)(?:,\s*(\d+|Infinity))?]/
+
+export const isUnistylesMq = (mq: string) => IS_UNISTYLES_REGEX.test(mq)
+
+export const parseMq = (mq: string) => {
+    const [, width, fromW, toW] = UNISTYLES_WIDTH_REGEX.exec(mq) || []
+    const [, height, fromH, toH] = UNISTYLES_HEIGHT_REGEX.exec(mq) || []
+
+    return {
+        minWidth: !width || fromW === 'Infinity' ? undefined : Number(fromW),
+        maxWidth: !width || toW === 'Infinity' ? undefined : Number(toW),
+        minHeight: !height || fromH === 'Infinity' ? undefined : Number(fromH),
+        maxHeight: !height || toH === 'Infinity' ? undefined : Number(toH),
+    }
+}
+
+export const isValidMq = (parsedMQ: ReturnType<typeof parseMq>) => {
+    const isWidthValid = parsedMQ.minWidth === undefined || parsedMQ.maxWidth === undefined || parsedMQ.minWidth <= parsedMQ.maxWidth
+    const isHeightValid = parsedMQ.minHeight === undefined || parsedMQ.maxHeight === undefined || parsedMQ.minHeight <= parsedMQ.maxHeight
+
+    return isWidthValid && isHeightValid
+}

package/src/web/convert/index.ts

@@ -1,21 +1,19 @@
 import type { UnistylesValues } from '../../types'
 import { deepMergeObjects } from '../../utils'
+import type { UnistylesRuntime } from '../runtime'
 import { getBoxShadow, getFilterStyle, getTransformStyle } from './object'
 import { isPseudo } from './pseudo'
 import { getBoxShadowStyle, getTextShadowStyle } from './shadow'
 import { getStyle } from './style'
 import { isBoxShadow, isFilter, isShadow, isTextShadow, isTransform } from './utils'
 
-export const convertUnistyles = (value: UnistylesValues) => {
+export const convertUnistyles = (value: UnistylesValues, runtime: UnistylesRuntime) => {
     // Flag to mark if textShadow is already created
     let hasTextShadow = false
     // Flag to mark if boxShadow is already created
     let hasShadow = false
 
-    const stylesArray = Object.entries({
-        ...value,
-        ...value._web
-    }).flatMap(([unistylesKey, unistylesValue]) => {
+    const stylesArray = Object.entries(value).flatMap(([unistylesKey, unistylesValue]) => {
         // Keys to omit
         if (['_classNames', '_web', 'variants', 'compoundVariants', 'uni__dependencies'].includes(unistylesKey) || unistylesKey.startsWith('unistyles_')) {
             return []
@@ -23,7 +21,7 @@ export const convertUnistyles = (value: UnistylesValues) => {
 
         // Pseudo classes :hover, :before etc.
         if (isPseudo(unistylesKey)) {
-            const flattenValues = convertUnistyles(unistylesValue as UnistylesValues)
+            const flattenValues = convertUnistyles(unistylesValue as UnistylesValues, runtime)
 
             return { [unistylesKey]: flattenValues }
         }
@@ -51,7 +49,7 @@ export const convertUnistyles = (value: UnistylesValues) => {
         }
 
         if (isFilter(unistylesKey, unistylesValue)) {
-            return getFilterStyle(unistylesValue)
+            return getFilterStyle(unistylesValue, runtime)
         }
 
         if (isBoxShadow(unistylesKey, unistylesValue)) {

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

@@ -1,6 +1,6 @@
 import type { DropShadowValue } from 'react-native'
-import { isUnistylesMq } from '../../../mq'
-import { UnistylesWeb } from '../../index'
+import { isUnistylesMq } from '../../../utils'
+import type { UnistylesRuntime } from '../../runtime'
 import { hyphenate } from '../../utils'
 import type { Filters } from '../types'
 import { normalizeColor, normalizeNumericValue } from '../utils'
@@ -12,7 +12,7 @@ const getDropShadowStyle = (dropShadow: DropShadowValue) => {
     return `${normalizeColor(String(color))} ${normalizeNumericValue(offsetX)} ${normalizeNumericValue(offsetY)} ${normalizeNumericValue(standardDeviation)}`
 }
 
-export const getFilterStyle = (filters: Array<Filters>) => {
+export const getFilterStyle = (filters: Array<Filters>, runtime: UnistylesRuntime) => {
     const restFilters = filters.filter(filter => Object.keys(filter)[0] !== 'dropShadow')
     const dropShadow = (() => {
         const dropShadowValue = filters.find(filter => Object.keys(filter)[0] === 'dropShadow')?.dropShadow as Record<string, any>
@@ -21,7 +21,7 @@ export const getFilterStyle = (filters: Array<Filters>) => {
             return []
         }
 
-        const breakpoints = Object.keys(dropShadowValue).filter(key => Object.keys(UnistylesWeb.runtime.breakpoints).includes(key) || isUnistylesMq(key))
+        const breakpoints = Object.keys(dropShadowValue).filter(key => Object.keys(runtime.breakpoints).includes(key) || isUnistylesMq(key))
         const breakpointsDropShadow = Object.fromEntries(breakpoints.map(breakpoint => [breakpoint, getDropShadowStyle(dropShadowValue[breakpoint])]))
 
         if (breakpoints.length === 0) {

package/src/web/create.ts

@@ -1,6 +1,6 @@
 import type { StyleSheet, StyleSheetWithSuperPowers } from '../types/stylesheet'
-import { UnistylesWeb } from './index'
-import { assignSecrets, error, removeInlineStyles } from './utils'
+import * as unistyles from './services'
+import { assignSecrets, error, isServer, removeInlineStyles } from './utils'
 
 type Variants = Record<string, string | boolean | undefined>
 
@@ -9,7 +9,14 @@ export const create = (stylesheet: StyleSheetWithSuperPowers<StyleSheet>, id?: s
         throw error('Unistyles is not initialized correctly. Please add babel plugin to your babel config.')
     }
 
-    const computedStylesheet = UnistylesWeb.registry.getComputedStylesheet(stylesheet)
+    // For SSR
+    if (!unistyles.services.state.isInitialized && !isServer()) {
+        const config = window?.__UNISTYLES_STATE__?.config
+
+        config && unistyles.services.state.init(config)
+    }
+
+    const computedStylesheet = unistyles.services.registry.getComputedStylesheet(stylesheet)
     const addSecrets = (value: any, key: string, args = undefined as Array<any> | undefined, variants = {} as Variants) => assignSecrets(value, {
         __uni__key: key,
         __uni__stylesheet: stylesheet,

package/src/web/css/core.ts

@@ -8,7 +8,7 @@ export const convertToCSS = (hash: string, value: Record<string, any>, state: CS
 
             Object.entries(styleValue).forEach(([pseudoStyleKey, pseudoStyleValue]) => {
                 if (typeof pseudoStyleValue === 'object' && pseudoStyleValue !== null) {
-                    const allBreakpoints = Object.keys(pseudoStyleValue)
+                    const allBreakpoints = Object.keys(styleValue)
                     Object.entries(pseudoStyleValue).forEach(([breakpointStyleKey, breakpointStyleValue]) => {
                         const mediaQuery = getMediaQuery(pseudoStyleKey, allBreakpoints)
 
@@ -34,7 +34,7 @@ export const convertToCSS = (hash: string, value: Record<string, any>, state: CS
         }
 
         if (typeof styleValue === 'object') {
-            const allBreakpoints = Object.keys(styleValue)
+            const allBreakpoints = Object.keys(value)
             Object.entries(styleValue).forEach(([breakpointStyleKey, breakpointStyleValue]) => {
                 const mediaQuery = getMediaQuery(styleKey, allBreakpoints)
 

package/src/web/css/state.ts

@@ -1,5 +1,6 @@
 import type { UnistylesValues } from '../../types'
 import { convertUnistyles } from '../convert'
+import type { UnistylesServices } from '../types'
 import { hyphenate, isServer } from '../utils'
 import { convertToCSS } from './core'
 
@@ -33,7 +34,7 @@ export class CSSState {
     private styleTag: HTMLStyleElement | null = null
     private CSS = ''
 
-    constructor() {
+    constructor(private services: UnistylesServices) {
         if (isServer()) {
             return
         }
@@ -60,7 +61,7 @@ export class CSSState {
     }
 
     add = (hash: string, values: UnistylesValues) => {
-        convertToCSS(hash, convertUnistyles(values), this)
+        convertToCSS(hash, convertUnistyles(values, this.services.runtime), this)
 
         if (this.styleTag) {
             this.styleTag.innerText = this.getStyles()
@@ -159,8 +160,9 @@ export class CSSState {
 
         const mainState = getState(this.mainMap)
         const mqState = getState(this.mqMap)
+        const config = this.services.state.getConfig()
 
-        return { mainState, mqState }
+        return { mainState, mqState, config }
     }
 
     hydrate = ({ mainState, mqState }: ReturnType<typeof this.getState>) => {

package/src/web/index.ts

@@ -3,22 +3,10 @@ import type { StyleSheet as NativeStyleSheet } from '../specs/StyleSheet'
 import type { Runtime as NativeUnistylesRuntime } from '../specs/UnistylesRuntime'
 import { deepMergeObjects } from '../utils'
 import { create } from './create'
-import { UnistylesServices } from './services'
-import { isServer } from './utils'
+import * as unistyles from './services'
 
-declare global {
-    // @ts-ignore
-    var __unistyles__: UnistylesServices
-}
-
-if (isServer() && !globalThis.__unistyles__) {
-    // @ts-ignore
-    globalThis.__unistyles__ = new UnistylesServices()
-}
-
-export const UnistylesWeb = isServer() ? globalThis.__unistyles__ : new UnistylesServices()
 export const StyleSheet = {
-    configure: UnistylesWeb.state.init,
+    configure: unistyles.services.state.init,
     create: create,
     absoluteFill: {
         position: 'absolute',
@@ -39,8 +27,8 @@ export const StyleSheet = {
     hairlineWidth: 1
 } as unknown as typeof NativeStyleSheet
 
-export const UnistylesRuntime = UnistylesWeb.runtime as unknown as typeof NativeUnistylesRuntime
-export const UnistylesShadowRegistry = UnistylesWeb.shadowRegistry as unknown as typeof NativeUnistylesShadowRegistry
+export const UnistylesRuntime = unistyles.services.runtime as unknown as typeof NativeUnistylesRuntime
+export const UnistylesShadowRegistry = unistyles.services.shadowRegistry as unknown as typeof NativeUnistylesShadowRegistry
 
 export * from './mock'