react-native-unistyles 3.0.0-nightly-20250328 → 3.0.0-rc.1

package/src/components/native/Image.tsx

@@ -1,4 +1,36 @@
-import { Image as NativeImage } from 'react-native'
-import { createUnistylesElement } from '../../core'
+import React, { type ComponentProps, forwardRef } from 'react'
+import { type ImageStyle, Image as NativeImage, type StyleProp, type ViewStyle } from 'react-native'
+import { getClassName } from '../../core'
+import { maybeWarnAboutMultipleUnistyles } from '../../core/warn'
+import type { UnistylesValues } from '../../types'
+import { copyComponentProperties } from '../../utils'
+import { createUnistylesRef, keyInObject } from '../../web/utils'
 
-export const Image = createUnistylesElement(NativeImage)
+type Props = ComponentProps<typeof NativeImage> & {
+    style?: UnistylesValues
+    imageStyle?: UnistylesValues
+}
+
+const UnistylesImage = forwardRef<unknown, Props>((props, forwardedRef) => {
+    const classNames = getClassName(props.style)
+    const ref = createUnistylesRef(classNames, forwardedRef)
+    const hasWidthStyle = typeof props.style === 'object' && keyInObject(props.style, 'width')
+    const hasHeightStyle = typeof props.style === 'object' && keyInObject(props.style, 'height')
+
+    maybeWarnAboutMultipleUnistyles(props.style as ViewStyle, 'Image')
+
+    return (
+        <NativeImage
+            {...props}
+            style={[
+                classNames,
+                // Clear inline width and height extracted from source
+                hasWidthStyle && { width: '' },
+                hasHeightStyle && { height: '' }
+            ] as StyleProp<ImageStyle>}
+            ref={ref}
+        />
+    )
+})
+
+export const Image = copyComponentProperties(NativeImage, UnistylesImage)

package/src/components/native/ImageBackground.tsx

@@ -2,10 +2,10 @@ import React from 'react'
 import { forwardRef } from 'react'
 import { type ImageStyle, ImageBackground as NativeImageBackground, type StyleProp, type ViewStyle } from 'react-native'
 import { getClassName } from '../../core'
+import { maybeWarnAboutMultipleUnistyles } from '../../core/warn'
 import type { UnistylesValues } from '../../types'
 import { copyComponentProperties } from '../../utils'
