react-native-unistyles 3.0.0-alpha.9 → 3.0.0-beta.2

package/src/specs/ShadowRegistry/index.ts

@@ -2,13 +2,19 @@ import { NitroModules } from 'react-native-nitro-modules'
 import type { UnistylesShadowRegistry as UnistylesShadowRegistrySpec } from './ShadowRegistry.nitro'
 import type { ShadowNode, Unistyle, ViewHandle } from './types'
 
+type Variants = Record<string, string | boolean | undefined>
+
 interface ShadowRegistry extends UnistylesShadowRegistrySpec {
     // Babel API
-    add(handle?: ViewHandle, style?: Unistyle, variants?: Record<string, string | boolean>, args?: Array<any>): void,
-    remove(handle?: ViewHandle, style?: Unistyle): void,
+    add(handle?: ViewHandle, styles?: Array<Unistyle>): void,
+    remove(handle?: ViewHandle): void,
     // JSI
-    link(node: ShadowNode, style: Unistyle, variants?: Record<string, string | boolean>, args?: Array<any>): void,
-    unlink(node: ShadowNode, style: Unistyle): void
+    link(node: ShadowNode, styles?: Array<Unistyle>): void,
+    unlink(node: ShadowNode): void,
+    selectVariants(variants?: Variants): void,
+    setScopedTheme(themeName?: string): void,
+    getScopedTheme(): string | undefined,
+    getVariants(): Record<string, string | boolean | undefined> | undefined,
 }
 
 const HybridShadowRegistry = NitroModules.createHybridObject<ShadowRegistry>('UnistylesShadowRegistry')
@@ -17,29 +23,37 @@ const findShadowNodeForHandle = (handle: ViewHandle) => {
     const node = handle?.__internalInstanceHandle?.stateNode?.node
         ?? handle?.getScrollResponder?.()?.getNativeScrollRef?.()?.__internalInstanceHandle?.stateNode?.node
         ?? handle?.getNativeScrollRef?.()?.__internalInstanceHandle?.stateNode?.node
+        ?? handle?._viewRef?.__internalInstanceHandle?.stateNode?.node
+        ?? handle?.viewRef?.current?.__internalInstanceHandle?.stateNode?.node
+        ?? handle?._nativeRef?.__internalInstanceHandle?.stateNode?.node
 
     if (!node) {
-        // todo extend log with file name / component name
-        throw new Error('Could not find shadow node for one of your components')
+        throw new Error(`Unistyles: Could not find shadow node for one of your components of type ${handle?.__internalInstanceHandle?.elementType ?? 'unknown'}`)
     }
 
     return node
 }
 
