react-native-unistyles 3.0.24 → 3.1.1

package/src/mocks.ts

@@ -2,8 +2,8 @@ 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 { UnistylesRuntimePrivate } from './specs/UnistylesRuntime'
 import type { IOSContentSizeCategory, UnistylesTheme } from './types'
 
 type Registry = {
@@ -20,15 +20,15 @@ jest.mock('react-native-nitro-modules', () => ({
                 setStyle: () => {},
             }),
             createHybridNavigationBar: () => {},
-        })
-    }
+        }),
+    },
 }))
 
 jest.mock('react-native-unistyles', () => {
     const React = require('react')
     const _REGISTRY: Registry = {
         themes: {},
-        breakpoints: {}
+        breakpoints: {},
     }
     const miniRuntime = {
         themeName: undefined,
@@ -41,7 +41,7 @@ jest.mock('react-native-unistyles', () => {
             left: 0,
             right: 0,
             bottom: 0,
-            ime: 0
+            ime: 0,
         },
         pixelRatio: 1,
         fontScale: 1,
@@ -50,16 +50,16 @@ jest.mock('react-native-unistyles', () => {
         isPortrait: true,
         navigationBar: {
             width: 0,
-            height: 0
+            height: 0,
         },
         screen: {
             width: 0,
-            height: 0
+            height: 0,
         },
         statusBar: {
             width: 0,
-            height: 0
-        }
+            height: 0,
+        },
     }
     const unistylesRuntime = {
         colorScheme: 'unspecified' as ColorScheme,
@@ -68,7 +68,7 @@ jest.mock('react-native-unistyles', () => {
         isPortrait: true,
         isLandscape: false,
         breakpoints: {},
-        dispose: () => { },
+        dispose: () => {},
         equals: () => false,
         name: 'UnistylesRuntimeMock',
         miniRuntime: miniRuntime,
@@ -77,16 +77,16 @@ jest.mock('react-native-unistyles', () => {
             width: 0,
             name: 'StatusBarMock',
             equals: () => false,
-            setHidden: () => { },
-            setStyle: () => { }
+            setHidden: () => {},
+            setStyle: () => {},
         },
         navigationBar: {
             height: 0,
             width: 0,
             name: 'NavigationBarMock',
             equals: () => false,
-            setHidden: () => { },
-            dispose: () => { }
+            setHidden: () => {},
+            dispose: () => {},
         },
         fontScale: 1,
         hasAdaptiveThemes: false,
@@ -113,51 +113,79 @@ jest.mock('react-native-unistyles', () => {
             left: 0,
             right: 0,
             bottom: 0,
-            ime: 0
+            ime: 0,
         },
         screen: {
             width: 0,
-            height: 0
+            height: 0,
         },
-        breakpoint: undefined
+        breakpoint: undefined,
     } satisfies UnistylesRuntimePrivate
 
+    const stripVariants = (styleEntries: Record<string, any>): any => {
+        const result: Record<string, any> = {}
+
+        for (const [name, style] of Object.entries(styleEntries)) {
+            if (typeof style === 'function') {
+                result[name] = (...args: Array<any>) => {
+                    const resolved = style(...args)
+                    const { variants, compoundVariants, ...rest } = resolved
+
+                    return rest
+                }
+            } else if (style !== null && typeof style === 'object' && !Array.isArray(style)) {
+                const { variants, compoundVariants, ...rest } = style
+
+                result[name] = rest
+            } else {
+                result[name] = style
+            }
+        }
+
+        return result
+    }
+
     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
-            }),
+        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: () => ({}),
+                    },
                 }),
                 height: () => ({
                     and: {
-                        width: () => ({})
-                    }
-                })
+                        width: () => ({}),
+                    },
+                }),
             },
             width: () => ({
                 and: {
-                    height: () => ({})
-                }
+                    height: () => ({}),
+                },
             }),
             height: () => ({
                 and: {
-                    width: () => ({})
-                }
-            })
+                    width: () => ({}),
+                },
+            }),
         },
         useUnistyles: () => ({
             theme: Object.values(_REGISTRY.themes).at(0) ?? {},
-            rt: unistylesRuntime
+            rt: unistylesRuntime,
         }),
         StyleSheet: {
             absoluteFillObject: {
@@ -165,14 +193,14 @@ jest.mock('react-native-unistyles', () => {
                 left: 0,
                 right: 0,
                 top: 0,
-                bottom: 0
+                bottom: 0,
             },
             absoluteFill: {
                 position: 'absolute',
                 left: 0,
                 right: 0,
                 top: 0,
-                bottom: 0
+                bottom: 0,
             } as unknown as UnistylesStyleSheet['absoluteFill'],
             compose: (styles: any) => {
                 return styles
@@ -181,16 +209,14 @@ jest.mock('react-native-unistyles', () => {
                 return styles
             },
             create: (styles: any) => {
-                if (typeof styles === 'function') {
-                    return {
-                        ...styles(Object.values(_REGISTRY.themes).at(0) ?? {}, miniRuntime),
-                        useVariants: () => {}
-                    }
-                }
+                const resolved =
+                    typeof styles === 'function'
+                        ? styles(Object.values(_REGISTRY.themes).at(0) ?? {}, miniRuntime)
+                        : styles
 
                 return {
-                    ...styles,
-                    useVariants: () => {}
+                    ...stripVariants(resolved),
+                    useVariants: () => {},
                 }
             },
             configure: (config: UnistylesConfig) => {
@@ -204,17 +230,16 @@ jest.mock('react-native-unistyles', () => {
             },
             jsMethods: {
                 processColor: () => null,
-                parseBoxShadowString: () => []
+                parseBoxShadowString: () => [],
             },
             hairlineWidth: 1,
-            unid: -1,
             addChangeListener: () => () => {},
             init: () => {},
             name: 'StyleSheetMock',
             dispose: () => {},
-            equals: () => false
+            equals: () => false,
         } satisfies UnistylesStyleSheet,
-        UnistylesRuntime: unistylesRuntime
+        UnistylesRuntime: unistylesRuntime,
     }
 })
 
@@ -223,7 +248,7 @@ jest.mock('react-native-unistyles/reanimated', () => {
     const mockedSharedValue = (value: any) => ({
         get: () => value,
         set: (_value: any) => {},
-        value
+        value,
     })
 
     return {
@@ -239,7 +264,7 @@ jest.mock('react-native-unistyles/reanimated', () => {
 
             return {
                 fromValue,
-                toValue
+                toValue,
             }
         },
     }

package/src/mq.ts

@@ -1,20 +1,27 @@
 import type { UnistylesBreakpoints } from './global'
-import { UnistylesRuntime } from './specs'
 import type { Nullable } from './types'
 
+import { UnistylesRuntime } from './specs'
+
 type MQValue = keyof UnistylesBreakpoints | number
 
 type MQHandler = {
     only: {
-        width(wMin?: Nullable<MQValue>, wMax?: MQValue): symbol,
-        height(hMin?: Nullable<MQValue>, hMax?: MQValue): symbol,
-    },
-    width(wMin?: Nullable<MQValue>, wMax?: MQValue): {
+        width(wMin?: Nullable<MQValue>, wMax?: MQValue): symbol
+        height(hMin?: Nullable<MQValue>, hMax?: MQValue): symbol
+    }
+    width(
+        wMin?: Nullable<MQValue>,
+        wMax?: MQValue,
+    ): {
         and: {
             height(hMin?: Nullable<MQValue>, hMax?: MQValue): symbol
         }
-    },
-    height(hMin?: Nullable<MQValue>, hMax?: MQValue): {
+    }
+    height(
+        hMin?: Nullable<MQValue>,
+        hMax?: MQValue,
+    ): {
         and: {
             width(wMin?: Nullable<MQValue>, wMax?: MQValue): symbol
         }
@@ -41,20 +48,21 @@ const getMQValue = (value: Nullable<MQValue>) => {
  */
 export const mq: MQHandler = {
     only: {
-        width: (wMin: Nullable<MQValue> = 0, wMax: MQValue = Number.POSITIVE_INFINITY) => (`:w[${getMQValue(wMin)}, ${getMQValue(wMax)}]` as unknown as symbol),
-        height: (hMin: Nullable<MQValue> = 0, hMax: MQValue = Number.POSITIVE_INFINITY) => (`:h[${getMQValue(hMin)}, ${getMQValue(hMax)}]` as unknown as symbol)
+        width: (wMin: Nullable<MQValue> = 0, wMax: MQValue = Number.POSITIVE_INFINITY) =>
+            `:w[${getMQValue(wMin)}, ${getMQValue(wMax)}]` as unknown as symbol,
+        height: (hMin: Nullable<MQValue> = 0, hMax: MQValue = Number.POSITIVE_INFINITY) =>
+            `:h[${getMQValue(hMin)}, ${getMQValue(hMax)}]` as unknown as symbol,
     },
     width: (wMin: Nullable<MQValue> = 0, wMax: MQValue = Number.POSITIVE_INFINITY) => ({
         and: {
             height: (hMin: Nullable<MQValue> = 0, hMax: MQValue = Number.POSITIVE_INFINITY) =>
-                (`:w[${getMQValue(wMin)}, ${getMQValue(wMax)}]:h[${getMQValue(hMin)}, ${getMQValue(hMax)}]` as unknown as symbol)
-        }
+                `:w[${getMQValue(wMin)}, ${getMQValue(wMax)}]:h[${getMQValue(hMin)}, ${getMQValue(hMax)}]` as unknown as symbol,
+        },
     }),
     height: (hMin: Nullable<MQValue> = 0, hMax: MQValue = Number.POSITIVE_INFINITY) => ({
         and: {
             width: (wMin: Nullable<MQValue> = 0, wMax: MQValue = Number.POSITIVE_INFINITY) =>
-                (`:w[${getMQValue(wMin)}, ${getMQValue(wMax)}]:h[${getMQValue(hMin)}, ${getMQValue(hMax)}]` as unknown as symbol)
-        }
-    })
+                `:w[${getMQValue(wMin)}, ${getMQValue(wMax)}]:h[${getMQValue(hMin)}, ${getMQValue(hMax)}]` as unknown as symbol,
+        },
+    }),
 }
-

package/src/reanimated/useAnimatedTheme.native.ts

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

package/src/reanimated/useAnimatedTheme.ts

@@ -1,14 +1,18 @@
 import { useEffect } from 'react'
 import { type SharedValue, useSharedValue } from 'react-native-reanimated'
-import { UnistyleDependency, UnistylesRuntime } from '../specs'
+
 import type { UnistylesTheme } from '../types'
+
+import { UnistyleDependency, UnistylesRuntime } from '../specs'
 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()))
+        const dispose = services.listener.addListeners([UnistyleDependency.Theme], () =>
+            theme.set(UnistylesRuntime.getTheme()),
+        )
 
         return () => {
             dispose()

package/src/reanimated/variant/types.ts

@@ -1,18 +1,19 @@
 type KeysOfUnion<T> = T extends T ? keyof T : never
 
-export type ColorKeys<T> = KeysOfUnion<T> extends infer K
-    ? K extends string
-        ? K extends `${string}Color${string}`
-            ? K
-            : K extends `${string}color${string}`
+export type ColorKeys<T> =
+    KeysOfUnion<T> extends infer K
+        ? K extends string
+            ? K extends `${string}Color${string}`
                 ? K
-                : never
+                : K extends `${string}color${string}`
+                  ? K
+                  : never
+            : never
         : never
-    : never
 
 export type UseUpdateVariantColorConfig<T extends Record<string, any>> = {
-    animateCallback?: (from: string, to: string) => void,
-    colorKey: ColorKeys<T>,
-    style: T,
+    animateCallback?: (from: string, to: string) => void
+    colorKey: ColorKeys<T>
+    style: T
     secretKey: string | undefined
 }

package/src/reanimated/variant/useAnimatedVariantColor.ts

@@ -1,14 +1,18 @@
 import { interpolateColor, useDerivedValue, useSharedValue } from 'react-native-reanimated'
+
 import type { ColorKeys } from './types'
+
 import { useUpdateVariantColor } from './useUpdateVariantColor'
 
 export const useAnimatedVariantColor = <T extends Record<string, any>>(style: T, colorKey: ColorKeys<T>) => {
-    const secretKey = Object.keys(style).find(key => key.startsWith('unistyles_'))
+    const secretKey = Object.keys(style).find((key) => key.startsWith('unistyles_'))
     // @ts-ignore this is hidden from TS
     const hasVariants = style[secretKey]?.__stylesheetVariants
 
     if (!hasVariants || !(colorKey as string).toLowerCase().includes('color')) {
-        throw new Error('useAnimatedVariantColor: Style was not created by Unistyles, does not have variants or has no color property')
+        throw new Error(
+            'useAnimatedVariantColor: Style was not created by Unistyles, does not have variants or has no color property',
+        )
     }
 
     const { fromValue, toValue } = useUpdateVariantColor({
@@ -27,11 +31,7 @@ export const useAnimatedVariantColor = <T extends Record<string, any>>(style: T,
     }
 
     const derivedColor = useDerivedValue(() => {
-        return interpolateColor(
-            progress.value,
-            [0, 1],
-            [fromValue.get(), toValue.get()]
-        )
+        return interpolateColor(progress.value, [0, 1], [fromValue.get(), toValue.get()])
     })
 
     return derivedColor

package/src/reanimated/variant/useUpdateVariantColor.native.ts

@@ -1,20 +1,24 @@
 import { useEffect, useLayoutEffect } from 'react'
 import { useSharedValue } from 'react-native-reanimated'
-import { StyleSheet, UnistyleDependency } from '../../specs'
+
 import type { UseUpdateVariantColorConfig } from './types'
 
+import { StyleSheet, UnistyleDependency } from '../../specs'
+
 export const useUpdateVariantColor = <T extends Record<string, any>>({
     colorKey,
     style,
-    secretKey
+    secretKey,
 }: UseUpdateVariantColorConfig<T>) => {
     const fromValue = useSharedValue<string>(style[colorKey])
     const toValue = useSharedValue<string>(style[colorKey])
 
     useEffect(() => {
-        // @ts-ignore this is hidden from TS
-        const dispose = StyleSheet.addChangeListener(changedDependencies => {
-            if (changedDependencies.includes(UnistyleDependency.Theme) || changedDependencies.includes(UnistyleDependency.Breakpoints)) {
+        const dispose = StyleSheet.addChangeListener((changedDependencies) => {
+            if (
+                changedDependencies.includes(UnistyleDependency.Theme) ||
+                changedDependencies.includes(UnistyleDependency.Breakpoints)
+            ) {
                 // @ts-ignore
                 const newStyles = style[secretKey]?.uni__getStyles()
 
@@ -33,6 +37,6 @@ export const useUpdateVariantColor = <T extends Record<string, any>>({
 
     return {
         fromValue,
-        toValue
+        toValue,
     }
 }

package/src/reanimated/variant/useUpdateVariantColor.ts

@@ -1,15 +1,17 @@
 import { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react'
 import { runOnUI, useSharedValue } from 'react-native-reanimated'
-import { UnistyleDependency } from '../../specs'
+
 import type { UnistylesValues } from '../../types'
+import type { UseUpdateVariantColorConfig } from './types'
+
+import { UnistyleDependency } from '../../specs'
 import { services } from '../../web/services'
 import { getClosestBreakpointValue } from '../../web/utils'
-import type { UseUpdateVariantColorConfig } from './types'
 
 export const useUpdateVariantColor = <T extends Record<string, any>>({
     animateCallback,
     colorKey,
-    style
+    style,
 }: UseUpdateVariantColorConfig<T>) => {
     const [dummyDiv] = useState(() => {
         const div = document.createElement('div')
@@ -22,27 +24,25 @@ export const useUpdateVariantColor = <T extends Record<string, any>>({
     const parsedStyles = useMemo(() => {
         return services.shadowRegistry.addStyles([style]).parsedStyles
     }, [style])
-    const getCurrentColor = useCallback(
-        () => {
-            if (!parsedStyles) {
-                return 'rgb(0, 0, 0)'
-            }
-
-            const currentColor = parsedStyles[colorKey as keyof UnistylesValues] as string | Record<string, string>
-            const currentColorVar = typeof currentColor === 'string'
+    const getCurrentColor = useCallback(() => {
+        if (!parsedStyles) {
+            return 'rgb(0, 0, 0)'
+        }
+
+        const currentColor = parsedStyles[colorKey as keyof UnistylesValues] as string | Record<string, string>
+        const currentColorVar =
+            typeof currentColor === 'string'
                 ? currentColor
-                : getClosestBreakpointValue<string>(services.runtime, currentColor) ?? 'rgb(0, 0, 0)'
+                : (getClosestBreakpointValue<string>(services.runtime, currentColor) ?? 'rgb(0, 0, 0)')
 
-            if (currentColorVar.startsWith('var(--')) {
-                dummyDiv.style.color = currentColorVar
+        if (currentColorVar.startsWith('var(--')) {
+            dummyDiv.style.color = currentColorVar
 
-                return getComputedStyle(dummyDiv).color
-            }
+            return getComputedStyle(dummyDiv).color
+        }
 
-            return currentColorVar
-        },
-        [style, colorKey]
-    )
+        return currentColorVar
+    }, [style, colorKey])
     const fromValue = useSharedValue<string>(getCurrentColor())
     const toValue = useSharedValue<string>(getCurrentColor())
 
@@ -76,6 +76,6 @@ export const useUpdateVariantColor = <T extends Record<string, any>>({
 
     return {
         fromValue,
-        toValue
+        toValue,
     }
 }

package/src/server/getServerUnistyles.tsx

@@ -1,11 +1,14 @@
 import React from 'react'
 import { StyleSheet } from 'react-native'
+
 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) => {
+export const getServerUnistyles = ({
+    includeRNWStyles = true,
+}: ServerUnistylesSettings = DefaultServerUnistylesSettings) => {
     if (!isServer()) {
         throw error('Server styles should only be read on the server')
     }
@@ -17,10 +20,14 @@ export const getServerUnistyles = ({ includeRNWStyles = true }: ServerUnistylesS
 
     return (
         <>
-            {rnwStyle && <style id='rnw-style'>{rnwStyle}</style>}
-            <style id='unistyles-web'>{css}</style>
+            {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)}`}} />
+            <script
+                id="unistyles-script"
+                defer
+                dangerouslySetInnerHTML={{ __html: `window.__UNISTYLES_STATE__ = ${serialize(state)}` }}
+            />
         </>
     )
 }

package/src/server/index.ts

@@ -2,4 +2,3 @@ export { useServerUnistyles } from './useServerUnistyles'
 export { getServerUnistyles } from './getServerUnistyles'
 export { resetServerUnistyles } from './resetServerUnistyles'
 export { hydrateServerUnistyles } from './hydrateServerUnistyles'
-

package/src/server/types.ts

@@ -1,4 +1,4 @@
 export type ServerUnistylesSettings = {
-  includeRNWStyles?: boolean
+    includeRNWStyles?: boolean
 }
 export const DefaultServerUnistylesSettings = {}

package/src/server/useServerUnistyles.tsx

@@ -1,11 +1,14 @@
 import React, { useRef } from 'react'
+
 import { isServer } from '../web/utils'
 import { getServerUnistyles } from './getServerUnistyles'
 import { hydrateServerUnistyles } from './hydrateServerUnistyles'
 import { resetServerUnistyles } from './resetServerUnistyles'
 import { DefaultServerUnistylesSettings, type ServerUnistylesSettings } from './types'
 
-export const useServerUnistyles = (settings: ServerUnistylesSettings = DefaultServerUnistylesSettings): React.ReactNode | null => {
+export const useServerUnistyles = (
+    settings: ServerUnistylesSettings = DefaultServerUnistylesSettings,
+): React.ReactNode | null => {
     const isServerInserted = useRef(false)
 
     if (isServer() && !isServerInserted.current) {