-import { UnistylesShadowRegistry } from '../../web'
-import { isServer } from '../../web/utils'
+import { createUnistylesRef, keyInObject } from '../../web/utils'
 
 type Props = {
     style?: UnistylesValues
@@ -13,44 +13,28 @@ type Props = {
 }
 
 const UnistylesImageBackground = forwardRef<unknown, Props>((props, forwardedRef) => {
-    let storedRef: NativeImageBackground | null = null
-    let storedImageRef: NativeImageBackground | null = null
     const styleClassNames = getClassName(props.style)
     const imageClassNames = getClassName(props.imageStyle)
+    const ref = createUnistylesRef(styleClassNames, forwardedRef)
+    const imageRef = createUnistylesRef(imageClassNames)
+    const hasWidthStyle = typeof props.imageStyle === 'object' && keyInObject(props.imageStyle, 'width')
+    const hasHeightStyle = typeof props.imageStyle === 'object' && keyInObject(props.imageStyle, 'height')
+
+    maybeWarnAboutMultipleUnistyles(props.style as ViewStyle, 'ImageBackground')
+    maybeWarnAboutMultipleUnistyles(props.imageStyle as ViewStyle, 'ImageBackground')
 
     return (
         <NativeImageBackground
             {...props}
             style={styleClassNames as StyleProp<ViewStyle>}
-            imageStyle={imageClassNames as StyleProp<ImageStyle>}
-            ref={isServer() ? undefined : ref => {
-                if (!ref) {
-                    // @ts-expect-error hidden from TS
-                    UnistylesShadowRegistry.remove(storedRef, styleClassNames?.hash)
-                }
-
-                storedRef = ref
-                // @ts-expect-error hidden from TS
-                UnistylesShadowRegistry.add(ref, styleClassNames?.hash)
-
-                if (typeof forwardedRef === 'function') {
-                    return forwardedRef(ref)
-                }
-
-                if (forwardedRef) {
-                    forwardedRef.current = ref
-                }
-            }}
-            imageRef={isServer() ? undefined : ref => {
-                if (!ref) {
-                    // @ts-expect-error hidden from TS
-                    UnistylesShadowRegistry.remove(storedImageRef, imageClassNames?.hash)
-                }
-
-                storedImageRef = ref
-                // @ts-expect-error hidden from TS
-                UnistylesShadowRegistry.add(ref, imageClassNames?.hash)
-            }}
+            imageStyle={[
+                imageClassNames,
+                // Clear inline width and height extracted from source
+                hasWidthStyle && { width: '' },
+                hasHeightStyle && { height: '' }
+            ] as StyleProp<ImageStyle>}
+            ref={ref}
+            imageRef={imageRef}
         />
     )
 })

package/src/components/native/Pressable.native.tsx

@@ -50,10 +50,18 @@ export const Pressable = forwardRef<View, PressableProps>(({ variants, style, ..
                     storedRef.current = ref
                 }
 
-                // @ts-expect-error - this is hidden from TS
-                UnistylesShadowRegistry.add(ref, unistyles)
-
-                return passForwardedRef(props, ref, forwardedRef)
+                return passForwardedRef(
+                    ref,
+                    forwardedRef,
+                    () => {
+                        // @ts-expect-error - this is hidden from TS
+                        UnistylesShadowRegistry.add(ref, unistyles)
+                    },
+                    () => {
+                        // @ts-expect-error - this is hidden from TS
+                        UnistylesShadowRegistry.remove(ref)
+                    }
+                )
             }}
             style={state => {
                 const isPropStyleAFunction = typeof style === 'function'

package/src/core/createUnistylesElement.native.tsx

@@ -38,15 +38,21 @@ export const createUnistylesElement = (Component: any) => {
                         storedRef.current = getNativeRef(Component, ref)
                     }
 
-                    passForwardedRef(props, ref, forwardedRef)
-
                     // @ts-ignore we don't know the type of the component
                     maybeWarnAboutMultipleUnistyles(props.style, Component.displayName)
 
-                    return () => {
-                        // @ts-ignore
-                        UnistylesShadowRegistry.remove(ref)
-                    }
+                    return passForwardedRef(
+                        ref,
+                        forwardedRef,
+                        () => {
+                            // @ts-ignore this is hidden from TS
+                            UnistylesShadowRegistry.add(ref, props.style)
+                        },
+                        () => {
+                            // @ts-ignore this is hidden from TS
+                            UnistylesShadowRegistry.remove(ref)
+                        }
+                    )
                 }}
             />
         )

package/src/core/createUnistylesElement.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
+import type { ViewStyle } from 'react-native'
 import type { UnistylesValues } from '../types'
 import { copyComponentProperties } from '../utils'
-import { UnistylesShadowRegistry } from '../web'
-import { isServer } from '../web/utils'
+import { createUnistylesRef } from '../web/utils'
 import { getClassName } from './getClassname'
 import { maybeWarnAboutMultipleUnistyles } from './warn'
 