-HybridShadowRegistry.add = (handle, style, variants, args) => {
-    if (!handle || !style?.__unid) {
+HybridShadowRegistry.add = (handle, styles) => {
+    // virtualized nodes can be null
+    if (!handle || !styles || !Array.isArray(styles)) {
         return
     }
 
-    HybridShadowRegistry.link(findShadowNodeForHandle(handle), style, variants ?? {}, args ?? [])
+    // filter Reanimated styles and styles that are undefined
+    const filteredStyles = styles
+        .filter(style => !style?.initial?.updater)
+        .filter(Boolean)
+
+    HybridShadowRegistry.link(findShadowNodeForHandle(handle), filteredStyles)
 }
 
-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

@@ -8,7 +8,8 @@ export type ShadowNode = {
 
 export type ViewHandle = {
     __internalInstanceHandle?: {
-        stateNode?: StateNode
+        stateNode?: StateNode,
+        elementType?: string
     },
     getScrollResponder?: () => {
         getNativeScrollRef?: () => ({
@@ -21,9 +22,29 @@ export type ViewHandle = {
         __internalInstanceHandle?: {
             stateNode?: StateNode
         }
-    })
+    }),
+    _viewRef?: {
+        __internalInstanceHandle?: {
+            stateNode?: StateNode
+        }
+    },
+    viewRef?: {
+        current?: {
+            __internalInstanceHandle?: {
+                stateNode?: StateNode
+            }
+        }
+    },
+    _nativeRef?: {
+        __internalInstanceHandle?: {
+            stateNode?: StateNode
+        }
+    }
 }
 
 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) ?? 0
-
-        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 type { 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

@@ -6,8 +6,9 @@ import type { UnistylesBreakpoints, UnistylesThemes } from '../../global'
 import type { CreateUnistylesStyleSheet } from '../../types'
 
 type UnistylesSettings = {
-    adaptiveThemes?: boolean,
-    initialTheme?: (() => keyof UnistylesThemes) | keyof UnistylesThemes
+    initialTheme: (() => keyof UnistylesThemes) | keyof UnistylesThemes
+} | {
+    adaptiveThemes: boolean
 }
 
 export type UnistylesConfig = {
@@ -23,6 +24,7 @@ export interface UnistylesStyleSheet extends UnistylesStyleSheetSpec {
     flatten: typeof NativeStyleSheetType.flatten,
 
     // overridden methods
+    init(): void,
     create: CreateUnistylesStyleSheet,
     configure(config: UnistylesConfig): void,
     jsMethods: {
@@ -41,6 +43,8 @@ HybridUnistylesStyleSheet.jsMethods = {
     processColor
 }
 
-type PrivateMethods = 'jsMethods'
+HybridUnistylesStyleSheet.init()
+
+type PrivateMethods = 'jsMethods' | 'addChangeListener' | 'init'
 
 export const StyleSheet = HybridUnistylesStyleSheet as Omit<UnistylesStyleSheet, PrivateMethods>

package/src/specs/TurboUnistyles/NativeTurboUnistyles.ts

@@ -1,8 +1,7 @@
 import type { TurboModule } from 'react-native'
 import { TurboModuleRegistry } from 'react-native'
 
-// this is empty spec for TurboModule that is required to hook
-// Unistyles to Fabric
+// this is empty spec for TurboModule that is required to hook Unistyles to Fabric
 interface Spec extends TurboModule {}
 
 TurboModuleRegistry.get<Spec>('Unistyles')

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

@@ -6,11 +6,10 @@ import type { UnistylesNativeMiniRuntime } from '../NativePlatform'
 type ColorScheme = 'light' | 'dark' | 'unspecified'
 type Orientation = 'portrait' | 'landscape'
 
-// used for Nitro. It's Native + Cxx types
+// used for Nitro. It's (Native + Cxx) type
 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,
@@ -55,7 +57,6 @@ if (isIOS) {
 }
 
 attachStatusBarJSMethods(HybridUnistylesRuntime.statusBar)
-attachNavigationBarJSMethods(HybridUnistylesRuntime.navigationBar)
 
 export const Runtime = HybridUnistylesRuntime as UnistylesRuntime
 

package/src/specs/index.native.ts

@@ -0,0 +1,27 @@
+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,
+    UnistyleDependency
+}
+
+export {
+    UnistylesShadowRegistry,
+    Runtime as UnistylesRuntime,
+    StyleSheet,
+}
+
+export type {
+    UnistylesMiniRuntime,
+    UnistylesStyleSheet
+}

package/src/specs/index.ts

@@ -1,23 +1,3 @@
-import './TurboUnistyles'
-
-import { Runtime } from './UnistylesRuntime'
-import { StyleSheet } from './StyleSheet'
-import { UnistylesShadowRegistry } from './ShadowRegistry'
-import type { UnistylesMiniRuntime } from './UnistylesRuntime'
-import { StatusBarStyle, ColorScheme, Orientation } from './types'
-
-export {
-    StatusBarStyle,
-    ColorScheme,
-    Orientation
-}
-
-export {
-    UnistylesShadowRegistry,
-    Runtime as UnistylesRuntime,
-    StyleSheet,
-}
-
-export type {
-    UnistylesMiniRuntime
-}
+export * from '../web'
+export type { UnistylesMiniRuntime } from './UnistylesRuntime'
+export { UnistyleDependency } from './NativePlatform'

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,5 @@
 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>>
+export type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never

package/src/types/index.ts

@@ -1,4 +1,4 @@
-export type { Optional, Nullable } from './common'
+export type { Optional, Nullable, UnionToIntersection } from './common'
 export type {
     NestedStylePairs,
     UnistylesTheme,
@@ -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/src/web/convert/index.ts

@@ -1,39 +1,31 @@
-import type { NestedCSSProperties } from 'typestyle/lib/types'
 import type { UnistylesValues } from '../../types'
-import { media } from 'typestyle'
-import { isPseudo } from '../pseudo'
-import { convertBreakpoint } from './breakpoint'
+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)
 }

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

@@ -0,0 +1,55 @@
+import type { BoxShadowValue } from 'react-native'
+import { normalizeNumericValue } from '../utils'
+import { keyInObject } from '../../utils'
+import { deepMergeObjects } from '../../../utils'
+
+const createBoxShadowValue = (style: BoxShadowValue) => {
+    const { offsetX, offsetY, blurRadius = 0, spreadDistance = 0, color = '#000', inset } = style
+
+    return `${inset ? 'inset ' : ''}${normalizeNumericValue(offsetX)} ${normalizeNumericValue(offsetY)} ${normalizeNumericValue(blurRadius as number)} ${normalizeNumericValue(spreadDistance as number)} ${color}`
+}
+
+export const getBoxShadow = (boxShadow: Array<BoxShadowValue>) => {
+    const breakpoints = new Set<string>()
+    boxShadow.forEach(shadow => {
+        const [key] = Object.keys(shadow)
+        const value = shadow[key as keyof BoxShadowValue]
+
+        // Breakpoints
+        if (typeof value === 'object') {
+            Object.keys(value).forEach(breakpoint => breakpoints.add(breakpoint))
+        }
+    })
+
+    if (breakpoints.size === 0) {
+        const boxShadowStyle = Object.fromEntries(boxShadow.map(shadow => {
+            const [key] = Object.keys(shadow)
+            return [key, shadow[key as keyof BoxShadowValue]]
+        }))
+
+        return {
+            boxShadow: createBoxShadowValue(boxShadowStyle)
+        }
+    }
+
+    const breakpointStyles = Array.from(breakpoints).map(breakpoint => {
+        const styles = Object.fromEntries(boxShadow.map(shadow => {
+            const [key] = Object.keys(shadow)
+            const value = shadow[key as keyof BoxShadowValue]
+
+            if (typeof value === 'object' && keyInObject(value, breakpoint)) {
+                return [key, value[breakpoint]]
+            }
+
+            return [key, value]
+        }))
+
+        return {
+            [breakpoint]: {
+                boxShadow: createBoxShadowValue(styles)
+            }
+        }
+    })
+
+    return deepMergeObjects(...breakpointStyles)
+}