react-native-unistyles 3.0.0-alpha.4 → 3.0.0-alpha.41

package/src/core/index.ts

@@ -0,0 +1 @@
+export { createUnistylesComponent } from './createUnistylesComponent'

package/src/index.ts

@@ -1,15 +1,6 @@
-import React from 'react'
-
 export * from './specs'
 export { mq } from './mq'
 export type { UnistylesThemes, UnistylesBreakpoints } from './global'
-
-// todo verify true min version
-const minReactVersionRequiredByUnistyles = '18.3.1'
-
-if (React.version < minReactVersionRequiredByUnistyles) {
-    throw new Error(`
-        You are using an outdated version of React (${React.version}).
-        Unistyles requires at least React ${minReactVersionRequiredByUnistyles}.
-    `)
-}
+export { createUnistylesComponent } from './core'
+export type { UnistylesVariants } from './types'
+export * from './components'

package/src/mq.ts

@@ -1,5 +1,10 @@
 import type { Nullable } from './types'
 import type { UnistylesBreakpoints } from './global'
+import { UnistylesRuntime } from './specs'
+
+const IS_UNISTYLES_REGEX = /:([hw])\[(\d+)(?:,\s*(\d+|Infinity))?]/
+const UNISTYLES_WIDTH_REGEX = /:(w)\[(\d+)(?:,\s*(\d+|Infinity))?]/
+const UNISTYLES_HEIGHT_REGEX = /:(h)\[(\d+)(?:,\s*(\d+|Infinity))?]/
 
 type MQValue = keyof UnistylesBreakpoints | number
 
@@ -29,16 +34,8 @@ const getMQValue = (value: Nullable<MQValue>) => {
         return 0
     }
 
-    // todo take it from js
-    const breakpoints = {
-        xs: 0,
-        sm: 300,
-        md: 500,
-        lg: 800,
-        xl: 1200
-    }
+    const breakpoints = UnistylesRuntime.breakpoints
 
-    // @ts-ignore
     return breakpoints[value] ?? 0
 }
 
@@ -64,3 +61,24 @@ export const mq: MQHandler = {
         }
     })
 }
+
+export const parseMq = (mq: string) => {
+    const [, width, fromW, toW] = UNISTYLES_WIDTH_REGEX.exec(mq) || []
+    const [, height, fromH, toH] = UNISTYLES_HEIGHT_REGEX.exec(mq) || []
+
+    return {
+        minWidth: !width || fromW === 'Infinity' ? undefined : Number(fromW),
+        maxWidth: !width || toW === 'Infinity' ? undefined : Number(toW),
+        minHeight: !height || fromH === 'Infinity' ? undefined : Number(fromH),
+        maxHeight: !height || toH === 'Infinity' ? undefined : Number(toH),
+    }
+}
+
+export const isUnistylesMq = (mq: string) => IS_UNISTYLES_REGEX.test(mq)
+
+export const isValidMq = (parsedMQ: ReturnType<typeof parseMq>) => {
+    const isWidthValid = parsedMQ.minWidth === undefined || parsedMQ.maxWidth === undefined || parsedMQ.minWidth <= parsedMQ.maxWidth
+    const isHeightValid = parsedMQ.minHeight === undefined || parsedMQ.maxHeight === undefined || parsedMQ.minHeight <= parsedMQ.maxHeight
+
+    return isWidthValid && isHeightValid
+}

package/src/specs/NativePlatform/NativePlatform.nitro.ts

