react-native-unistyles 3.0.0-beta.6 → 3.0.0-beta.8

package/src/components/native/Animated.tsx

@@ -1,10 +1,10 @@
 import { Animated as RNAnimated } from 'react-native'
-import { View } from './View'
-import { Text } from './Text'
 import { FlatList } from './FlatList'
 import { Image } from './Image'
 import { ScrollView } from './ScrollView'
 import { SectionList } from './SectionList'
+import { Text } from './Text'
+import { View } from './View'
 
 export const Animated = {
     ...RNAnimated,

package/src/components/native/ImageBackground.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
-import { ImageBackground as NativeImageBackground } from 'react-native'
 import { forwardRef } from 'react'
-import type { UnistylesValues } from '../../types'
+import { type ImageStyle, ImageBackground as NativeImageBackground, type StyleProp, type ViewStyle } from 'react-native'
 import { getClassName } from '../../core'
-import { isServer } from '../../web/utils'
-import { UnistylesShadowRegistry } from '../../web'
+import type { UnistylesValues } from '../../types'
 import { copyComponentProperties } from '../../utils'
+import { UnistylesShadowRegistry } from '../../web'
+import { isServer } from '../../web/utils'
 
 type Props = {
     style?: UnistylesValues
@@ -19,11 +19,10 @@ const UnistylesImageBackground = forwardRef<unknown, Props>((props, forwardedRef
     const imageClassNames = getClassName(props.imageStyle)
 
     return (
-        // @ts-expect-error - RN types are not compatible with RNW styles
         <NativeImageBackground
             {...props}
-            style={styleClassNames}
-            imageStyle={imageClassNames}
+            style={styleClassNames as StyleProp<ViewStyle>}
+            imageStyle={imageClassNames as StyleProp<ImageStyle>}
             ref={isServer() ? undefined : ref => {
                 if (!ref) {
                     // @ts-expect-error hidden from TS

package/src/components/native/NativeText.native.tsx

@@ -1,5 +1,5 @@
-import type { TextProps } from 'react-native'
 import { type ComponentType, createElement, forwardRef } from 'react'
+import type { TextProps } from 'react-native'
 import { createUnistylesElement } from '../../core'
 
 // credits to @hirbod

package/src/components/native/NativeView.native.tsx

@@ -1,5 +1,5 @@
-import type { ViewProps } from 'react-native'
 import { type ComponentType, createElement, forwardRef } from 'react'
+import type { ViewProps } from 'react-native'
 import { createUnistylesElement } from '../../core'
 
 // credits to @hirbod

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

@@ -1,8 +1,8 @@
 import React, { forwardRef, useLayoutEffect, useRef } from 'react'
 import { Pressable as NativePressableReactNative } from 'react-native'
 import type { PressableProps as Props, View } from 'react-native'
-import { UnistylesShadowRegistry } from '../../specs'
 import { passForwardedRef } from '../../core'
+import { UnistylesShadowRegistry } from '../../specs'
 
 type PressableProps = Props & {
     variants?: Record<string, string | boolean>
@@ -11,7 +11,7 @@ type PressableProps = Props & {
 const getStyles = (styleProps: Record<string, any> = {}) => {
     const unistyleKey = Object
         .keys(styleProps)
-        .find(key => key.startsWith('unistyles-'))
+        .find(key => key.startsWith('unistyles_'))
 
     if (!unistyleKey) {
         return styleProps
@@ -20,12 +20,13 @@ const getStyles = (styleProps: Record<string, any> = {}) => {
     return {
         // styles without C++ state
         ...styleProps[unistyleKey].uni__getStyles(),
-        [unistyleKey]: styleProps[unistyleKey].uni__getStyles()
+        [unistyleKey]: styleProps[unistyleKey]
     }
 }
 
 export const Pressable = forwardRef<View, PressableProps>(({ variants, style, ...props }, forwardedRef) => {
-    const storedRef = useRef<View | null>()
+    const storedRef = useRef<View | null>(null)
+    const scopedTheme = UnistylesShadowRegistry.getScopedTheme()
 
     useLayoutEffect(() => {
         return () => {
@@ -40,22 +41,28 @@ export const Pressable = forwardRef<View, PressableProps>(({ variants, style, ..
         <NativePressableReactNative
             {...props}
             ref={ref => {
-                const unistyles = typeof style === 'function'
-                    ? style({ pressed: false })
-                    : style
-
-                // @ts-expect-error - this is hidden from TS
-                UnistylesShadowRegistry.add(ref, unistyles)
+                const isPropStyleAFunction = typeof style === 'function'
+                const unistyles = isPropStyleAFunction
+                    ? style.call(style, { pressed: false })
+                    : getStyles(style as unknown as Record<string, any>)
 
                 if (ref) {
                     storedRef.current = ref
                 }
 
+                // @ts-expect-error - this is hidden from TS
+                UnistylesShadowRegistry.add(storedRef.current, unistyles)
+
                 return passForwardedRef(props, ref, forwardedRef)
             }}
             style={state => {
-                const unistyles = typeof style === 'function'
-                    ? style(state)
+                const isPropStyleAFunction = typeof style === 'function'
+                const previousScopedTheme = UnistylesShadowRegistry.getScopedTheme()
+
+                UnistylesShadowRegistry.setScopedTheme(scopedTheme)
+
+                const unistyles = isPropStyleAFunction
+                    ? style.call(style, state)
                     : getStyles(style as unknown as Record<string, any>)
 
                 if (!storedRef.current) {
@@ -64,9 +71,12 @@ export const Pressable = forwardRef<View, PressableProps>(({ variants, style, ..
 
                 // @ts-expect-error - this is hidden from TS
                 UnistylesShadowRegistry.remove(storedRef.current)
+
                 // @ts-expect-error - this is hidden from TS
                 UnistylesShadowRegistry.add(storedRef.current, unistyles)
 
+                UnistylesShadowRegistry.setScopedTheme(previousScopedTheme)
+
                 return unistyles
             }}
         />

package/src/components/native/Pressable.tsx

@@ -1,9 +1,9 @@
 import React, { forwardRef } from 'react'
 import { Pressable as NativePressableReactNative } from 'react-native'
 import type { PressableProps as Props, View } from 'react-native'
+import { getClassName } from '../../core'
 import { UnistylesShadowRegistry } from '../../specs'
 import type { UnistylesValues } from '../../types'
-import { getClassName } from '../../core'
 import { isServer } from '../../web/utils'
 
 type Variants = Record<string, string | boolean | undefined>

package/src/core/createUnistylesElement.native.tsx

@@ -1,8 +1,8 @@
 import React, { useLayoutEffect, useRef } from 'react'
 import { UnistylesShadowRegistry } from '../specs'
+import { copyComponentProperties } from '../utils'
 import { passForwardedRef } from './passForwardRef'
 import { maybeWarnAboutMultipleUnistyles } from './warn'
-import { copyComponentProperties } from '../utils'
 
 const getNativeRef = (Component: any, ref: any) => {
     switch (Component.name) {
@@ -42,6 +42,11 @@ export const createUnistylesElement = (Component: any) => {
 
                     // @ts-ignore we don't know the type of the component
                     maybeWarnAboutMultipleUnistyles(props.style, Component.displayName)
+
+                    return () => {
+                        // @ts-ignore
+                        UnistylesShadowRegistry.remove(ref)
+                    }
                 }}
             />
         )

package/src/core/createUnistylesElement.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import type { UnistylesValues } from '../types'
-import { getClassName } from './getClassname'
-import { isServer } from '../web/utils'
+import { copyComponentProperties } from '../utils'
 import { UnistylesShadowRegistry } from '../web'
+import { isServer } from '../web/utils'
+import { getClassName } from './getClassname'
 import { maybeWarnAboutMultipleUnistyles } from './warn'
-import { copyComponentProperties } from '../utils'
 
 type ComponentProps = {
     style?: UnistylesValues | Array<UnistylesValues>

package/src/core/createUnistylesImageBackground.tsx

@@ -1,9 +1,9 @@
 import React, { useLayoutEffect, useRef } from 'react'
 import type { Image, ImageBackground, ImageBackgroundProps } from 'react-native'
 import { UnistylesShadowRegistry } from '../specs'
+import { copyComponentProperties } from '../utils'
 import { passForwardedRef } from './passForwardRef'
 import { maybeWarnAboutMultipleUnistyles } from './warn'
-import { copyComponentProperties } from '../utils'
 
 export const createUnistylesImageBackground = (Component: typeof ImageBackground) => {
     const UnistylesImageBackground = React.forwardRef<ImageBackground, ImageBackgroundProps>((props, forwardedRef) => {
@@ -32,6 +32,11 @@ export const createUnistylesImageBackground = (Component: typeof ImageBackground
                     return () => {
                         // @ts-ignore
                         UnistylesShadowRegistry.remove(ref)
+
+                        if (storedImageRef.current) {
+                            // @ts-ignore
+                            UnistylesShadowRegistry.remove(storedImageRef.current)
+                        }
                     }
                 }}
                 imageRef={ref => {

package/src/core/useProxifiedUnistyles/useProxifiedUnistyles.ts

@@ -1,5 +1,5 @@
 import { useEffect, useReducer, useRef, useState } from 'react'
-import { UnistylesRuntime, UnistylesShadowRegistry, type UnistylesMiniRuntime } from '../../specs'
+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'
@@ -26,12 +26,12 @@ const RTDependencyMap = {
     themeName: UnistyleDependency.ThemeName,
 } satisfies Partial<Record<keyof UnistylesMiniRuntime, UnistyleDependency>>
 
-export const useProxifiedUnistyles = () => {
-    const scopedTheme = UnistylesShadowRegistry.getScopedTheme() as UnistylesTheme
+export const useProxifiedUnistyles = (forcedTheme?: UnistylesTheme) => {
+    const scopedTheme = forcedTheme ?? UnistylesShadowRegistry.getScopedTheme() as UnistylesTheme
     const [dependencies] = useState(() => new Set<number>())
     const [theme, setTheme] = useState(UnistylesRuntime.getTheme(scopedTheme))
     const [_, runtimeChanged] = useReducer(() => ({}), {})
-    const disposeRef = useRef<VoidFunction>()
+    const disposeRef = useRef<VoidFunction>(undefined)
 
     const reinitListener = () => {
         disposeRef.current?.()

package/src/core/warn.ts

@@ -4,7 +4,7 @@ export const maybeWarnAboutMultipleUnistyles = (style: ViewStyle, displayName =
     if (__DEV__ && style && !Array.isArray(style)) {
         const unistylesKeys = Object
             .keys(style)
-            .filter(key => key.startsWith('unistyles-'))
+            .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.`)

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

@@ -1,32 +1,59 @@
-import React, { forwardRef, useEffect, type ComponentType } from 'react'
-import type { UnistyleDependency } from '../../specs'
+import React, { forwardRef, useEffect, type ComponentType, useRef } from 'react'
+import { type UnistyleDependency, UnistylesShadowRegistry } from '../../specs'
+import type { UnistylesTheme } from '../../types'
 import type { PartialBy } from '../../types/common'
 import { deepMergeObjects } from '../../utils'
-import type { Mappings, SupportedStyleProps } from './types'
-import { maybeWarnAboutMultipleUnistyles } from '../warn'
 import { useProxifiedUnistyles } from '../useProxifiedUnistyles'
+import { maybeWarnAboutMultipleUnistyles } from '../warn'
+import type { Mappings, SupportedStyleProps } from './types'
 
 // @ts-expect-error
 type GenericComponentProps<P> = ComponentProps<P>
 // @ts-expect-error
 type GenericComponentRef<T> = ComponentRef<T>
 
+type UnistylesSecrets = {
+    uni__getStyles: () => Record<string, any>,
+    uni__dependencies: Array<UnistyleDependency>
+}
+
+type MappedSecrets = {
+    styles: Record<string, any>,
+    dependencies: Array<UnistyleDependency>
+}
+
 export const withUnistyles = <TComponent, TMappings extends GenericComponentProps<TComponent>>(Component: TComponent, mappings?: Mappings<TMappings>) => {
     type TProps = GenericComponentProps<TComponent>
     type PropsWithUnistyles = PartialBy<TProps, keyof TMappings | SupportedStyleProps> & {
         uniProps?: Mappings<TProps>
     }
-    const getSecrets = (styleProps: Record<string, any> = {}): { uni__getStyles(): any, uni__dependencies: Array<UnistyleDependency> } => {
-        const unistyleKey = Object
-            .keys(styleProps)
-            .find(key => key.startsWith('unistyles-'))
-
-        return unistyleKey
-            ? styleProps[unistyleKey]
-            : {
-                uni__getStyles: () => styleProps,
-                uni__dependencies: [],
-            }
+    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: () => styleProps,
+                            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),
+        }
     }
 
     return forwardRef<GenericComponentRef<TComponent>, PropsWithUnistyles>((props, ref) => {
@@ -38,13 +65,14 @@ export const withUnistyles = <TComponent, TMappings extends GenericComponentProp
         // @ts-ignore we don't know the type of the component
         maybeWarnAboutMultipleUnistyles(narrowedProps.contentContainerStyle, `withUnistyles(${Component.displayName ?? Component.name ?? 'Unknown'})`)
 
-        const { proxifiedRuntime, proxifiedTheme, addDependencies } = useProxifiedUnistyles()
+        const scopedTheme = useRef(UnistylesShadowRegistry.getScopedTheme() as UnistylesTheme)
+        const { proxifiedRuntime, proxifiedTheme, addDependencies } = useProxifiedUnistyles(scopedTheme.current)
 
         useEffect(() => {
             const styleSecrets = getSecrets(narrowedProps.style)
             const contentContainerStyleSecrets = getSecrets(narrowedProps.contentContainerStyle)
 
-            addDependencies(Array.from(new Set([...styleSecrets.uni__dependencies, ...contentContainerStyleSecrets.uni__dependencies])))
+            addDependencies(Array.from(new Set([...styleSecrets.dependencies, ...contentContainerStyleSecrets.dependencies])))
         }, [narrowedProps.style, narrowedProps.contentContainerStyle])
 
         const mappingsProps = mappings ? mappings(proxifiedTheme, proxifiedRuntime) : {}
@@ -56,10 +84,10 @@ export const withUnistyles = <TComponent, TMappings extends GenericComponentProp
         const finalProps = {
             ...deepMergeObjects(mappingsProps, unistyleProps, props),
             ...narrowedProps.style ? {
-                style: styleSecrets.uni__getStyles(),
+                style: styleSecrets.styles,
             } : {},
             ...narrowedProps.contentContainerStyle ? {
-                contentContainerStyle: contentContainerStyleSecrets.uni__getStyles(),
+                contentContainerStyle: contentContainerStyleSecrets.styles,
             } : {},
         } as any
 

package/src/core/withUnistyles/withUnistyles.tsx

@@ -1,11 +1,11 @@
 import React, { type ComponentType, forwardRef, type ComponentProps, type ComponentRef } from 'react'
+import type { UnistylesValues } from '../../types'
 import type { PartialBy } from '../../types/common'
 import { deepMergeObjects } from '../../utils'
-import type { Mappings, SupportedStyleProps } from './types'
-import type { UnistylesValues } from '../../types'
 import { getClassName } from '../getClassname'
-import { maybeWarnAboutMultipleUnistyles } from '../warn'
 import { useProxifiedUnistyles } from '../useProxifiedUnistyles'
+import { maybeWarnAboutMultipleUnistyles } from '../warn'
+import type { Mappings, SupportedStyleProps } from './types'
 
 // @ts-expect-error
 type GenericComponentProps<T> = ComponentProps<T>
@@ -37,7 +37,7 @@ export const withUnistyles = <TComponent, TMappings extends GenericComponentProp
                 style: styleClassNames,
             } : {},
             ...narrowedProps.contentContainerStyle ? {
-                style: contentContainerStyleClassNames,
+                contentContainerStyle: contentContainerStyleClassNames,
             } : {},
         } as any
 

package/src/hooks/useMedia.native.ts

@@ -1,6 +1,6 @@
 import { useEffect, useLayoutEffect, useState } from 'react'
+import { isUnistylesMq, isValidMq, parseMq } from '../mq'
 import { StyleSheet, UnistyleDependency, UnistylesRuntime } from '../specs'
-import { isValidMq, parseMq, isUnistylesMq } from '../mq'
 
 export const useMedia = (config: { mq: symbol }) => {
     const computeIsVisible = (): boolean => {

package/src/mq.ts

@@ -1,6 +1,6 @@
-import type { Nullable } from './types'
 import type { UnistylesBreakpoints } from './global'
 import { UnistylesRuntime } from './specs'
+import type { Nullable } from './types'
 
 const IS_UNISTYLES_REGEX = /:([hw])\[(\d+)(?:,\s*(\d+|Infinity))?]/
 const UNISTYLES_WIDTH_REGEX = /:(w)\[(\d+)(?:,\s*(\d+|Infinity))?]/

package/src/server/getServerUnistyles.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { StyleSheet } from 'react-native'
-import { error, isServer } from '../web/utils'
 import { UnistylesWeb } from '../web'
+import { error, isServer } from '../web/utils'
 import { DefaultServerUnistylesSettings, type ServerUnistylesSettings } from './types'
 
 export const getServerUnistyles = ({ includeRNWStyles = true }: ServerUnistylesSettings = DefaultServerUnistylesSettings) => {

package/src/server/hydrateServerUnistyles.ts

@@ -1,5 +1,5 @@
-import { error, isServer } from '../web/utils'
 import { UnistylesWeb } from '../web'
+import { error, isServer } from '../web/utils'
 
 declare global {
     interface Window {

package/src/server/resetServerUnistyles.ts

@@ -1,5 +1,5 @@
-import { error, isServer } from '../web/utils'
 import { UnistylesWeb } from '../web'
+import { error, isServer } from '../web/utils'
 
 export const resetServerUnistyles = () => {
     if (!isServer()) {

package/src/server/useServerUnistyles.tsx

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

package/src/specs/ShadowRegistry/index.ts

@@ -45,6 +45,7 @@ HybridShadowRegistry.add = (handle, styles) => {
         .filter(style => !style?.initial?.updater)
         .filter(style => style && Object.keys(style).length > 0)
         .flat()
+        .filter(Boolean)
 
     if (filteredStyles.length > 0) {
         HybridShadowRegistry.link(findShadowNodeForHandle(handle), filteredStyles)

package/src/specs/StatusBar/index.ts

@@ -1,6 +1,6 @@
 import { StatusBar as NativeStatusBar } from 'react-native'
-import type { UnistylesStatusBar as UnistylesStatusBarSpec } from './UnistylesStatusBar.nitro'
 import { StatusBarStyle } from '../types'
+import type { UnistylesStatusBar as UnistylesStatusBarSpec } from './UnistylesStatusBar.nitro'
 
 export type StatusBarHiddenAnimation = 'none' | 'fade' | 'slide'
 

package/src/specs/StyleSheet/index.ts

@@ -1,9 +1,9 @@
-import { NitroModules } from 'react-native-nitro-modules'
-import { processColor, StyleSheet as NativeStyleSheet } from 'react-native'
+import { StyleSheet as NativeStyleSheet, processColor } from 'react-native'
 import type { StyleSheet as NativeStyleSheetType } from 'react-native'
-import type { UnistylesStyleSheet as UnistylesStyleSheetSpec } from './UnistylesStyleSheet.nitro'
+import { NitroModules } from 'react-native-nitro-modules'
 import type { UnistylesBreakpoints, UnistylesThemes } from '../../global'
 import type { CreateUnistylesStyleSheet } from '../../types'
+import type { UnistylesStyleSheet as UnistylesStyleSheetSpec } from './UnistylesStyleSheet.nitro'
 
 type UnistylesThemeSettings = {
     initialTheme: (() => keyof UnistylesThemes) | keyof UnistylesThemes

package/src/specs/UnistylesRuntime/UnistylesRuntime.nitro.ts

@@ -1,7 +1,7 @@
 import type { HybridObject } from 'react-native-nitro-modules'
-import type { AppBreakpoint, AppThemeName, Dimensions, Insets } from '../types'
 import type { AndroidContentSizeCategory, IOSContentSizeCategory, WebContentSizeCategory } from '../../types'
 import type { UnistylesNativeMiniRuntime } from '../NativePlatform'
+import type { AppBreakpoint, AppThemeName, Dimensions, Insets } from '../types'
 
 type ColorScheme = 'light' | 'dark' | 'unspecified'
 type Orientation = 'portrait' | 'landscape'

package/src/specs/UnistylesRuntime/index.ts

@@ -1,12 +1,12 @@
 import { processColor } from 'react-native'
 import { NitroModules } from 'react-native-nitro-modules'
-import type { UnistylesRuntime as UnistylesRuntimeSpec, UnistylesMiniRuntime } from './UnistylesRuntime.nitro'
-import type { AppBreakpoint, AppTheme, AppThemeName, Color, ColorScheme, Orientation } from '../types'
-import { attachStatusBarJSMethods, type UnistylesStatusBar } from '../StatusBar'
-import type { UnistylesNavigationBar } from '../NavigtionBar'
-import type { AndroidContentSizeCategory, IOSContentSizeCategory, UnistylesTheme } from '../../types'
 import { isIOS } from '../../common'
 import type { UnistylesThemes } from '../../global'
+import type { AndroidContentSizeCategory, IOSContentSizeCategory, UnistylesTheme } from '../../types'
+import type { UnistylesNavigationBar } from '../NavigtionBar'
+import { type UnistylesStatusBar, attachStatusBarJSMethods } from '../StatusBar'
+import type { AppBreakpoint, AppTheme, AppThemeName, Color, ColorScheme, Orientation } from '../types'
+import type { UnistylesMiniRuntime, UnistylesRuntime as UnistylesRuntimeSpec } from './UnistylesRuntime.nitro'
 
 export interface UnistylesRuntimePrivate extends Omit<UnistylesRuntimeSpec, 'setRootViewBackgroundColor'> {
     readonly colorScheme: ColorScheme,

package/src/specs/index.native.ts

@@ -1,12 +1,12 @@
 import './TurboUnistyles'
 
-import { Runtime } from './UnistylesRuntime'
+import { UnistyleDependency } from './NativePlatform'
+import { UnistylesShadowRegistry } from './ShadowRegistry'
 import { StyleSheet } from './StyleSheet'
 import type { UnistylesStyleSheet } from './StyleSheet'
-import { UnistylesShadowRegistry } from './ShadowRegistry'
+import { Runtime } from './UnistylesRuntime'
 import type { UnistylesMiniRuntime } from './UnistylesRuntime'
-import { StatusBarStyle, ColorScheme, Orientation } from './types'
-import { UnistyleDependency } from './NativePlatform'
+import { ColorScheme, Orientation, StatusBarStyle } from './types'
 
 export {
     StatusBarStyle,

package/src/types/breakpoints.ts

@@ -1,7 +1,7 @@
 import type { ColorValue, OpaqueColorValue } from 'react-native'
-import type { BreakpointsOrMediaQueries, ToDeepUnistyles } from './stylesheet'
-import type { TransformStyles } from './core'
 import type { SafeReturnType } from './common'
+import type { TransformStyles } from './core'
+import type { BreakpointsOrMediaQueries, ToDeepUnistyles } from './stylesheet'
 
 type ExtractTransformArray<T> = T extends object
     ? { [K in keyof T]: ExtractBreakpoints<T[K]> }

package/src/types/core.ts

@@ -1,3 +1,4 @@
+import type { ImageStyle, TextStyle, ViewStyle } from 'react-native'
 import type {
     MatrixTransform,
     PerspectiveTransform,
@@ -13,7 +14,6 @@ import type {
     TranslateXTransform,
     TranslateYTransform
 } from 'react-native/Libraries/StyleSheet/StyleSheetTypes'
-import type { ImageStyle, TextStyle, ViewStyle } from 'react-native'
 import type { UnistylesBreakpoints, UnistylesThemes } from '../global'
 
 export type ShadowOffset = {

package/src/types/stylesheet.ts

@@ -1,11 +1,11 @@
-import type { BoxShadowValue, ImageStyle, TextStyle, ViewStyle, FilterFunction } from 'react-native'
-import type { ShadowOffset, TransformStyles, UnistylesTheme } from './core'
+import type { CSSProperties } from 'react'
+import type { BoxShadowValue, FilterFunction, ImageStyle, TextStyle, ViewStyle } from 'react-native'
 import type { UnistylesBreakpoints } from '../global'
 import type { UnistylesMiniRuntime } from '../specs'
+import type { Pseudo } from '../web/convert/pseudo'
 import type { ReactNativeStyleSheet } from './breakpoints'
+import type { ShadowOffset, TransformStyles, UnistylesTheme } from './core'
 import type { ExtractVariantNames } from './variants'
-import type { CSSProperties } from 'react'
-import type { Pseudo } from '../web/convert/pseudo'
 
 // these props are treated differently to nest breakpoints and media queries
 type NestedKeys = 'shadowOffset' | 'transform' | 'textShadowOffset' | 'boxShadow' | 'filter'
@@ -62,7 +62,7 @@ export type UnistylesValues = FlatUnistylesValues & {
 } & VariantsAndCompoundVariants & {
     [propName in NestedKeys]?: UnistyleNestedStyles[propName]
 } & {
-    _web?: CSSProperties & CustomClassName & {
+    _web?: ToDeepUnistyles<CSSProperties> & CustomClassName & {
         [propName in Pseudo]?: ToDeepUnistyles<CSSProperties>
     }
 }

package/src/web/convert/index.ts

@@ -1,10 +1,10 @@
 import type { UnistylesValues } from '../../types'
+import { deepMergeObjects } from '../../utils'
+import { getBoxShadow, getFilterStyle, getTransformStyle } from './object'
 import { isPseudo } from './pseudo'
+import { getBoxShadowStyle, getTextShadowStyle } from './shadow'
 import { getStyle } from './style'
-import { deepMergeObjects } from '../../utils'
-import { getTransformStyle, getBoxShadow, getFilterStyle } from './object'
-import { isShadow, isFilter, isTextShadow, isTransform, isBoxShadow } from './utils'
-import { getTextShadowStyle, getBoxShadowStyle } from './shadow'
+import { isBoxShadow, isFilter, isShadow, isTextShadow, isTransform } from './utils'
 
 export const convertUnistyles = (value: UnistylesValues) => {
     // Flag to mark if textShadow is already created
@@ -17,7 +17,7 @@ export const convertUnistyles = (value: UnistylesValues) => {
         ...value._web
     }).flatMap(([unistylesKey, unistylesValue]) => {
         // Keys to omit
-        if (['_classNames', '_web', 'variants', 'compoundVariants', 'uni__dependencies', '__unistyles-secrets__'].includes(unistylesKey) || unistylesKey.startsWith('variant-')) {
+        if (['_classNames', '_web', 'variants', 'compoundVariants', 'uni__dependencies'].includes(unistylesKey) || unistylesKey.startsWith('unistyles_')) {
             return []
         }
 

package/src/web/convert/object/boxShadow.ts

@@ -1,7 +1,7 @@
 import type { BoxShadowValue } from 'react-native'
-import { normalizeNumericValue } from '../utils'
-import { keyInObject } from '../../utils'
 import { deepMergeObjects } from '../../../utils'
+import { keyInObject } from '../../utils'
+import { normalizeNumericValue } from '../utils'
 
 const createBoxShadowValue = (style: BoxShadowValue) => {
     const { offsetX, offsetY, blurRadius = 0, spreadDistance = 0, color = '#000', inset } = style

package/src/web/convert/object/filter.ts

@@ -1,10 +1,10 @@
 import type { DropShadowValue } from 'react-native'
+import { isUnistylesMq } from '../../../mq'
+import { UnistylesWeb } from '../../index'
 import { hyphenate } from '../../utils'
 import type { Filters } from '../types'
-import { getObjectStyle } from './objectStyle'
 import { normalizeColor, normalizeNumericValue } from '../utils'
-import { isUnistylesMq } from '../../../mq'
-import { UnistylesWeb } from '../../index'
+import { getObjectStyle } from './objectStyle'
 
 const getDropShadowStyle = (dropShadow: DropShadowValue) => {
     const { offsetX = 0, offsetY = 0, standardDeviation = 0, color = '#000' } = dropShadow

package/src/web/convert/object/transform.ts

@@ -1,6 +1,6 @@
-import { getObjectStyle } from './objectStyle'
-import { normalizeNumericValue } from '../utils'
 import type { TransformStyles } from '../../../types/core'
+import { normalizeNumericValue } from '../utils'
+import { getObjectStyle } from './objectStyle'
 
 const normalizeTransform = (key: string, value: any) => {
     if (key.includes('scale')) {