@@ -12,34 +12,16 @@ type ComponentProps = {
 
 export const createUnistylesElement = (Component: any) => {
     const UnistylesComponent = React.forwardRef<unknown, ComponentProps>((props, forwardedRef) => {
-        let storedRef: HTMLElement | null = null
         const classNames = getClassName(props.style)
+        const ref = createUnistylesRef(classNames, forwardedRef)
+
+        maybeWarnAboutMultipleUnistyles(props.style as ViewStyle, Component.displayName)
 
         return (
             <Component
                 {...props}
                 style={classNames}
-                ref={isServer() ? undefined : (ref: HTMLElement | null) => {
-                    // @ts-ignore we don't know the type of the component
-                    maybeWarnAboutMultipleUnistyles(props.style, Component.displayName)
-
-                    if (!ref) {
-                        // @ts-expect-error hidden from TS
-                        UnistylesShadowRegistry.remove(storedRef, classNames?.hash)
-                    }
-
-                    storedRef = ref
-                    // @ts-expect-error hidden from TS
-                    UnistylesShadowRegistry.add(ref, classNames?.hash)
-
-                    if (typeof forwardedRef === 'function') {
-                        return forwardedRef(ref)
-                    }
-
-                    if (forwardedRef) {
-                        forwardedRef.current = ref
-                    }
-                }}
+                ref={ref}
             />
         )
     })

package/src/core/createUnistylesImageBackground.tsx

@@ -27,17 +27,23 @@ export const createUnistylesImageBackground = (Component: typeof ImageBackground
             <Component
                 {...props}
                 ref={ref => {
-                    passForwardedRef(props, ref, forwardedRef)
-
-                    return () => {
-                        // @ts-ignore
-                        UnistylesShadowRegistry.remove(ref)
-
-                        if (storedImageRef.current) {
-                            // @ts-ignore
-                            UnistylesShadowRegistry.remove(storedImageRef.current)
+                    return passForwardedRef(
+                        ref,
+                        forwardedRef,
+                        () => {
+                            // @ts-expect-error - this is hidden from TS
+                            UnistylesShadowRegistry.add(ref, props.style)
+                        },
+                        () => {
+                            // @ts-expect-error - this is hidden from TS
+                            UnistylesShadowRegistry.remove(ref)
+
+                            if (storedImageRef.current) {
+                                // @ts-expect-error - this is hidden from TS
+                                UnistylesShadowRegistry.remove(storedImageRef.current)
+                            }
                         }
-                    }
+                    )
                 }}
                 imageRef={ref => {
                     if (ref) {

package/src/core/passForwardRef.ts

@@ -1,10 +1,10 @@
 import React from 'react'
-import { UnistylesShadowRegistry } from '../specs'
 
 export const passForwardedRef = <T>(
-    props: any,
     ref: T,
-    forwardedRef: React.ForwardedRef<T>
+    forwardedRef: React.ForwardedRef<T>,
+    onMount?: () => void,
+    onUnmount?: () => void
 ) => {
     const passForwardedRef = () => {
         if (typeof forwardedRef === 'function') {
@@ -19,10 +19,10 @@ export const passForwardedRef = <T>(
     }
     const forwardedRefReturnFn = passForwardedRef()
 
-    // @ts-expect-error hidden from TS
-    UnistylesShadowRegistry.add(ref, props.style)
+    onMount?.()
 
     return () => {
         forwardedRefReturnFn?.()
+        onUnmount?.()
     }
 }

package/src/server/getServerUnistyles.tsx

@@ -2,20 +2,25 @@ import React from 'react'
 import { StyleSheet } from 'react-native'
 import { UnistylesWeb } from '../web'
 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)}`}} />
-    </>
-}
+
+    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/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/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/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 { assignSecrets, error, isServer, removeInlineStyles } from './utils'
 
 type Variants = Record<string, string | boolean | undefined>
 
@@ -9,6 +9,13 @@ export const create = (stylesheet: StyleSheetWithSuperPowers<StyleSheet>, id?: s
         throw error('Unistyles is not initialized correctly. Please add babel plugin to your babel config.')
     }
 
+    // For SSR
+    if (!UnistylesWeb.state.isInitialized && !isServer()) {
+        const config = window?.__UNISTYLES_STATE__?.config
+
+        config && UnistylesWeb.state.init(config)
+    }
+
     const computedStylesheet = UnistylesWeb.registry.getComputedStylesheet(stylesheet)
     const addSecrets = (value: any, key: string, args = undefined as Array<any> | undefined, variants = {} as Variants) => assignSecrets(value, {
         __uni__key: key,

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
         }
@@ -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/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') {

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)
@@ -153,4 +155,6 @@ export class UnistylesState {
                 })
             })
     }
+
+    getConfig = () => this._config
 }

package/src/web/utils/createUnistylesRef.ts

@@ -0,0 +1,29 @@
+import type React from 'react'
+import type { Nullable } from '../../types'
+import { UnistylesWeb } from '../index'
+import { isServer } from './common'
+
+type ClassNames = {
+    hash: string
+}
+
+export const createUnistylesRef = <T>(classNames?: ClassNames, forwardedRef?: React.ForwardedRef<T>) => {
+    const storedRef = { current: null as Nullable<T> }
+
+    return isServer() ? undefined : (ref: Nullable<T>) => {
+        if (!ref) {
+            UnistylesWeb.shadowRegistry.remove(storedRef, classNames?.hash)
+        }
+
+        storedRef.current = ref
+        UnistylesWeb.shadowRegistry.add(ref, classNames?.hash)
+
+        if (typeof forwardedRef === 'function') {
+            return forwardedRef(ref)
+        }
+
+        if (forwardedRef) {
+            forwardedRef.current = ref
+        }
+    }
+}

package/src/web/utils/index.ts

@@ -1,2 +1,3 @@
 export * from './common'
 export * from './unistyle'
+export * from './createUnistylesRef'