@@ -18,7 +18,8 @@ export enum UnistyleDependency {
     PixelRatio = 10,
     FontScale = 11,
     StatusBar = 12,
-    NavigationBar = 13
+    NavigationBar = 13,
+    Ime = 14
 }
 
 export interface UnistylesNativeMiniRuntime {
@@ -31,7 +32,8 @@ export interface UnistylesNativeMiniRuntime {
     readonly rtl: boolean
     readonly statusBar: Dimensions,
     readonly navigationBar: Dimensions
-    readonly orientation: Orientation
+    readonly isPortrait: boolean,
+    readonly isLandscape: boolean
 }
 
 // represents any native API that can communicate with Unistyles
@@ -49,13 +51,13 @@ export interface NativePlatform extends HybridObject<{ ios: 'swift', android: 'k
     getPrefersRtlDirection(): boolean,
 
     setRootViewBackgroundColor(color: number): void,
-    setNavigationBarBackgroundColor?(color: number): void,
     setNavigationBarHidden?(isHidden: boolean): void,
     setStatusBarHidden(isHidden: boolean): void,
-    setStatusBarBackgroundColor?(color: number): void,
     setImmersiveMode(isEnabled: boolean): void,
 
     // private
     getMiniRuntime(): UnistylesNativeMiniRuntime,
-    registerPlatformListener(callback: (dependencies: Array<UnistyleDependency>) => void): void
+    registerPlatformListener(callback: (dependencies: Array<UnistyleDependency>, miniRuntime: UnistylesNativeMiniRuntime) => void): void,
+    registerImeListener(callback: (miniRuntime: UnistylesNativeMiniRuntime) => void): void,
+    unregisterPlatformListeners(): void
 }

package/src/specs/NavigtionBar/UnistylesNavigationBar.nitro.ts

@@ -5,6 +5,5 @@ export interface UnistylesNavigationBar extends HybridObject<{ ios: 'c++', andro
     readonly width: number,
     readonly height: number,
 
-    setBackgroundColor(color: number): void,
     setHidden(isHidden: boolean): void
 }

package/src/specs/NavigtionBar/index.ts

@@ -1,25 +1 @@
-import { processColor } from 'react-native'
-import type { UnistylesNavigationBar as UnistylesNavigationBarSpec } from './UnistylesNavigationBar.nitro'
-import type { Color } from '../types'
-
-interface PrivateUnistylesNavigationBar extends Omit<UnistylesNavigationBarSpec, 'setBackgroundColor'> {
-    setBackgroundColor(color?: string): void,
-    _setBackgroundColor(color?: Color): void
-}
-
-export const attachNavigationBarJSMethods = (hybridObject: UnistylesNavigationBar) => {
-    const privateHybrid = hybridObject as PrivateUnistylesNavigationBar
-
-    privateHybrid._setBackgroundColor = hybridObject.setBackgroundColor
-    hybridObject.setBackgroundColor = (color?: string) => {
-        const parsedColor = processColor(color)
-
-        privateHybrid._setBackgroundColor(parsedColor as number)
-    }
-}
-
-type PrivateMethods =
-    | '_setBackgroundColor'
-    | 'dispose'
-
-export type UnistylesNavigationBar = Omit<PrivateUnistylesNavigationBar, PrivateMethods>
+export type { UnistylesNavigationBar } from './UnistylesNavigationBar.nitro'

package/src/specs/ShadowRegistry/index.ts

@@ -4,11 +4,11 @@ import type { ShadowNode, Unistyle, ViewHandle } from './types'
 
 interface ShadowRegistry extends UnistylesShadowRegistrySpec {
     // Babel API
-    add(handle?: ViewHandle, style?: Unistyle): void,
-    remove(handle?: ViewHandle, style?: Unistyle): void,
+    add(handle?: ViewHandle, styles?: Array<Unistyle>, variants?: Record<string, string | boolean>, args?: Array<Array<any>>, uniquePressableId?: string): void,
+    remove(handle?: ViewHandle): void,
     // JSI
-    link(node: ShadowNode, style: Unistyle): void,
-    unlink(node: ShadowNode, style: Unistyle): void
+    link(node: ShadowNode, styles?: Array<Unistyle>, variants?: Record<string, string | boolean>, args?: Array<Array<any>>, uniquePressableId?: string): void,
+    unlink(node: ShadowNode): void
 }
 
 const HybridShadowRegistry = NitroModules.createHybridObject<ShadowRegistry>('UnistylesShadowRegistry')
@@ -26,20 +26,26 @@ const findShadowNodeForHandle = (handle: ViewHandle) => {
     return node
 }
 
-HybridShadowRegistry.add = (handle, style) => {
-    if (!handle || !style?.__unid) {
+HybridShadowRegistry.add = (handle, styles, variants, args, uniquePressableId) => {
+    // virtualized nodes can be null
+    if (!handle || !styles || !Array.isArray(styles)) {
         return
     }
 
-    HybridShadowRegistry.link(findShadowNodeForHandle(handle), style)
+    // filter Reanimated styles and styles that are undefined
+    const filteredStyles = styles
+        .filter(style => !style?.initial?.updater)
+        .filter(Boolean)
+
+    HybridShadowRegistry.link(findShadowNodeForHandle(handle), filteredStyles, variants ?? {}, args ?? [], uniquePressableId)
 }
 
-HybridShadowRegistry.remove = (handle, style) => {
-    if (!handle || !style?.__unid) {
+HybridShadowRegistry.remove = handle => {
+    if (!handle) {
         return
     }
 
-    HybridShadowRegistry.unlink(findShadowNodeForHandle(handle), style)
+    HybridShadowRegistry.unlink(findShadowNodeForHandle(handle))
 }
 
 type PrivateMethods =

package/src/specs/ShadowRegistry/types.ts

@@ -25,5 +25,8 @@ export type ViewHandle = {
 }
 
 export type Unistyle = {
-    __unid?: number
+    __unid?: number,
+    initial?: {
+        updater?: () => void
+    }
 }

package/src/specs/StatusBar/UnistylesStatusBar.nitro.ts

@@ -5,6 +5,5 @@ export interface UnistylesStatusBar extends HybridObject<{ ios: 'c++', android:
     readonly width: number,
     readonly height: number,
 
-    setBackgroundColor(color: number): void,
     setHidden(isHidden: boolean): void,
 }

package/src/specs/StatusBar/index.ts

@@ -1,6 +1,6 @@
-import { processColor, StatusBar as NativeStatusBar } from 'react-native'
+import { StatusBar as NativeStatusBar } from 'react-native'
 import type { UnistylesStatusBar as UnistylesStatusBarSpec } from './UnistylesStatusBar.nitro'
-import { type Color, StatusBarStyle } from '../types'
+import { StatusBarStyle } from '../types'
 
 export type StatusBarHiddenAnimation = 'none' | 'fade' | 'slide'
 
@@ -8,8 +8,6 @@ interface PrivateUnistylesStatusBar extends Omit<UnistylesStatusBarSpec, 'setBac
     setStyle(style: StatusBarStyle, animated?: boolean): void,
     setHidden(isHidden: boolean, animation?: StatusBarHiddenAnimation): void,
     _setHidden(isHidden: boolean, animation?: StatusBarHiddenAnimation): void,
-    setBackgroundColor(color?: string): void,
-    _setBackgroundColor(color?: Color): void
 }
 
 export const attachStatusBarJSMethods = (hybridObject: UnistylesStatusBar) => {
@@ -31,17 +29,9 @@ export const attachStatusBarJSMethods = (hybridObject: UnistylesStatusBar) => {
         NativeStatusBar.setHidden(isHidden, animation)
         privateHybrid._setHidden(isHidden)
     }
-
-    privateHybrid._setBackgroundColor = hybridObject.setBackgroundColor
-    hybridObject.setBackgroundColor = (color?: string) => {
-        const parsedColor = processColor(color)
-
-        privateHybrid._setBackgroundColor(parsedColor as number)
-    }
 }
 
 type PrivateMethods =
-    | '_setBackgroundColor'
     | '_setHidden'
     | 'dispose'
 

package/src/specs/StyleSheet/UnistylesStyleSheet.nitro.ts

@@ -1,6 +1,9 @@
 import type { HybridObject } from 'react-native-nitro-modules'
+import { UnistyleDependency } from '../NativePlatform'
 
 export interface UnistylesStyleSheet extends HybridObject<{ ios: 'c++', android: 'c++' }> {
     readonly hairlineWidth: number
-    readonly __unid: number
+    readonly unid: number
+
+    addChangeListener(onChanged: (dependencies: Array<UnistyleDependency>) => void): () => void
 }

package/src/specs/StyleSheet/index.ts

@@ -23,6 +23,7 @@ export interface UnistylesStyleSheet extends UnistylesStyleSheetSpec {
     flatten: typeof NativeStyleSheetType.flatten,
 
     // overridden methods
+    init(): void,
     create: CreateUnistylesStyleSheet,
     configure(config: UnistylesConfig): void,
     jsMethods: {
@@ -41,4 +42,8 @@ HybridUnistylesStyleSheet.jsMethods = {
     processColor
 }
 
-export const StyleSheet = HybridUnistylesStyleSheet as Omit<UnistylesStyleSheet, 'jsMethods'>
+HybridUnistylesStyleSheet.init()
+
+type PrivateMethods = 'jsMethods' | 'addChangeListener' | 'init'
+
+export const StyleSheet = HybridUnistylesStyleSheet as Omit<UnistylesStyleSheet, PrivateMethods>

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

@@ -10,7 +10,6 @@ type Orientation = 'portrait' | 'landscape'
 export interface UnistylesCxxMiniRuntime extends UnistylesNativeMiniRuntime {
     readonly themeName?: string,
     readonly breakpoint?: string,
-    readonly orientation: Orientation,
     readonly hasAdaptiveThemes: boolean,
 }
 
@@ -31,6 +30,7 @@ export interface UnistylesRuntime extends HybridObject<{ ios: 'c++', android: 'c
     readonly themeName?: string,
     readonly contentSizeCategory: string,
     readonly breakpoint?: string,
+    readonly breakpoints: Record<string, number>,
     readonly insets: Insets,
     readonly orientation: Orientation,
     readonly pixelRatio: number,

package/src/specs/UnistylesRuntime/index.ts

@@ -3,9 +3,10 @@ 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 { attachNavigationBarJSMethods, type UnistylesNavigationBar } from '../NavigtionBar'
-import type { AndroidContentSizeCategory, IOSContentSizeCategory } from '../../types'
+import { type UnistylesNavigationBar } from '../NavigtionBar'
+import type { AndroidContentSizeCategory, IOSContentSizeCategory, UnistylesTheme } from '../../types'
 import { isIOS } from '../../common'
+import type { UnistylesThemes } from '../../global'
 
 export interface UnistylesRuntimePrivate extends Omit<UnistylesRuntimeSpec, 'setRootViewBackgroundColor'> {
     readonly colorScheme: ColorScheme,
@@ -18,6 +19,7 @@ export interface UnistylesRuntimePrivate extends Omit<UnistylesRuntimeSpec, 'set
     statusBar: UnistylesStatusBar,
     navigationBar: UnistylesNavigationBar,
 
+    getTheme(themeName?: keyof UnistylesThemes): UnistylesTheme,
     setTheme(themeName: AppThemeName): void
     updateTheme(themeName: AppThemeName, updater: (currentTheme: AppTheme) => AppTheme): void,
     setRootViewBackgroundColor(color?: string): void,
@@ -45,7 +47,7 @@ HybridUnistylesRuntime.navigationBar = HybridUnistylesRuntime.createHybridNaviga
 HybridUnistylesRuntime._setRootViewBackgroundColor = HybridUnistylesRuntime.setRootViewBackgroundColor
 
 HybridUnistylesRuntime.setRootViewBackgroundColor = (color?: string) => {
-    const parsedColor = processColor(color)
+    const parsedColor = processColor(color) ?? 0
 
     HybridUnistylesRuntime._setRootViewBackgroundColor(parsedColor as number)
 }
@@ -55,7 +57,6 @@ if (isIOS) {
 }
 
 attachStatusBarJSMethods(HybridUnistylesRuntime.statusBar)
-attachNavigationBarJSMethods(HybridUnistylesRuntime.navigationBar)
 
 export const Runtime = HybridUnistylesRuntime as UnistylesRuntime
 

package/src/specs/index.ts

@@ -2,14 +2,17 @@ import './TurboUnistyles'
 
 import { Runtime } from './UnistylesRuntime'
 import { StyleSheet } from './StyleSheet'
+import type { UnistylesStyleSheet } from './StyleSheet'
 import { UnistylesShadowRegistry } from './ShadowRegistry'
 import type { UnistylesMiniRuntime } from './UnistylesRuntime'
 import { StatusBarStyle, ColorScheme, Orientation } from './types'
+import { UnistyleDependency } from './NativePlatform'
 
 export {
     StatusBarStyle,
     ColorScheme,
-    Orientation
+    Orientation,
+    UnistyleDependency
 }
 
 export {
@@ -19,5 +22,6 @@ export {
 }
 
 export type {
-    UnistylesMiniRuntime
+    UnistylesMiniRuntime,
+    UnistylesStyleSheet
 }

package/src/specs/index.web.ts

@@ -2,4 +2,4 @@ import type { ReactElement } from 'react'
 
 export const getSSRUnistyles = () => [] as Array<ReactElement>
 
-export * from '../../web'
+export * from '../web'

package/src/types/breakpoints.ts

@@ -17,45 +17,57 @@ type ExtractBreakpoints<T> = T extends object
             }
     : T
 
-type ParseNestedObject<T> = T extends (...args: infer A) => infer R
-    ? (...args: A) => ParseNestedObject<R>
+type ParseNestedObject<T, ShouldFlatten> = T extends (...args: infer A) => infer R
+    ? (...args: A) => ParseNestedObject<R, false>
     : T extends object
         ? T extends { variants: infer R, compoundVariants: infer C }
-            ? ParseVariants<FlattenVariants<R>> & FlattenCompoundVariants<C> & ParseNestedObject<Omit<T, 'variants' | 'compoundVariants'>>
+            // // if intersection of Base, Variants and Compound Variants is never, then flatten variants and compound variants to generic "string"
+            ? (ParseVariants<FlattenVariants<R, false>> & FlattenCompoundVariants<C, false> & ParseNestedObject<Omit<T, 'variants' | 'compoundVariants'>, false>) extends never
+                ? ParseVariants<FlattenVariants<R, true>> & FlattenCompoundVariants<C, true> & ParseNestedObject<Omit<T, 'variants' | 'compoundVariants'>, false>
+                : ParseVariants<FlattenVariants<R, false>> & FlattenCompoundVariants<C, false> & ParseNestedObject<Omit<T, 'variants' | 'compoundVariants'>, false>
             : T extends { variants: infer R }
-                ? ParseVariants<FlattenVariants<R>> & ParseNestedObject<Omit<T, 'variants'>>
+                // if intersection of Base and Variants is never, then flatten variants to generic "string"
+                ? (ParseVariants<FlattenVariants<R, false>> & ParseNestedObject<Omit<T, 'variants'>, false>) extends never
+                    ? ParseVariants<FlattenVariants<R, true>> & ParseNestedObject<Omit<T, 'variants'>, false>
+                    : ParseVariants<FlattenVariants<R, false>> & ParseNestedObject<Omit<T, 'variants'>, false>
                 : T extends { compoundVariants: object }
-                    ? ParseNestedObject<Omit<T, 'compoundVariants'>>
+                    ? ParseNestedObject<Omit<T, 'compoundVariants'>, false>
                     : {
                         [K in keyof T as K extends '_web' ? never : K]: T[K] extends object
                             ? T[K] extends OpaqueColorValue
                                 ? ColorValue
                                 : ExtractBreakpoints<T[K]>
-                            : T[K]
+                            : T[K] extends string
+                                ? ShouldFlatten extends true
+                                    ? string
+                                    : T[K]
+                                : T[K]
                     }
         : T
 
-type FlattenVariants<T> = T extends object
+type FlattenVariants<T, ShouldFlatten> = T extends object
     ? {
         [K in keyof T]: T[K] extends object
             ? {
                 [key in keyof T[K]]: T[K][key] extends object
-                    ? ParseNestedObject<T[K][key]>
+                    ? ParseNestedObject<T[K][key], ShouldFlatten>
                     : never
             }
             : never
     }
     : never
 
-type FlattenCompoundVariants<T> = T extends Array<infer _>
-    ? FlattenCompoundVariants<T[number]>
+type FlattenCompoundVariants<T, ShouldFlatten> = T extends Array<infer _>
+    ? FlattenCompoundVariants<T[number], ShouldFlatten>
     : T extends { styles: infer S }
-        ? ParseNestedObject<S>
+        ? ParseNestedObject<S, ShouldFlatten>
         : never
 
 type ParseVariants<T> = T extends object
     ? T[keyof T] extends object
-        ? UnionToIntersection<ParseVariants<T[keyof T]>>
+        ? UnionToIntersection<ParseVariants<T[keyof T]>> extends never
+            ? ParseVariants<T[keyof T]>
+            : UnionToIntersection<ParseVariants<T[keyof T]>>
         : T
     : T
 
@@ -63,7 +75,7 @@ type UnionToIntersection<U> =
     (U extends any ? (k: U) => void : never) extends ((k: infer I) => void) ? I : never
 
 type ParseStyleKeys<T> = T extends object
-    ? { [K in keyof T]: ParseNestedObject<T[K]> }
+    ? { [K in keyof T]: ParseNestedObject<T[K], false> }
     : never
 
 export type ReactNativeStyleSheet<T> = ParseStyleKeys<SafeReturnType<T>>

package/src/types/common.ts

@@ -1,3 +1,4 @@
 export type Optional<T> = T | undefined
 export type Nullable<T> = T | null
 export type SafeReturnType<T> = T extends (...args: any) => infer R ? R : T
+export type PartialBy<T, K> = Omit<T, K & keyof T> & Partial<Pick<T, K & keyof T>>

package/src/types/index.ts

@@ -17,5 +17,5 @@ export type {
     UnistyleImage
 } from './stylesheet'
 export type { ReactNativeStyleSheet } from './breakpoints'
-export type { ExtractVariantNames } from './variants'
+export type { ExtractVariantNames, UnistylesVariants } from './variants'
 export { AndroidContentSizeCategory, IOSContentSizeCategory, WebContentSizeCategory } from './accessibility'

package/src/types/stylesheet.ts

@@ -1,14 +1,14 @@
-import type { ImageStyle, TextStyle, ViewStyle } from 'react-native'
+import type { BoxShadowValue, ImageStyle, TextStyle, ViewStyle, FilterFunction } from 'react-native'
 import type { ShadowOffset, TransformStyles, UnistylesTheme } from './core'
 import type { UnistylesBreakpoints } from '../global'
 import type { UnistylesMiniRuntime } from '../specs'
 import type { ReactNativeStyleSheet } from './breakpoints'
 import type { ExtractVariantNames } from './variants'
 import type { CSSProperties } from 'react'
-import type { Pseudo } from '../../web/pseudo'
+import type { Pseudo } from '../web/convert/pseudo'
 
 // these props are treated differently to nest breakpoints and media queries
-type NestedKeys = 'shadowOffset' | 'transform' | 'textShadowOffset'
+type NestedKeys = 'shadowOffset' | 'transform' | 'textShadowOffset' | 'boxShadow' | 'filter'
 
 export type UnistyleView = Omit<ViewStyle, NestedKeys>
 export type UnistyleText = Omit<TextStyle, NestedKeys>
@@ -17,7 +17,9 @@ export type UnistyleImage = Omit<ImageStyle, NestedKeys>
 type UnistyleNestedStyles = {
     shadowOffset?: ToDeepUnistyles<ShadowOffset>,
     textShadowOffset?: ToDeepUnistyles<ShadowOffset>,
-    transform?: Array<ToDeepUnistyles<TransformStyles>>
+    transform?: Array<ToDeepUnistyles<TransformStyles>>,
+    boxShadow?: Array<ToDeepUnistyles<BoxShadowValue>> | string,
+    filter?: Array<ToDeepUnistyles<FilterFunction>> | string
 }
 
 type VariantsObject = {
@@ -27,7 +29,7 @@ type VariantsObject = {
 }
 
 type CustomClassName = {
-    _css?: string | Array<string>
+    _classNames?: string | Array<string>
 }
 
 type CompoundVariant = {

package/src/types/variants.ts

@@ -20,4 +20,10 @@ type ExtractSubVariantKeys<T> = T extends object
 
 type ExtractVariant<T> = T extends { variants: infer V }
     ? { [key in keyof V]?: ExtractSubVariantKeys<V[key]> }
-    : T
+    : never
+
+export type UnistylesVariants<ST> = ST extends { useVariants: infer V }
+    ? V extends (variants: infer T) => void
+        ? T
+        : never
+    : never

package/src/utils.ts

@@ -0,0 +1,22 @@
+export const deepMergeObjects = <T extends Record<PropertyKey, any>>(...sources: Array<T>) => {
+    const target = {} as T
+
+    sources.forEach(source => {
+        Object.keys(source).forEach(key => {
+            const sourceValue = source[key]
+            const targetValue = target[key]
+
+            if (Object(sourceValue) == sourceValue && Object(targetValue) === targetValue) {
+                // @ts-expect-error - can't assign to generic
+                target[key] = deepMergeObjects(targetValue, sourceValue)
+
+                return
+            }
+
+            // @ts-expect-error - can't assign to generic
+            target[key] = sourceValue
+        })
+    })
+
+    return target
+}

package/{web → src/web}/convert/index.ts

@@ -1,39 +1,31 @@
-import type { NestedCSSProperties } from 'typestyle/lib/types'
-import type { UnistylesValues } from '../../src/types'
-import { media } from 'typestyle'
-import { isPseudo } from '../pseudo'
-import { convertBreakpoint } from './breakpoint'
+import type { UnistylesValues } from '../../types'
+import { isPseudo } from './pseudo'
 import { getStyle } from './style'
-import { deepMergeObjects } from '../utils'
-import { getTransformStyle } from './transform'
-import { isBoxShadow, isTextShadow, isTransform } from './utils'
-import { getTextShadowStyle } from './textShadow'
-import { getBoxShadowStyle } from './boxShadow'
+import { deepMergeObjects } from '../../utils'
+import { getTransformStyle, getBoxShadow, getFilterStyle } from './object'
+import { isShadow, isFilter, isTextShadow, isTransform, isBoxShadow } from './utils'
+import { getTextShadowStyle, getBoxShadowStyle } from './shadow'
 
-export const convertToTypeStyle = (value: UnistylesValues) => {
+export const convertUnistyles = (value: UnistylesValues) => {
     // Flag to mark if textShadow is already created
     let hasTextShadow = false
     // Flag to mark if boxShadow is already created
-    let hasBoxShadow = false
+    let hasShadow = false
 
     const stylesArray = Object.entries({
         ...value,
         ...value._web
     }).flatMap(([unistylesKey, unistylesValue]) => {
         // Keys to omit
-        if (['_css', '_web', 'variants', 'compoundVariants', 'uni__dependencies'].includes(unistylesKey)) {
+        if (['_classNames', '_web', 'variants', 'compoundVariants', 'uni__dependencies', '__unistyles-secrets__'].includes(unistylesKey) || unistylesKey.startsWith('variant-')) {
             return []
         }
 
         // Pseudo classes :hover, :before etc.
         if (isPseudo(unistylesKey)) {
-            const typestyleValues = convertToTypeStyle(unistylesValue as UnistylesValues)
+            const flattenValues = convertUnistyles(unistylesValue as UnistylesValues)
 
-            return {
-                $nest: {
-                    [unistylesKey.replace('_', '&:')]: typestyleValues
-                }
-            }
+            return { [unistylesKey]: flattenValues }
         }
 
         // Text shadow
@@ -47,17 +39,25 @@ export const convertToTypeStyle = (value: UnistylesValues) => {
             return getTextShadowStyle(value)
         }
 
-        // Box shadow
-        if (isBoxShadow(unistylesKey)) {
-            if (hasBoxShadow) {
+        // RN shadows
+        if (isShadow(unistylesKey)) {
+            if (hasShadow) {
                 return []
             }
 
-            hasBoxShadow = true
+            hasShadow = true
 
             return getBoxShadowStyle(value)
         }
 
+        if (isFilter(unistylesKey, unistylesValue)) {
+            return getFilterStyle(unistylesValue)
+        }
+
+        if (isBoxShadow(unistylesKey, unistylesValue)) {
+            return getBoxShadow(unistylesValue)
+        }
+
         // Transforms
         if (isTransform(unistylesKey, unistylesValue)) {
             return getTransformStyle(unistylesValue)
@@ -66,13 +66,13 @@ export const convertToTypeStyle = (value: UnistylesValues) => {
         // Breakpoints
         if (typeof unistylesValue === 'object' && unistylesValue !== null) {
             return Object.entries(unistylesValue).map(([breakpointKey, breakpointValue]) => {
-                return media(convertBreakpoint(breakpointKey), getStyle(unistylesKey, breakpointValue))
+                return { [breakpointKey]: getStyle(unistylesKey, breakpointValue) }
             })
         }
 
         // Regular styles
         return getStyle(unistylesKey, unistylesValue)
-    }) as Array<NestedCSSProperties>
+    }) as Array<Record<string, any>>
 
     return deepMergeObjects(...stylesArray)
 }