react-native-unistyles 3.0.24 → 3.1.1

package/src/core/createUnistylesImageBackground.tsx

@@ -1,5 +1,7 @@
-import React from 'react'
 import type { ImageBackground, ImageBackgroundProps } from 'react-native'
+
+import React from 'react'
+
 import { UnistylesShadowRegistry } from '../specs'
 import { copyComponentProperties } from '../utils'
 import { passForwardedRef } from './passForwardRef'
@@ -15,7 +17,7 @@ export const createUnistylesImageBackground = (Component: typeof ImageBackground
         return (
             <Component
                 {...props}
-                ref={ref => {
+                ref={(ref) => {
                     return passForwardedRef(
                         ref,
                         forwardedRef,
@@ -26,10 +28,10 @@ export const createUnistylesImageBackground = (Component: typeof ImageBackground
                         () => {
                             // @ts-expect-error - this is hidden from TS
                             UnistylesShadowRegistry.remove(ref)
-                        }
+                        },
                     )
                 }}
-                imageRef={ref => {
+                imageRef={(ref) => {
                     // @ts-expect-error web types are not compatible with RN styles
                     UnistylesShadowRegistry.add(ref, props.imageStyle)
 

package/src/core/getClassname.ts

@@ -1,4 +1,5 @@
 import type { UnistylesValues } from '../types'
+
 import * as unistyles from '../web/services'
 import { checkForAnimated } from '../web/utils'
 
@@ -9,17 +10,9 @@ export const getClassName = (unistyle: UnistylesValues | undefined | Array<Unist
 
     const flattenedStyles = Array.isArray(unistyle) ? unistyle.flat(Number.POSITIVE_INFINITY) : [unistyle]
     const animatedStyles = flattenedStyles.filter(checkForAnimated)
-    const regularStyles = flattenedStyles.filter(style => !checkForAnimated(style))
+    const regularStyles = flattenedStyles.filter((style) => !checkForAnimated(style))
 
-    const { hash, injectedClassName } = unistyles.services.shadowRegistry.addStyles(
-        regularStyles,
-        forChild
-    )
+    const { hash, injectedClassName } = unistyles.services.shadowRegistry.addStyles(regularStyles, forChild)
 
-    return hash
-        ? [
-            { $$css: true, hash, injectedClassName },
-            animatedStyles,
-        ] as const
-        : undefined
+    return hash ? ([{ $$css: true, hash, injectedClassName }, animatedStyles] as const) : undefined
 }

package/src/core/parseBoxShadow.ts

@@ -19,7 +19,7 @@ const parseBoxShadow = (str: string): BoxShadow | undefined => {
     // split by space, but not if it's inside of ()
     const parts = str.split(/\s+(?![^(]*\))/)
     const lastIndex = parts.length - 1
-    const insetIndex = parts.findIndex(part => part === 'inset')
+    const insetIndex = parts.findIndex((part) => part === 'inset')
 
     // inset can only be at the start or end
     if (![-1, 0, lastIndex].includes(insetIndex)) {
@@ -27,19 +27,12 @@ const parseBoxShadow = (str: string): BoxShadow | undefined => {
     }
 
     // if there is no inset, color can only be at the start or end
-    const maybeColorsIndexes = insetIndex === -1
-        ? [0, lastIndex]
-        : insetIndex === lastIndex
-            ? [0, lastIndex - 1]
-            : [1, lastIndex]
+    const maybeColorsIndexes =
+        insetIndex === -1 ? [0, lastIndex] : insetIndex === lastIndex ? [0, lastIndex - 1] : [1, lastIndex]
 
-    const colorIndex = maybeColorsIndexes.find(index => !isValue(parts[index])) ?? -1
-    const maybeColor = colorIndex !== -1
-        ? parts[colorIndex]
-        : undefined
-    const color = maybeColor && processColor(maybeColor)
-        ? parts[colorIndex]
-        : undefined
+    const colorIndex = maybeColorsIndexes.find((index) => !isValue(parts[index])) ?? -1
+    const maybeColor = colorIndex !== -1 ? parts[colorIndex] : undefined
+    const color = maybeColor && processColor(maybeColor) ? parts[colorIndex] : undefined
     const values = parts.filter((_, index) => index !== colorIndex && index !== insetIndex)
 
     // at this point there can be only 4 values
@@ -53,32 +46,26 @@ const parseBoxShadow = (str: string): BoxShadow | undefined => {
         return undefined
     }
 
-    const blurRadiusValue = isValue(blurRadius)
-        ? Number.parseFloat(blurRadius as string)
-        : undefined
+    const blurRadiusValue = isValue(blurRadius) ? Number.parseFloat(blurRadius as string) : undefined
 
     if (blurRadiusValue !== undefined && blurRadiusValue < 0) {
         return undefined
     }
 
     return {
-        inset: insetIndex !== -1
-            ? true
-            : undefined,
+        inset: insetIndex !== -1 ? true : undefined,
         offsetX: Number.parseFloat(offsetX as string),
         offsetY: Number.parseFloat(offsetY as string),
         blurRadius: blurRadiusValue ?? 0,
-        spreadDistance: spreadRadius
-            ? Number.parseFloat(spreadRadius as string)
-            : 0,
-        color
+        spreadDistance: spreadRadius ? Number.parseFloat(spreadRadius as string) : 0,
+        color,
     }
 }
 
 export const parseBoxShadowString = (str: string): Array<BoxShadow> => {
     const parts = str
         .split(/,(?![^()]*\))/)
-        .map(part => part.trim().replace('\n', ''))
+        .map((part) => part.trim().replace('\n', ''))
         .filter(Boolean)
         .map(parseBoxShadow)
         .filter(Boolean) as Array<BoxShadow>

package/src/core/passForwardRef.ts

@@ -4,7 +4,7 @@ export const passForwardedRef = <T>(
     ref: T,
     forwardedRef: React.ForwardedRef<T>,
     onMount?: () => void,
-    onUnmount?: () => void
+    onUnmount?: () => void,
 ) => {
     const passForwardedRef = () => {
         if (typeof forwardedRef === 'function') {

package/src/core/useProxifiedUnistyles/listener.native.ts

@@ -1,10 +1,10 @@
-import { StyleSheet, UnistyleDependency } from '../../specs'
 import type { ListenerProps } from './types'
 
+import { StyleSheet, UnistyleDependency } from '../../specs'
+
 export const listener = ({ dependencies, updateTheme, updateRuntime }: ListenerProps) => {
     const listensToTheme = dependencies.includes(UnistyleDependency.Theme)
-    // @ts-expect-error - this is hidden from TS
-    const dispose = StyleSheet.addChangeListener(changedDependencies => {
+    const dispose = StyleSheet.addChangeListener((changedDependencies) => {
         if (listensToTheme && changedDependencies.includes(UnistyleDependency.Theme)) {
             updateTheme()
         }

package/src/core/useProxifiedUnistyles/listener.ts

@@ -1,10 +1,17 @@
+import type { ListenerProps } from './types'
+
 import { UnistyleDependency } from '../../specs'
 import * as unistyles from '../../web/services'
-import type { ListenerProps } from './types'
 
 export const listener = ({ dependencies, updateTheme, updateRuntime }: ListenerProps) => {
-    const disposeTheme = unistyles.services.listener.addListeners(dependencies.filter(dependency => dependency === UnistyleDependency.Theme), updateTheme)
-    const disposeRuntime = unistyles.services.listener.addListeners(dependencies.filter(dependency => dependency !== UnistyleDependency.Theme), dependency => updateRuntime(dependency === UnistyleDependency.ThemeName))
+    const disposeTheme = unistyles.services.listener.addListeners(
+        dependencies.filter((dependency) => dependency === UnistyleDependency.Theme),
+        updateTheme,
+    )
+    const disposeRuntime = unistyles.services.listener.addListeners(
+        dependencies.filter((dependency) => dependency !== UnistyleDependency.Theme),
+        (dependency) => updateRuntime(dependency === UnistyleDependency.ThemeName),
+    )
 
     return () => {
         disposeTheme()

package/src/core/useProxifiedUnistyles/types.ts

@@ -1,7 +1,7 @@
 import type { UnistyleDependency } from '../../specs'
 
 export type ListenerProps = {
-    updateTheme: VoidFunction,
-    updateRuntime(themeNameChange: boolean): void,
+    updateTheme: VoidFunction
+    updateRuntime(themeNameChange: boolean): void
     dependencies: Array<UnistyleDependency>
 }

package/src/core/useProxifiedUnistyles/useProxifiedUnistyles.ts

@@ -1,8 +1,10 @@
 import { useEffect, useLayoutEffect, useReducer, useRef, useState } from 'react'
+
+import type { UnistylesTheme } from '../../types'
+
 import { type UnistylesMiniRuntime, UnistylesRuntime, UnistylesShadowRegistry } from '../../specs'
 // It's imported that way because of circular dependency
 import { UnistyleDependency } from '../../specs/NativePlatform'
-import type { UnistylesTheme } from '../../types'
 import { listener } from './listener'
 
 const getMiniRuntime = (): UnistylesMiniRuntime => {
@@ -24,11 +26,13 @@ const RTDependencyMap = {
     statusBar: UnistyleDependency.StatusBar,
     pixelRatio: UnistyleDependency.PixelRatio,
     themeName: UnistyleDependency.ThemeName,
-    rtl: UnistyleDependency.Rtl
+    rtl: UnistyleDependency.Rtl,
 } satisfies Partial<Record<keyof UnistylesMiniRuntime, UnistyleDependency>>
 
 export const useProxifiedUnistyles = (forcedTheme?: UnistylesTheme) => {
-    const [scopedTheme, setScopedTheme] = useState(forcedTheme ?? UnistylesShadowRegistry.getScopedTheme() as UnistylesTheme)
+    const [scopedTheme, setScopedTheme] = useState(
+        forcedTheme ?? (UnistylesShadowRegistry.getScopedTheme() as UnistylesTheme),
+    )
     const [dependencies] = useState(() => new Set<number>())
     const [theme, setTheme] = useState(UnistylesRuntime.getTheme(scopedTheme))
     const [_, runtimeChanged] = useReducer(() => ({}), {})
@@ -53,7 +57,7 @@ export const useProxifiedUnistyles = (forcedTheme?: UnistylesTheme) => {
                 }
 
                 runtimeChanged()
-            }
+            },
         })
     }
 
@@ -72,7 +76,7 @@ export const useProxifiedUnistyles = (forcedTheme?: UnistylesTheme) => {
             dependencies.add(UnistyleDependency.Theme)
 
             return target[prop]
-        }
+        },
     })
     const proxifiedRuntime = new Proxy(getMiniRuntime(), {
         get: (target, prop) => {
@@ -88,7 +92,7 @@ export const useProxifiedUnistyles = (forcedTheme?: UnistylesTheme) => {
                         dependencies.add(UnistyleDependency.Insets)
 
                         return target[prop as keyof typeof target]
-                    }
+                    },
                 })
             }
 
@@ -101,7 +105,7 @@ export const useProxifiedUnistyles = (forcedTheme?: UnistylesTheme) => {
             }
 
             return target[prop as keyof typeof target]
-        }
+        },
     })
 
     useLayoutEffect(() => {
@@ -124,7 +128,7 @@ export const useProxifiedUnistyles = (forcedTheme?: UnistylesTheme) => {
         addDependencies: (newDependencies: Array<UnistyleDependency>) => {
             const dependenciesSize = dependencies.size
 
-            newDependencies.forEach(dependency => {
+            newDependencies.forEach((dependency) => {
                 dependencies.add(dependency)
             })
 
@@ -135,6 +139,6 @@ export const useProxifiedUnistyles = (forcedTheme?: UnistylesTheme) => {
             syncedDependenciesSizeRef.current = dependencies.size
             syncedScopedThemeRef.current = scopedTheme
             reinitListener()
-        }
+        },
     }
 }

package/src/core/useUnistyles.ts

@@ -1,4 +1,5 @@
 import type { UnistylesTheme } from '../types'
+
 import { useProxifiedUnistyles } from './useProxifiedUnistyles'
 
 export const useUnistyles = () => {
@@ -6,6 +7,6 @@ export const useUnistyles = () => {
 
     return {
         theme: proxifiedTheme as UnistylesTheme,
-        rt: proxifiedRuntime
+        rt: proxifiedRuntime,
     }
 }

package/src/core/warn.ts

@@ -2,12 +2,12 @@ import type { ViewStyle } from 'react-native'
 
 export const maybeWarnAboutMultipleUnistyles = (style: ViewStyle, displayName = 'Unknown') => {
     if (__DEV__ && style && !Array.isArray(style)) {
-        const unistylesKeys = Object
-            .keys(style)
-            .filter(key => key.startsWith('unistyles_'))
+        const unistylesKeys = Object.keys(style).filter((key) => key.startsWith('unistyles_'))
 
         if (unistylesKeys.length > 1) {
-            console.warn(`Unistyles: we detected style object with ${unistylesKeys.length} unistyles styles. This might cause no updates or unpredictable behavior. Please check style prop for "${displayName}" and use array syntax instead of object syntax.`)
+            console.warn(
+                `Unistyles: we detected style object with ${unistylesKeys.length} unistyles styles. This might cause no updates or unpredictable behavior. Please check style prop for "${displayName}" and use array syntax instead of object syntax.`,
+            )
         }
     }
 }

package/src/core/withUnistyles/types.ts

@@ -1,7 +1,10 @@
-import type { UnistylesMiniRuntime } from '../../specs';
-import type { UnistylesTheme } from '../../types';
+import type { UnistylesMiniRuntime } from '../../specs'
+import type { UnistylesTheme } from '../../types'
 
 export const SUPPORTED_STYLE_PROPS = ['style', 'contentContainerStyle'] as const
 
-export type SupportedStyleProps = typeof SUPPORTED_STYLE_PROPS[number]
-export type Mappings<T = {}> = (theme: UnistylesTheme, rt: UnistylesMiniRuntime) => Omit<Partial<T>, SupportedStyleProps> & { key?: string }
+export type SupportedStyleProps = (typeof SUPPORTED_STYLE_PROPS)[number]
+export type Mappings<T = {}> = (
+    theme: UnistylesTheme,
+    rt: UnistylesMiniRuntime,
+) => Omit<Partial<T>, SupportedStyleProps> & { key?: string }

package/src/core/withUnistyles/withUnistyles.native.tsx

@@ -1,10 +1,12 @@
 import React, { forwardRef, useEffect, useRef, type ComponentProps, type ComponentRef, type ComponentType } from 'react'
-import { type UnistyleDependency, UnistylesShadowRegistry } from '../../specs'
+
 import type { UnistylesTheme, UnistylesValues } from '../../types'
+import type { Mappings } from './types'
+
+import { type UnistyleDependency, UnistylesShadowRegistry } from '../../specs'
 import { deepMergeObjects } from '../../utils'
 import { useProxifiedUnistyles } from '../useProxifiedUnistyles'
 import { maybeWarnAboutMultipleUnistyles } from '../warn'
-import type { Mappings } from './types'
 
 // @ts-expect-error
 type GenericComponentProps<P> = ComponentProps<P>
@@ -12,51 +14,50 @@ type GenericComponentProps<P> = ComponentProps<P>
 type GenericComponentRef<T> = ComponentRef<T>
 
 type UnistylesSecrets = {
-    uni__getStyles: () => Record<string, any>,
+    uni__getStyles: () => Record<string, any>
     uni__dependencies: Array<UnistyleDependency>
 }
 
 type MappedSecrets = {
-    styles: Record<string, any>,
+    styles: Record<string, any>
     dependencies: Array<UnistyleDependency>
 }
 
-export const withUnistyles = <TComponent, TMappings extends GenericComponentProps<TComponent>>(Component: TComponent, mappings?: Mappings<TMappings>) => {
+export const withUnistyles = <TComponent, TMappings extends GenericComponentProps<TComponent>>(
+    Component: TComponent,
+    mappings?: Mappings<TMappings>,
+) => {
     type TProps = GenericComponentProps<TComponent>
     type PropsWithUnistyles = Partial<TProps> & {
         uniProps?: Mappings<TProps>
     }
     type UnistyleStyles = {
-        style?: UnistylesValues,
+        style?: UnistylesValues
         contentContainerStyle?: UnistylesValues
     }
 
     const getSecrets = (styleProps: Record<string, any> = {}): MappedSecrets => {
-        const styles = Array.isArray(styleProps)
-            ? styleProps.flat()
-            : [styleProps]
-
-        const secrets: Array<UnistylesSecrets> = styles
-            .filter(Boolean)
-            .reduce((acc, style) => {
-                const unistyleKey = Object
-                    .keys(style)
-                    .find(key => key.startsWith('unistyles_'))
-
-                return acc.concat([
-                    unistyleKey
-                        ? style[unistyleKey]
-                        : {
-                            uni__getStyles: () => style,
-                            uni__dependencies: [],
-                        }
-                ])
-            }, [])
+        const styles = Array.isArray(styleProps) ? styleProps.flat() : [styleProps]
+
+        const secrets: Array<UnistylesSecrets> = styles.filter(Boolean).reduce((acc, style) => {
+            const unistyleKey = Object.keys(style).find((key) => key.startsWith('unistyles_'))
+
+            return acc.concat([
+                unistyleKey
+                    ? style[unistyleKey]
+                    : {
+                          uni__getStyles: () => style,
+                          uni__dependencies: [],
+                      },
+            ])
+        }, [])
 
         return {
-            styles: secrets.reduce((acc, secret) => Object
-                .assign(acc, secret.uni__getStyles()), {} as Record<string, any>),
-            dependencies: secrets.flatMap(secret => secret.uni__dependencies),
+            styles: secrets.reduce(
+                (acc, secret) => Object.assign(acc, secret.uni__getStyles()),
+                {} as Record<string, any>,
+            ),
+            dependencies: secrets.flatMap((secret) => secret.uni__dependencies),
         }
     }
 
@@ -65,42 +66,50 @@ export const withUnistyles = <TComponent, TMappings extends GenericComponentProp
         const NativeComponent = Component as ComponentType
 
         // @ts-ignore we don't know the type of the component
+        // prettier-ignore
         maybeWarnAboutMultipleUnistyles(narrowedProps.style, `withUnistyles(${Component.displayName ?? Component.name ?? 'Unknown'})`)
         // @ts-ignore we don't know the type of the component
+        // prettier-ignore
         maybeWarnAboutMultipleUnistyles(narrowedProps.contentContainerStyle, `withUnistyles(${Component.displayName ?? Component.name ?? 'Unknown'})`)
 
         const scopedTheme = useRef(UnistylesShadowRegistry.getScopedTheme() as UnistylesTheme)
         const { proxifiedRuntime, proxifiedTheme, addDependencies } = useProxifiedUnistyles(scopedTheme.current)
 
+        // Always track Theme dependency — accessing any property on proxifiedTheme
+        // triggers the Proxy get trap which adds Theme to the dependency Set
+        void (proxifiedTheme as Record<string, unknown>).__uni
+
         useEffect(() => {
             const styleSecrets = getSecrets(narrowedProps.style)
             const contentContainerStyleSecrets = getSecrets(narrowedProps.contentContainerStyle)
 
-            addDependencies(Array.from(new Set([...styleSecrets.dependencies, ...contentContainerStyleSecrets.dependencies])))
+            addDependencies(
+                Array.from(new Set([...styleSecrets.dependencies, ...contentContainerStyleSecrets.dependencies])),
+            )
         }, [narrowedProps.style, narrowedProps.contentContainerStyle])
 
         const { key: mappingsKey, ...mappingsProps } = mappings ? mappings(proxifiedTheme, proxifiedRuntime) : {}
-        const { key: uniPropsKey, ...unistyleProps } = narrowedProps.uniProps ? narrowedProps.uniProps(proxifiedTheme, proxifiedRuntime) : {}
+        const { key: uniPropsKey, ...unistyleProps } = narrowedProps.uniProps
+            ? narrowedProps.uniProps(proxifiedTheme, proxifiedRuntime)
+            : {}
 
         const styleSecrets = getSecrets(narrowedProps.style)
         const contentContainerStyleSecrets = getSecrets(narrowedProps.contentContainerStyle)
 
         const finalProps = {
             ...deepMergeObjects(mappingsProps, unistyleProps, props),
-            ...narrowedProps.style ? {
-                style: styleSecrets.styles,
-            } : {},
-            ...narrowedProps.contentContainerStyle ? {
-                contentContainerStyle: contentContainerStyleSecrets.styles,
-            } : {},
+            ...(narrowedProps.style
+                ? {
+                      style: styleSecrets.styles,
+                  }
+                : {}),
+            ...(narrowedProps.contentContainerStyle
+                ? {
+                      contentContainerStyle: contentContainerStyleSecrets.styles,
+                  }
+                : {}),
         } as any
 
-        return (
-            <NativeComponent
-                key={uniPropsKey || mappingsKey}
-                {...finalProps}
-                ref={ref}
-            />
-        )
+        return <NativeComponent key={uniPropsKey || mappingsKey} {...finalProps} ref={ref} />
     })
 }

package/src/core/withUnistyles/withUnistyles.tsx

@@ -1,23 +1,28 @@
 import React, { type ComponentType, forwardRef, type ComponentProps, type ComponentRef } from 'react'
+
 import type { UnistylesValues } from '../../types'
+import type { Mappings } from './types'
+
 import { deepMergeObjects } from '../../utils'
 import { getClassName } from '../getClassname'
 import { useProxifiedUnistyles } from '../useProxifiedUnistyles'
 import { maybeWarnAboutMultipleUnistyles } from '../warn'
-import type { Mappings } from './types'
 
 // @ts-expect-error
 type GenericComponentProps<T> = ComponentProps<T>
 // @ts-expect-error
 type GenericComponentRef<T> = ComponentRef<T>
 
-export const withUnistyles = <TComponent, TMappings extends GenericComponentProps<TComponent>>(Component: TComponent, mappings?: Mappings<TMappings>) => {
+export const withUnistyles = <TComponent, TMappings extends GenericComponentProps<TComponent>>(
+    Component: TComponent,
+    mappings?: Mappings<TMappings>,
+) => {
     type TProps = GenericComponentProps<TComponent>
     type PropsWithUnistyles = Partial<TProps> & {
         uniProps?: Mappings<TProps>
     }
     type UnistyleStyles = {
-        style?: UnistylesValues,
+        style?: UnistylesValues
         contentContainerStyle?: UnistylesValues
     }
 
@@ -28,45 +33,46 @@ export const withUnistyles = <TComponent, TMappings extends GenericComponentProp
         const { proxifiedRuntime, proxifiedTheme } = useProxifiedUnistyles()
 
         const { key: mappingsKey, ...mappingsProps } = mappings ? mappings(proxifiedTheme, proxifiedRuntime) : {}
-        const { key: uniPropsKey, ...unistyleProps } = narrowedProps.uniProps ? narrowedProps.uniProps(proxifiedTheme, proxifiedRuntime) : {}
+        const { key: uniPropsKey, ...unistyleProps } = narrowedProps.uniProps
+            ? narrowedProps.uniProps(proxifiedTheme, proxifiedRuntime)
+            : {}
 
         const emptyStyles = narrowedProps.style
             ? Object.fromEntries(
-                Object.entries(Object.getOwnPropertyDescriptors(narrowedProps.style))
-                    .filter(([key]) => !key.startsWith("unistyles") && !key.startsWith("_"))
-                    .map(([key]) => [key, undefined])
-            )
+                  Object.entries(Object.getOwnPropertyDescriptors(narrowedProps.style))
+                      .filter(([key]) => !key.startsWith('unistyles') && !key.startsWith('_'))
+                      .map(([key]) => [key, undefined]),
+              )
             : undefined
 
         const combinedProps = {
             ...deepMergeObjects(mappingsProps, unistyleProps, props),
-            ...narrowedProps.style ? {
-                // Override default component styles with undefined values to reset them
-                style: emptyStyles
-            } : {},
-            ...narrowedProps.contentContainerStyle ? {
-                contentContainerStyle: contentContainerStyleClassNames,
-            } : {},
+            ...(narrowedProps.style
+                ? {
+                      // Override default component styles with undefined values to reset them
+                      style: emptyStyles,
+                  }
+                : {}),
+            ...(narrowedProps.contentContainerStyle
+                ? {
+                      contentContainerStyle: contentContainerStyleClassNames,
+                  }
+                : {}),
         } as any
 
         // @ts-ignore
+        // prettier-ignore
         maybeWarnAboutMultipleUnistyles(narrowedProps.style, `withUnistyles(${Component.displayName ?? Component.name ?? 'Unknown'})`)
         // @ts-ignore
+        // prettier-ignore
         maybeWarnAboutMultipleUnistyles(narrowedProps.contentContainerStyle, `withUnistyles(${Component.displayName ?? Component.name ?? 'Unknown'})`)
 
         const NativeComponent = Component as ComponentType
         const [classNames] = styleClassNames ?? []
 
         return (
-            <div
-                className={classNames?.hash}
-                style={{ display: 'contents' }}
-            >
-                <NativeComponent
-                    key={uniPropsKey || mappingsKey}
-                    {...combinedProps}
-                    ref={ref}
-                />
+            <div className={classNames?.hash} style={{ display: 'contents' }}>
+                <NativeComponent key={uniPropsKey || mappingsKey} {...combinedProps} ref={ref} />
             </div>
         )
     })

package/src/global.ts

@@ -1,6 +1,6 @@
 export interface UnistylesThemes {}
 export interface UnistylesBreakpoints {
     // these breakpoints are only available on mobile, when you didn't specify any breakpoints
-    landscape?: number,
-    portrait?: number,
+    landscape?: number
+    portrait?: number
 }

package/src/hooks/useMedia.native.ts

@@ -1,4 +1,5 @@
 import { useEffect, useLayoutEffect, useState } from 'react'
+
 import { StyleSheet, UnistyleDependency, UnistylesRuntime } from '../specs'
 import { isUnistylesMq, isValidMq, parseMq } from '../utils'
 
@@ -47,7 +48,6 @@ export const useMedia = (config: { mq: symbol }) => {
     }, [config.mq])
 
     useLayoutEffect(() => {
-        // @ts-expect-error - this is hidden from TS
         const removeChangeListener = StyleSheet.addChangeListener((dependencies: Array<UnistyleDependency>) => {
             if (dependencies.includes(UnistyleDependency.Breakpoints)) {
                 setIsVisible(computeIsVisible())
@@ -60,6 +60,6 @@ export const useMedia = (config: { mq: symbol }) => {
     }, [config.mq])
 
     return {
-        isVisible
+        isVisible,
     }
 }

package/src/hooks/useMedia.ts

@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from 'react'
+
 import { isUnistylesMq, isValidMq, parseMq } from '../utils'
 
 export const useMedia = (config: { mq: symbol }) => {
@@ -26,8 +27,10 @@ export const useMedia = (config: { mq: symbol }) => {
             minWidth !== undefined ? `(min-width: ${minWidth}px)` : undefined,
             maxWidth !== undefined ? `(max-width: ${maxWidth}px)` : undefined,
             minHeight !== undefined ? `(min-height: ${minHeight}px)` : undefined,
-            maxHeight !== undefined ? `(max-height: ${maxHeight}px)` : undefined
-        ].filter(Boolean).join(' and ')
+            maxHeight !== undefined ? `(max-height: ${maxHeight}px)` : undefined,
+        ]
+            .filter(Boolean)
+            .join(' and ')
 
         const media = window.matchMedia(mediaQuery)
         const handler = (event: MediaQueryListEvent) => setIsVisible(event.matches)
@@ -42,6 +45,6 @@ export const useMedia = (config: { mq: symbol }) => {
     useEffect(() => () => disposeRef.current(), [])
 
     return {
-        isVisible
+        isVisible,
     }
 }

package/src/index.ts

@@ -7,6 +7,7 @@ if (majorReactVersions === undefined || majorReactVersions < 19) {
 }
 
 export { StyleSheet, UnistylesRuntime, StatusBar, NavigationBar } from './specs'
+export { UnistyleDependency } from './specs'
 export { mq } from './mq'
 export type { UnistylesThemes, UnistylesBreakpoints } from './global'
 export { withUnistyles, useUnistyles, createUnistylesElement } from './core'