react-native-unistyles 3.0.0-alpha.34 → 3.0.0-alpha.36

package/nitrogen/generated/android/c++/JHybridNativePlatformSpec.hpp

@@ -31,6 +31,12 @@ namespace margelo::nitro::unistyles {
       HybridObject(HybridNativePlatformSpec::TAG),
       _javaPart(jni::make_global(jThis)) {}
 
+  public:
+    virtual ~JHybridNativePlatformSpec() {
+      // Hermes GC can destroy JS objects on a non-JNI Thread.
+      jni::ThreadScope::WithClassLoader([&] { _javaPart.reset(); });
+    }
+
   public:
     size_t getExternalMemorySize() noexcept override;
 

package/nitrogen/generated/android/kotlin/com/margelo/nitro/unistyles/Dimensions.kt

@@ -9,6 +9,7 @@ package com.margelo.nitro.unistyles
 
 import androidx.annotation.Keep
 import com.facebook.proguard.annotations.DoNotStrip
+import com.margelo.nitro.core.*
 
 /**
  * Represents the JavaScript object/struct "Dimensions".

package/nitrogen/generated/android/kotlin/com/margelo/nitro/unistyles/Func_void.kt

@@ -10,6 +10,7 @@ package com.margelo.nitro.unistyles
 import androidx.annotation.Keep
 import com.facebook.jni.HybridData
 import com.facebook.proguard.annotations.DoNotStrip
+import com.margelo.nitro.core.*
 import dalvik.annotation.optimization.FastNative
 
 /**

package/nitrogen/generated/android/kotlin/com/margelo/nitro/unistyles/Func_void_std__vector_UnistyleDependency_.kt

@@ -10,6 +10,7 @@ package com.margelo.nitro.unistyles
 import androidx.annotation.Keep
 import com.facebook.jni.HybridData
 import com.facebook.proguard.annotations.DoNotStrip
+import com.margelo.nitro.core.*
 import dalvik.annotation.optimization.FastNative
 
 /**

package/nitrogen/generated/android/kotlin/com/margelo/nitro/unistyles/Insets.kt

@@ -9,6 +9,7 @@ package com.margelo.nitro.unistyles
 
 import androidx.annotation.Keep
 import com.facebook.proguard.annotations.DoNotStrip
+import com.margelo.nitro.core.*
 
 /**
  * Represents the JavaScript object/struct "Insets".

package/nitrogen/generated/android/kotlin/com/margelo/nitro/unistyles/UnistylesNativeMiniRuntime.kt

@@ -9,6 +9,7 @@ package com.margelo.nitro.unistyles
 
 import androidx.annotation.Keep
 import com.facebook.proguard.annotations.DoNotStrip
+import com.margelo.nitro.core.*
 
 /**
  * Represents the JavaScript object/struct "UnistylesNativeMiniRuntime".

package/nitrogen/generated/android/unistyles+autolinking.gradle

@@ -13,6 +13,8 @@
 /// apply from: '../nitrogen/generated/android/unistyles+autolinking.gradle'
 /// ```
 
+logger.warn("[NitroModules] 🔥 unistyles is boosted by nitro!")
+
 android {
   sourceSets {
     main {

package/nitrogen/generated/ios/Unistyles+autolinking.rb

@@ -20,7 +20,7 @@
 # ```
 
 def add_nitrogen_files(spec)
-  Pod::UI.puts "[NitroModules] Adding Unistyles specs..."
+  Pod::UI.puts "[NitroModules] 🔥 Unistyles is boosted by nitro!"
 
   spec.dependency "NitroModules"
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-unistyles",
-  "version": "3.0.0-alpha.34",
+  "version": "3.0.0-alpha.36",
   "description": "Level up your React Native StyleSheet",
   "scripts": {
     "test": "jest",
@@ -74,11 +74,11 @@
     "husky": "9.1.6",
     "jest": "29.7.0",
     "metro-react-native-babel-preset": "0.77.0",
-    "nitro-codegen": "0.14.0",
+    "nitro-codegen": "0.15.0",
     "react": "18.3.1",
     "react-native": "0.76.0",
     "react-native-builder-bob": "0.30.2",
-    "react-native-nitro-modules": "0.14.0",
+    "react-native-nitro-modules": "0.15.0",
     "react-test-renderer": "18.3.1",
     "release-it": "17.10.0",
     "typescript": "5.6.3"

package/src/components/useMedia.ts

@@ -12,7 +12,7 @@ export const useMedia = (config: { mq: symbol }) => {
             return false
         }
 
-        const parsedMq =  parseMq(maybeMq)
+        const parsedMq = parseMq(maybeMq)
 
         if (!isValidMq(parsedMq)) {
             console.error(`🦄 Unistyles: Received invalid mq where min is greater than max: ${maybeMq}`)

package/src/components/useMedia.web.ts

@@ -0,0 +1,47 @@
+import { useEffect, useRef, useState } from 'react'
+import { isUnistylesMq, isValidMq, parseMq } from '../mq'
+
+export const useMedia = (config: { mq: symbol }) => {
+    const disposeRef = useRef(() => {})
+    const [isVisible, setIsVisible] = useState(() => {
+        const maybeMq = config.mq as unknown as string
+
+        if (!isUnistylesMq(maybeMq)) {
+            console.error(`🦄 Unistyles: Received invalid mq: ${maybeMq}`)
+
+            return false
+        }
+
+        const parsedMq = parseMq(maybeMq)
+
+        if (!isValidMq(parsedMq)) {
+            console.error(`🦄 Unistyles: Received invalid mq where min is greater than max: ${maybeMq}`)
+
+            return false
+        }
+
+        const { minWidth, maxWidth, minHeight, maxHeight } = parsedMq
+
+        const mediaQuery = [
+            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 ')
+
+        const media = window.matchMedia(mediaQuery)
+        const handler = (event: MediaQueryListEvent) => setIsVisible(event.matches)
+
+        media.addEventListener('change', handler)
+        disposeRef.current = () => media.removeEventListener('change', handler)
+
+        return media.matches
+    })
+
+    // Unmount
+    useEffect(() => () => disposeRef.current(), [])
+
+    return {
+        isVisible
+    }
+}

package/src/core/createUnistylesComponent.native.tsx

@@ -1,13 +1,13 @@
-import React, { type ComponentProps, type ComponentType, useEffect, useRef, useState } from 'react'
+import React, { type ComponentType, useEffect, useRef, useState } from 'react'
 import type { UnistylesTheme } from '../types'
 import { StyleSheet, UnistyleDependency, UnistylesRuntime, type UnistylesStyleSheet } from '../specs'
-
-type Mappings<T extends ComponentType<any>> = (theme: UnistylesTheme) => Partial<Omit<ComponentProps<T>, typeof SUPPORTED_STYLE_PROPS[number]>>
+import type { PartialBy } from '../types/common'
 
 const SUPPORTED_STYLE_PROPS = ['style', 'contentContainerStyle'] as const
+type SupportedStyleProps = typeof SUPPORTED_STYLE_PROPS[number]
 
-export const createUnistylesComponent = <T extends ComponentType<any>>(Component: T, mappings: Mappings<T> = () => ({})) => {
-    return (props: ComponentProps<T>) => {
+export const createUnistylesComponent =<TProps extends Record<string, any>, TMappings extends Partial<Omit<TProps, SupportedStyleProps>>>(Component: ComponentType<TProps>, mappings?: (theme: UnistylesTheme) => TMappings) => {
+    return (props: PartialBy<TProps, keyof TMappings | SupportedStyleProps>) => {
         const [theme, setTheme] = useState<UnistylesTheme>(UnistylesRuntime.getTheme())
         const [, setRt] = useState(0)
         const stylesRef = useRef<Record<string, any>>({})
@@ -20,6 +20,7 @@ export const createUnistylesComponent = <T extends ComponentType<any>>(Component
                         console.error(`🦄 Unistyles: createUnistylesComponent requires ${propName} to be an object. Please check props for component: ${Component.displayName}`)
                     }
 
+                    // @ts-expect-error - this is hidden from TS
                     if (props[propName].__unistyles_name && !props[propName].__proto__?.getStyle) {
                         console.error(`🦄 Unistyles: createUnistylesComponent received style that is not bound. You likely used the spread operator on a Unistyle style. Please check props for component: ${Component.displayName}`)
                     }
@@ -34,7 +35,7 @@ export const createUnistylesComponent = <T extends ComponentType<any>>(Component
 
         useEffect(() => {
             const removeChangeListener = (StyleSheet as UnistylesStyleSheet).addChangeListener(dependencies => {
-                const componentDependencies = (props.style?.__proto__.uni__dependencies || mappings(theme).style?.__proto__.uni__dependencies) as Array<UnistyleDependency>
+                const componentDependencies = (props.style?.__proto__.uni__dependencies || mappings?.(theme).style?.__proto__.uni__dependencies) as Array<UnistyleDependency>
 
                 if (dependencies.includes(UnistyleDependency.Theme) && (!componentDependencies ||componentDependencies.includes(UnistyleDependency.Theme))) {
                     setTheme(UnistylesRuntime.getTheme())
@@ -44,6 +45,7 @@ export const createUnistylesComponent = <T extends ComponentType<any>>(Component
                         if (props?.[propName]) {
                             stylesRef.current = {
                                 ...stylesRef.current,
+                                // @ts-expect-error - this is hidden from TS
                                 [propName]: props[propName].__proto__?.getStyle() || props[propName]
                             }
                         }
@@ -62,16 +64,16 @@ export const createUnistylesComponent = <T extends ComponentType<any>>(Component
             }
         }, [])
 
-        const mergedProps = { ...mappings(theme) } as ComponentProps<T>
+        const mergedProps = mappings?.(theme) as Record<string, any> ?? {}
 
         Object.keys(props).forEach(key => {
             if (key in mergedProps) {
-                mergedProps[key] = Object.assign(props[key], mergedProps[key])
+                mergedProps[key] = Object.assign(props[key as keyof typeof props], mergedProps[key])
 
                 return
             }
 
-            mergedProps[key] = props[key]
+            mergedProps[key] = props[key as keyof typeof props]
         })
 
         // override with Unistyles styles
@@ -83,6 +85,6 @@ export const createUnistylesComponent = <T extends ComponentType<any>>(Component
 
         isForcedRef.current = false
 
-        return <Component {...mergedProps} />
+        return <Component {...mergedProps as TProps} />
     }
 }

package/src/core/createUnistylesComponent.tsx

@@ -1,12 +1,78 @@
-import React, { type ComponentProps, type ComponentType } from 'react'
+import React, { useEffect, useState, type ComponentType } from 'react'
 import type { UnistylesTheme } from '../types'
-
-type Mappings<T extends ComponentType<any>> = (theme: UnistylesTheme) => Partial<Omit<ComponentProps<T>, typeof SUPPORTED_STYLE_PROPS[number]>>
+import { UnistylesRuntime } from '../specs'
+import { UnistyleDependency } from '../specs/NativePlatform'
+import type { PartialBy } from '../types/common'
+import { UnistylesListener } from '../web/listener'
+import { UnistylesShadowRegistry } from '../web'
+import { equal } from '../web/utils'
 
 const SUPPORTED_STYLE_PROPS = ['style', 'contentContainerStyle'] as const
+const ALL_DEPENDENCIES = Object.values(UnistyleDependency).filter((dependency): dependency is UnistyleDependency => typeof dependency === 'number')
+
+type SupportedStyleProps = typeof SUPPORTED_STYLE_PROPS[number]
+
+const useShadowRegistry = (style?: Record<string, any>) => {
+    const [classNames, setClassNames] = useState<Array<string>>([])
+    const [ref] = useState(document.createElement('div'))
+
+    if (style) {
+        UnistylesShadowRegistry
+            .add(ref, style)
+            .then(newClassNames => {
+                if (equal(classNames, newClassNames)) {
+                    return
+                }
+
+                setClassNames(newClassNames)
+            })
+    }
+
+    useEffect(() => () => {
+        // Remove styles on unmount
+        UnistylesShadowRegistry.add(null, style)
+    })
+
+    return classNames
+}
+
+export const createUnistylesComponent = <TProps extends Record<string, any>, TMappings extends Partial<Omit<TProps, SupportedStyleProps>>>(Component: ComponentType<TProps>, mappings?: (theme: UnistylesTheme) => TMappings) => {
+    return (props: PartialBy<TProps, keyof TMappings | SupportedStyleProps>) => {
+        const [mappingsProps, setMappingsProps] = useState(mappings?.(UnistylesRuntime.getTheme()))
+        const styleClassNames = useShadowRegistry(props.style)
+        const contentContainerStyleClassNames = useShadowRegistry(props.contentContainerStyle)
+
+        useEffect(() => {
+            const disposeMappings = UnistylesListener.addListeners(ALL_DEPENDENCIES, () => {
+                if (!mappings) {
+                    disposeMappings()
+
+                    return
+                }
+
+                return setMappingsProps(mappings(UnistylesRuntime.getTheme()))
+            })
+
+            return () => disposeMappings()
+        }, [mappingsProps, props.style])
+
+        const combinedProps = {
+            ...mappingsProps,
+            ...props,
+            ...props.style ? {
+                style: {
+                    $$css: true,
+                    'unistyles': styleClassNames.join(' ')
+                },
+            } : {},
+            ...props.contentContainerStyle ? {
+                style: {
+                    $$css: true,
+                    'unistyles': contentContainerStyleClassNames.join(' ')
+                },
+            } : {},
+        } as unknown as TProps
 
-export const createUnistylesComponent = <T extends ComponentType<any>>(Component: T, _: Mappings<T> = () => ({})) => {
-    return (props: ComponentProps<T>) => {
-        return <Component {...props} />
+        return <Component {...combinedProps} />
     }
 }

package/src/specs/ShadowRegistry/index.ts

@@ -32,6 +32,11 @@ HybridShadowRegistry.add = (handle, style, variants, args) => {
         return
     }
 
+    // don't register Reanimated styles
+    if (style?.initial?.updater) {
+        return
+    }
+
     HybridShadowRegistry.link(findShadowNodeForHandle(handle), style, variants ?? {}, args ?? [])
 }
 

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/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/web/convert/index.ts

@@ -2,16 +2,15 @@ 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 { getTransformStyle, getBoxShadow, getFilterStyle } from './object'
+import { isShadow, isFilter, isTextShadow, isTransform, isBoxShadow } from './utils'
+import { getTextShadowStyle, getBoxShadowStyle } from './shadow'
 
 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,
@@ -40,17 +39,25 @@ export const convertUnistyles = (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)

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

@@ -0,0 +1,54 @@
+import type { BoxShadowValue } from 'react-native'
+import { normalizeNumericValue } from '../utils'
+import { deepMergeObjects, keyInObject } 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)
+}

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

@@ -0,0 +1,39 @@
+import type { DropShadowValue } from 'react-native'
+import { hyphenate } from '../../utils'
+import type { Filters } from '../types'
+import { getObjectStyle } from './objectStyle'
+import { normalizeColor, normalizeNumericValue } from '../utils'
+import { UnistylesRuntime } from '../../runtime'
+import { isUnistylesMq } from '../../../mq'
+
+const getDropShadowStyle = (dropShadow: DropShadowValue) => {
+    const { offsetX = 0, offsetY = 0, standardDeviation = 0, color = '#000' } = dropShadow
+
+    return `${normalizeColor(String(color))} ${normalizeNumericValue(offsetX)} ${normalizeNumericValue(offsetY)} ${normalizeNumericValue(standardDeviation)}`
+}
+
+export const getFilterStyle = (filters: Array<Filters>) => {
+    const restFilters = filters.filter(filter => Object.keys(filter)[0] !== 'dropShadow')
+    const dropShadow = (() => {
+        const dropShadowValue = filters.find(filter => Object.keys(filter)[0] === 'dropShadow')?.dropShadow as Record<string, any>
+
+        if (typeof dropShadowValue !== 'object') {
+            return []
+        }
+
+        const breakpoints = Object.keys(dropShadowValue).filter(key => Object.keys(UnistylesRuntime.breakpoints).includes(key) || isUnistylesMq(key))
+        const breakpointsDropShadow = Object.fromEntries(breakpoints.map(breakpoint => [breakpoint, getDropShadowStyle(dropShadowValue[breakpoint])]))
+
+        if (breakpoints.length === 0) {
+            return [{
+                dropShadow: getDropShadowStyle(dropShadowValue as DropShadowValue)
+            }]
+        }
+
+        return [{
+            dropShadow: breakpointsDropShadow
+        }]
+    })()
+
+    return getObjectStyle([...restFilters, ...dropShadow], 'filter', (key, value) => `${hyphenate(key)}(${normalizeNumericValue(value as number | string)})`)
+}

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

@@ -0,0 +1,3 @@
+export * from './transform'
+export * from './boxShadow'
+export * from './filter'

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

@@ -0,0 +1,68 @@
+import { deepMergeObjects, keyInObject } from '../../utils'
+
+type Styles = Record<string, any>
+type Normalize<TStyles extends Styles> = (key: keyof TStyles, value: TStyles[keyof TStyles]) => any
+
+const createStylesValue = <TStyles extends Styles>(styles: Array<TStyles>, normalize: Normalize<TStyles>) => styles
+    .map(style => {
+        const [key] = Object.keys(style)
+
+        if (!key) {
+            return undefined
+        }
+
+        return normalize(key, style[key])
+    })
+    .filter(Boolean)
+    .join(' ')
+
+export const getObjectStyle = <TStyles extends Styles>(styles: Array<TStyles>, styleKey: string, normalize: Normalize<TStyles>) => {
+    const breakpoints = new Set<string>()
+    const normalStyles: Array<TStyles> = []
+
+    styles.forEach(style => {
+        const [property] = Object.keys(style)
+
+        if (!property) {
+            return
+        }
+
+        const value = style[property]
+
+        if (typeof value === 'object' && !Array.isArray(value)) {
+            Object.keys(value ?? {}).forEach(breakpoint => breakpoints.add(breakpoint))
+
+            return
+        }
+
+        normalStyles.push(style)
+    })
+
+    const breakpointStyles = Array.from(breakpoints).flatMap(breakpoint => {
+        const stylesPerBreakpoint = styles.flatMap(style => {
+            const [property] = Object.keys(style)
+
+            if (!property) {
+                return []
+            }
+
+            const value = style[property]
+
+            if (typeof value === 'object' && !Array.isArray(value)) {
+                return keyInObject(value, breakpoint) ? [{ [property]: value[breakpoint] }] : []
+            }
+
+            return []
+        }) as Array<TStyles>
+
+        return [{
+            [breakpoint]: {
+                [styleKey]: createStylesValue(stylesPerBreakpoint, normalize)
+            }
+        }]
+    })
+
+    return deepMergeObjects<Record<string, any>>({
+        [styleKey]: createStylesValue(normalStyles, normalize)
+    }, ...breakpointStyles)
+}

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

@@ -0,0 +1,24 @@
+import { getObjectStyle } from './objectStyle'
+import { normalizeNumericValue } from '../utils'
+import type { TransformStyles } from '../../../types/core'
+
+const normalizeTransform = (key: string, value: any) => {
+    if (key.includes('scale')) {
+        return value
+    }
+
+    if (typeof value === 'number') {
+        return normalizeNumericValue(value)
+    }
+
+    return value
+}
+
+export const getTransformStyle = (transforms: Array<TransformStyles>) => getObjectStyle(transforms, 'transform', (key, value) => {
+    switch(key) {
+        case 'matrix':
+            return `${key}(${(value as Array<number>).join(',')})`
+        default:
+            return `${key}(${normalizeTransform(key, value)})`
+    }
+})

package/src/web/convert/{boxShadow.ts → shadow/boxShadow.ts}

@@ -1,41 +1,20 @@
-import { deepMergeObjects, warn } from '../utils'
-import { validateShadow } from './shadow'
-import { BOX_SHADOW_STYLES, type BoxShadow } from './types'
-import { extractShadowValue, normalizeColor, normalizeNumericValue } from './utils'
+import { deepMergeObjects } from '../../utils'
+import { BOX_SHADOW_STYLES, type BoxShadow } from '../types'
+import { extractShadowValue, normalizeColor, normalizeNumericValue } from '../utils'
+import { getShadowBreakpoints } from './getShadowBreakpoints'
 
 const createBoxShadowValue = (style: BoxShadow) => {
-    // at this point every prop is present
     const { shadowColor, shadowOffset, shadowOpacity, shadowRadius } = style
-    const offsetX = normalizeNumericValue(shadowOffset.width)
-    const offsetY = normalizeNumericValue(shadowOffset.height)
-    const radius = normalizeNumericValue(shadowRadius)
-    const color = normalizeColor(shadowColor as string, shadowOpacity as number)
+    const offsetX = normalizeNumericValue(shadowOffset?.width ?? 0)
+    const offsetY = normalizeNumericValue(shadowOffset?.height ?? 0)
+    const radius = normalizeNumericValue(shadowRadius ?? 0)
+    const color = normalizeColor((shadowColor ?? '#000000') as string, (shadowOpacity ?? 1) as number)
 
     return `${offsetX} ${offsetY} ${radius} ${color}`
 }
 
 export const getBoxShadowStyle = (styles: Record<string, any>) => {
-    const missingStyles = BOX_SHADOW_STYLES.filter(key => !(key in styles))
-
-    if (missingStyles.length) {
-        warn(`can't apply box shadow as you miss these properties: ${missingStyles.join(', ')}`)
-
-        return {}
-    }
-
-    const breakpointsSet = new Set<string>()
-
-    try {
-        validateShadow(BOX_SHADOW_STYLES, styles, breakpointsSet)
-    } catch (error) {
-        if (typeof error === 'string') {
-            warn(error)
-        }
-
-        return {}
-    }
-
-    const breakpoints = Array.from(breakpointsSet)
+    const breakpoints = getShadowBreakpoints(BOX_SHADOW_STYLES, styles)
 
     // If no breakpoints were used return styles without media queries
     if (breakpoints.length === 0) {