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

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,9 +40,8 @@ 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)

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/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'
 

package/src/web/registry.ts

@@ -11,9 +11,11 @@ export class UnistylesRegistry {
     private readonly stylesCounter = new Map<string, Set<HTMLElement>>()
     private readonly disposeListenersMap = new Map<object, VoidFunction>()
     private readonly dependenciesMap = new Map<StyleSheetWithSuperPowers<StyleSheet>, Set<UnistyleDependency>>()
-    readonly css = new CSSState()
+    readonly css: CSSState
 
-    constructor(private services: UnistylesServices) {}
+    constructor(private services: UnistylesServices) {
+        this.css = new CSSState(services)
+    }
 
     getComputedStylesheet = (stylesheet: StyleSheetWithSuperPowers<StyleSheet>, scopedThemeName?: UnistylesTheme) => {
         if (typeof stylesheet !== 'function') {
@@ -21,7 +23,7 @@ export class UnistylesRegistry {
         }
 
         if (scopedThemeName) {
-            const scopedTheme = this.services.runtime.getTheme(scopedThemeName, this.services.state.CSSVars)
+            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.`)
@@ -54,7 +56,10 @@ export class UnistylesRegistry {
         dependencies.forEach(dependency => dependenciesMap.add(dependency))
 
         const dispose = this.services.listener.addStylesheetListeners(Array.from(dependenciesMap), () => {
-            const newComputedStylesheet = stylesheet(this.services.runtime.theme, this.services.runtime.miniRuntime)
+            const newComputedStylesheet = stylesheet(
+                this.services.runtime.getTheme(this.services.runtime.themeName, this.services.state.CSSVars),
+                this.services.runtime.miniRuntime
+            )
 
             this.stylesheets.set(stylesheet, newComputedStylesheet)
         })
@@ -77,23 +82,27 @@ export class UnistylesRegistry {
 
         if (stylesCounter.size === 0) {
             // Move this to the end of the event loop so the element is removed from the DOM
-            Promise.resolve().then(() => {
+            return Promise.resolve().then(() => {
+                // Check if element is still in the DOM
                 if (document.querySelector(`.${hash}`)) {
-                    return
+                    return false
                 }
 
                 this.css.remove(hash)
                 this.stylesCache.delete(hash)
-            })
 
-            return true
+                return true
+            })
         }
 
-        return false
+        return Promise.resolve(false)
     }
 
-    add = (value: UnistylesValues) => {
-        const hash = generateHash(value)
+    add = (value: UnistylesValues, forChild?: boolean) => {
+        const generatedHash = generateHash(value)
+        const hash = forChild
+            ? `${generatedHash} > *`
+            : generatedHash
 
         if (!this.stylesCache.has(hash)) {
             this.applyStyles(hash, value)

package/src/web/runtime.ts

@@ -1,7 +1,7 @@
 import { UnistyleDependency } from '../specs/NativePlatform'
 import type { UnistylesMiniRuntime } from '../specs/UnistylesRuntime'
 import { type AppTheme, type AppThemeName, ColorScheme, Orientation } from '../specs/types'
-import { WebContentSizeCategory } from '../types'
+import { type UnistylesTheme, WebContentSizeCategory } from '../types'
 import { NavigationBar, StatusBar } from './mock'
 import type { UnistylesServices } from './types'
 import { error, isServer, schemeToTheme } from './utils'
@@ -213,7 +213,11 @@ export class UnistylesRuntime {
             : this.services.state.themes.get(themeName ?? '')
 
         if (!themeName || !theme) {
-            throw error(`You're trying to get theme "${themeName}" but it wasn't registered.`)
+            return new Proxy({} as UnistylesTheme, {
+                get: () => {
+                    throw error(`You're trying to get theme "${themeName}" but it wasn't registered.`)
+                }
+            })
         }
 
         return theme

package/src/web/services.ts

@@ -3,8 +3,9 @@ import { UnistylesRegistry } from './registry'
 import { UnistylesRuntime } from './runtime'
 import { UnistylesShadowRegistry } from './shadowRegistry'
 import { UnistylesState } from './state'
+import { isServer } from './utils'
 
-export class UnistylesServices {
+class UnistylesServices {
     runtime: UnistylesRuntime
     registry: UnistylesRegistry
     shadowRegistry: UnistylesShadowRegistry
@@ -26,3 +27,15 @@ export class UnistylesServices {
         this.services.listener = this.listener
     }
 }
+
+declare global {
+    // @ts-ignore
+    var __unistyles__: UnistylesServices
+}
+
+if (isServer() && !globalThis.__unistyles__) {
+    // @ts-ignore
+    globalThis.__unistyles__ = new UnistylesServices()
+}
+
+export const services = isServer() ? globalThis.__unistyles__ : new UnistylesServices()

package/src/web/shadowRegistry.ts

@@ -1,8 +1,8 @@
-import { UnistyleDependency } from '../specs'
+import { UnistyleDependency } from '../specs/NativePlatform/NativePlatform.nitro'
 import type { UnistylesTheme, UnistylesValues } from '../types'
 import { deepMergeObjects } from '../utils'
-import type { UnistylesServices } from './types'
-import { extractSecrets, extractUnistyleDependencies } from './utils'
+import type { UniGeneratedStyle, UnistylesServices } from './types'
+import { extractSecrets, extractUnistyleDependencies, isGeneratedUnistyle, isServer } from './utils'
 import { getVariants } from './variants'
 
 export class UnistylesShadowRegistry {
@@ -27,7 +27,14 @@ export class UnistylesShadowRegistry {
         this.services.registry.connect(ref, hash)
     }
 
-    addStyles = (unistyles: Array<UnistylesValues>) => {
+    addStyles = (unistyles: Array<UnistylesValues>, forChild?: boolean) => {
+        const [firstStyle] = unistyles
+
+        // If it is already a generated style, return it
+        if (firstStyle && isGeneratedUnistyle(firstStyle)) {
+            return firstStyle as UniGeneratedStyle
+        }
+
         const getParsedStyles = () => {
             const allStyles = unistyles.map(unistyle => {
                 const secrets = extractSecrets(unistyle)
@@ -37,6 +44,11 @@ export class UnistylesShadowRegistry {
                     return unistyle
                 }
 
+                // Animated styles - shouldn't be processed
+                if (Object.keys(secrets).length === 0) {
+                    return {}
+                }
+
                 const { __uni__key, __uni__stylesheet, __uni__args = [], __uni_variants: variants } = secrets
                 const newComputedStylesheet = this.services.registry.getComputedStylesheet(__uni__stylesheet, scopedTheme)
                 const style = newComputedStylesheet[__uni__key] as (UnistylesValues | ((...args: any) => UnistylesValues))
@@ -52,7 +64,10 @@ export class UnistylesShadowRegistry {
                     this.services.registry.addDependenciesToStylesheet(__uni__stylesheet, dependencies)
                 }
 
-                return resultWithVariants as UnistylesValues
+                return {
+                    ...resultWithVariants,
+                    ...resultWithVariants._web
+                } as UnistylesValues
             })
 
             return deepMergeObjects(...allStyles)
@@ -61,7 +76,7 @@ export class UnistylesShadowRegistry {
         // Copy scoped theme to not use referenced value
         const scopedTheme = this.scopedTheme
         const parsedStyles = getParsedStyles()
-        const { hash, existingHash } = this.services.registry.add(parsedStyles)
+        const { hash, existingHash } = this.services.registry.add(parsedStyles, forChild)
         const injectedClassNames = parsedStyles?._web?._classNames ?? []
         const injectedClassName = Array.isArray(injectedClassNames) ? injectedClassNames.join(' ') : injectedClassNames
         const dependencies = extractUnistyleDependencies(parsedStyles)
@@ -75,7 +90,11 @@ export class UnistylesShadowRegistry {
             }))
         }
 
-        return { injectedClassName, hash }
+        const hashClassname = forChild
+            ? hash.replace(' > *', '')
+            : hash
+
+        return { injectedClassName, hash: hashClassname }
     }
 
     setScopedTheme = (theme?: UnistylesTheme) => {
@@ -85,15 +104,18 @@ export class UnistylesShadowRegistry {
     getScopedTheme = () => this.scopedTheme
 
     remove = (ref: any, hash?: string) => {
-        if (!(ref instanceof HTMLElement) || !hash) {
+        if (isServer() || !(ref instanceof HTMLElement) || !hash) {
             return
         }
 
-        const removed = this.services.registry.remove(ref, hash)
+        this.services.registry.remove(ref, hash)
+            .then(removed => {
+                if (!removed) {
+                    return
+                }
 
-        if (removed) {
-            this.disposeMap.get(hash)?.()
-            this.disposeMap.delete(hash)
-        }
+                this.disposeMap.get(hash)?.()
+                this.disposeMap.delete(hash)
+            })
     }
 }

package/src/web/state.ts

@@ -17,6 +17,7 @@ export class UnistylesState {
     CSSVars = true
 
     private matchingBreakpoints = new Map<string, boolean>()
+    private _config: UnistylesConfig = {}
 
     get breakpoint() {
         const [currentBreakpoint] = Array.from(this.matchingBreakpoints)
@@ -37,6 +38,7 @@ export class UnistylesState {
             return
         }
 
+        this._config = config
         this.isInitialized = true
         this.initThemes(config.themes, config.settings?.CSSVars)
         this.initBreakpoints(config.breakpoints)
@@ -58,7 +60,11 @@ export class UnistylesState {
         this.services.listener.initListeners()
     }
 
-    private initThemes = (themes = {} as UnistylesThemes, CSSVars = true) => {
+    private initThemes = (themes?: UnistylesThemes, CSSVars = true) => {
+        if (!themes) {
+            return
+        }
+
         this.CSSVars = CSSVars
 
         Object.entries(themes).forEach(([themeName, theme]) => {
@@ -117,7 +123,11 @@ export class UnistylesState {
         }
     }
 
-    private initBreakpoints = (breakpoints = {} as UnistylesBreakpoints) => {
+    private initBreakpoints = (breakpoints?: UnistylesBreakpoints) => {
+        if (!breakpoints) {
+            return
+        }
+
         this.breakpoints = breakpoints
         const breakpointsEntries = Object.entries(breakpoints)
 
@@ -145,4 +155,6 @@ export class UnistylesState {
                 })
             })
     }
+
+    getConfig = () => this._config
 }

package/src/web/types.ts

@@ -1,8 +1,8 @@
 import type { UnistylesListener } from './listener'
-import type{ UnistylesRegistry } from './registry'
-import type{ UnistylesRuntime } from './runtime'
-import type{ UnistylesShadowRegistry } from './shadowRegistry'
-import type{ UnistylesState } from './state'
+import type { UnistylesRegistry } from './registry'
+import type { UnistylesRuntime } from './runtime'
+import type { UnistylesShadowRegistry } from './shadowRegistry'
+import type { UnistylesState } from './state'
 
 export type UnistylesServices = {
     runtime: UnistylesRuntime,
@@ -11,3 +11,8 @@ export type UnistylesServices = {
     state: UnistylesState,
     listener: UnistylesListener
 }
+
+export const UNI_GENERATED_KEYS = ['$$css', 'hash', 'injectedClassName'] as const
+export type UniGeneratedKey = typeof UNI_GENERATED_KEYS[number]
+
+export type UniGeneratedStyle = Record<UniGeneratedKey, string>

package/src/web/utils/createUnistylesRef.ts

@@ -0,0 +1,33 @@
+import type React from 'react'
+import type { Nullable, UnistylesValues } from '../../types'
+import * as unistyles from '../services'
+import { isServer } from './common'
+
+type Styles = readonly [
+    {
+        hash: string
+    },
+    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)
+        }
+
+        storedRef.current = ref
+        unistyles.services.shadowRegistry.add(ref, classNames?.hash)
+
+        if (typeof forwardedRef === 'function') {
+            return forwardedRef(ref)
+        }
+
+        if (forwardedRef) {
+            forwardedRef.current = ref
+        }
+    }
+}