react-native-unistyles 3.0.0-nightly-20250505 → 3.0.0-nightly-20250508

package/src/mocks.ts

@@ -11,16 +11,6 @@ type Registry = {
     breakpoints: UnistylesBreakpoints
 }
 
-jest.mock('react-native', () => ({
-    TurboModuleRegistry: {
-        get: () => ({})
-    },
-    StyleSheet: {},
-    Platform: {
-        OS: 'headless'
-    }
-}))
-
 jest.mock('react-native-nitro-modules', () => ({
     NitroModules: {
         createHybridObject: () => ({
@@ -35,6 +25,7 @@ jest.mock('react-native-nitro-modules', () => ({
 }))
 
 jest.mock('react-native-unistyles', () => {
+    const React = require('react')
     const _REGISTRY: Registry = {
         themes: {},
         breakpoints: {}
@@ -70,8 +61,101 @@ jest.mock('react-native-unistyles', () => {
             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',
@@ -95,10 +179,8 @@ jest.mock('react-native-unistyles', () => {
             },
             create: (styles: any) => {
                 if (typeof styles === 'function') {
-                    const firstTheme = Object.values(_REGISTRY.themes).at(0) ?? {}
-
                     return {
-                        ...styles(firstTheme, miniRuntime),
+                        ...styles(Object.values(_REGISTRY.themes).at(0) ?? {}, miniRuntime),
                         useVariants: () => {}
                     }
                 }
@@ -128,63 +210,7 @@ jest.mock('react-native-unistyles', () => {
             dispose: () => {},
             equals: () => false
         } satisfies UnistylesStyleSheet,
-        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
+        UnistylesRuntime: unistylesRuntime
     }
 })
 

package/src/web/shadowRegistry.ts

@@ -1,8 +1,8 @@
 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 } from './utils'
 import { getVariants } from './variants'
 
 export class UnistylesShadowRegistry {
@@ -28,6 +28,13 @@ export class UnistylesShadowRegistry {
     }
 
     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)

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/unistyle.ts

@@ -5,6 +5,7 @@ import { ColorScheme, Orientation } from '../../specs/types'
 import type { StyleSheet, StyleSheetWithSuperPowers, UnistylesValues } from '../../types/stylesheet'
 import { isUnistylesMq, parseMq } from '../../utils'
 import * as unistyles from '../services'
+import { UNI_GENERATED_KEYS, type UniGeneratedKey, type UniGeneratedStyle } from '../types'
 import { keyInObject, reduceObject } from './common'
 
 export const schemeToTheme = (scheme: ColorScheme) => {
@@ -139,3 +140,7 @@ export const checkForAnimated = (value: any): boolean => {
 
     return false
 }
+
+export const isGeneratedUnistyle = (value: Record<string, any>): value is UniGeneratedStyle => {
+    return Object.keys(value).every(key => UNI_GENERATED_KEYS.includes(key as UniGeneratedKey))
+}