react-native-unistyles 3.0.0-alpha.35 → 3.0.0-alpha.37

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) {

package/src/web/convert/shadow/getShadowBreakpoints.ts

@@ -0,0 +1,34 @@
+import type { ShadowOffset } from '../types'
+
+export const getShadowBreakpoints = (shadowProperties: ReadonlyArray<string>, styles: Record<string, any>) => {
+    const breakpoints = new Set<string>()
+
+    shadowProperties.forEach(key => {
+        const value = styles[key]
+
+        if (typeof value !== 'object') {
+            return
+        }
+
+        if (key === 'shadowOffset' || key === 'textShadowOffset') {
+            const { width, height } = value as ShadowOffset
+
+            // If shadowOffset.width has breakpoints
+            if (typeof width === 'object') {
+                Object.keys(width).forEach(breakpoint => breakpoints.add(breakpoint))
+            }
+
+            // If shadowOffset.height has breakpoints
+            if (typeof height === 'object') {
+                Object.keys(height).forEach(breakpoint => breakpoints.add(breakpoint))
+            }
+
+            return
+        }
+
+        // Collect regular breakpoints
+        Object.keys(value).forEach(breakpoint => breakpoints.add(breakpoint))
+    })
+
+    return Array.from(breakpoints)
+}

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

@@ -0,0 +1,2 @@
+export * from './boxShadow'
+export * from './textShadow'

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

@@ -1,40 +1,20 @@
-import { deepMergeObjects, warn } from '../utils'
-import { validateShadow } from './shadow'
-import { TEXT_SHADOW_STYLES, type TextShadow } from './types'
-import { extractShadowValue, normalizeColor, normalizeNumericValue } from './utils'
+import { deepMergeObjects } from '../../utils'
+import { TEXT_SHADOW_STYLES, type TextShadow } from '../types'
+import { extractShadowValue, normalizeColor, normalizeNumericValue } from '../utils'
+import { getShadowBreakpoints } from './getShadowBreakpoints'
 
 const createTextShadowValue = (style: TextShadow) => {
     const { textShadowColor, textShadowOffset, textShadowRadius } = style
-    const offsetX = normalizeNumericValue(textShadowOffset.width)
-    const offsetY = normalizeNumericValue(textShadowOffset.height)
-    const radius = normalizeNumericValue(textShadowRadius)
-    const color = normalizeColor(textShadowColor as string)
+    const offsetX = normalizeNumericValue(textShadowOffset?.width ?? 0)
+    const offsetY = normalizeNumericValue(textShadowOffset?.height ?? 0)
+    const radius = normalizeNumericValue(textShadowRadius ?? 0)
+    const color = normalizeColor((textShadowColor ?? '#000000') as string)
 
     return `${offsetX} ${offsetY} ${radius} ${color}`
 }
 
 export const getTextShadowStyle = (styles: Record<string, any>) => {
-    const missingStyles = TEXT_SHADOW_STYLES.filter(key => !(key in styles))
-
-    if (missingStyles.length) {
-        warn(`can't apply text shadow as you miss these properties: ${missingStyles.join(', ')}`)
-
-        return {}
-    }
-
-    const breakpointsSet = new Set<string>()
-
-    try {
-        validateShadow(TEXT_SHADOW_STYLES, styles, breakpointsSet)
-    } catch (error) {
-        if (typeof error === 'string') {
-            warn(error)
-        }
-
-        return {}
-    }
-
-    const breakpoints = Array.from(breakpointsSet)
+    const breakpoints = getShadowBreakpoints(TEXT_SHADOW_STYLES, styles)
 
     // If no breakpoints were used return styles without media queries
     if (breakpoints.length === 0) {

package/src/web/convert/types.ts

@@ -1,4 +1,4 @@
-import type { TextStyle, ViewStyle } from 'react-native'
+import type { FilterFunction, TextStyle, ViewStyle } from 'react-native'
 import type { ToDeepUnistyles } from '../../types/stylesheet'
 
 export type ShadowOffset = ToDeepUnistyles<{ width: number, height: number }>
@@ -14,3 +14,10 @@ export type BoxShadow = Required<Pick<ViewStyle, typeof BOX_SHADOW_STYLES[number
 export type AllShadow = TextShadow & BoxShadow
 
 export type AllShadowKeys = keyof AllShadow
+
+type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never
+type FilterKeys = keyof UnionToIntersection<FilterFunction>
+
+export type Filters = {
+    [K in FilterKeys]: UnionToIntersection<FilterFunction>[K]
+}

package/src/web/convert/utils.ts

@@ -1,17 +1,23 @@
 // based on react-native-web normalizer
 // https://github.com/necolas/react-native-web
 import normalizeColors from '@react-native/normalize-colors'
-import { BOX_SHADOW_STYLES, TEXT_SHADOW_STYLES, type AllShadow, type AllShadowKeys } from './types'
+import { BOX_SHADOW_STYLES, TEXT_SHADOW_STYLES, type AllShadow, type AllShadowKeys, type Filters } from './types'
+import type { TransformStyles } from '../../types/core'
+import type { BoxShadowValue } from 'react-native'
 
-export const isTransform = (key: string, value: any): value is Array<Record<string, any>> => key === 'transform' && Array.isArray(value)
+export const isTransform = (key: string, value: any): value is Array<TransformStyles> => key === 'transform' && Array.isArray(value)
 
 export const isTextShadow = (key: string) => TEXT_SHADOW_STYLES.includes(key as typeof TEXT_SHADOW_STYLES[number])
 
-export const isBoxShadow = (key: string) => BOX_SHADOW_STYLES.includes(key as typeof BOX_SHADOW_STYLES[number])
+export const isShadow = (key: string) => BOX_SHADOW_STYLES.includes(key as typeof BOX_SHADOW_STYLES[number])
 
-export const normalizeNumericValue = (value: number) => value ? `${value}px` : value
+export const isFilter = (key: string, value: any): value is Array<Filters> => key === 'filter' && Array.isArray(value)
 
-export const normalizeColor = (color: string, opacity: number = 1) => {
+export const isBoxShadow = (key: string, value: any): value is Array<BoxShadowValue> => key === 'boxShadow' && Array.isArray(value)
+
+export const normalizeNumericValue = (value: number | string) => value && typeof value === 'number' ? `${value}px` : value
+
+export const normalizeColor = (color: string, opacity = 1) => {
     // If the opacity is 1 there's no need to normalize the color
     if (opacity === 1) {
         return color

package/src/web/listener.ts

@@ -4,8 +4,10 @@ import { UnistylesRuntime } from './runtime'
 class UnistylesListenerBuilder {
     private isInitialized = false
     private listeners = Array.from({ length: Object.keys(UnistyleDependency).length / 2 }, () => new Set<VoidFunction>())
+    private stylesheetListeners = Array.from({ length: Object.keys(UnistyleDependency).length / 2 }, () => new Set<VoidFunction>())
 
     emitChange = (dependency: UnistyleDependency) => {
+        this.stylesheetListeners[dependency]?.forEach(listener => listener())
         this.listeners[dependency]?.forEach(listener => listener())
     }
 
@@ -28,6 +30,14 @@ class UnistylesListenerBuilder {
             dependencies.forEach(dependency => this.listeners[dependency]?.delete(listener))
         }
     }
+
+    addStylesheetListeners = (dependencies: Array<UnistyleDependency>, listener: VoidFunction) => {
+        dependencies.forEach(dependency => this.stylesheetListeners[dependency]?.add(listener))
+
+        return () => {
+            dependencies.forEach(dependency => this.stylesheetListeners[dependency]?.delete(listener))
+        }
+    }
 }
 
 export const UnistylesListener = new UnistylesListenerBuilder()

package/src/web/registry.ts

@@ -1,20 +1,11 @@
 import type { UnistylesTheme, UnistylesValues } from '../types'
 import type { StyleSheet, StyleSheetWithSuperPowers } from '../types/stylesheet'
 import { UnistylesRuntime } from './runtime'
-import { extractMediaQueryValue, keyInObject, getMediaQuery, generateHash, extractUnistyleDependencies, deepMergeObjects } from './utils'
+import { extractMediaQueryValue, keyInObject, getMediaQuery, generateHash, extractUnistyleDependencies } from './utils'
 import { UnistylesListener } from './listener'
 import { convertUnistyles } from './convert'
 import type { UnistyleDependency } from '../specs/NativePlatform'
 import type { UnistylesMiniRuntime } from '../specs'
-import { getVariants } from './variants'
-
-type AddProps = {
-    value: UnistylesValues,
-    stylesheet: StyleSheetWithSuperPowers<StyleSheet>,
-    key: string,
-    args: Array<any>,
-    variants: Record<string, any>
-}
 
 type ApplyRuleProps = {
     hash: string,
@@ -75,7 +66,7 @@ class UnistylesRegistryBuilder {
 
         dependencies.forEach(dependency => dependenciesMap.add(dependency))
 
-        const dispose = UnistylesListener.addListeners(Array.from(dependenciesMap), () => {
+        const dispose = UnistylesListener.addStylesheetListeners(Array.from(dependenciesMap), () => {
             const newComputedStylesheet = stylesheet(UnistylesRuntime.theme, UnistylesRuntime.miniRuntime)
 
             this.stylesheets.set(stylesheet, newComputedStylesheet)
@@ -85,42 +76,26 @@ class UnistylesRegistryBuilder {
         this.disposeListenersMap.set(stylesheet, dispose)
     }
 
-    add = ({ key, value, stylesheet, args, variants }: AddProps) => {
+    add = (value: UnistylesValues) => {
         const hash = generateHash(value)
         const existingCounter = this.stylesCounter.get(hash)
 
         if (!existingCounter || existingCounter.size === 0) {
             const counter = new Set<UnistylesValues>()
-            const dependencies = extractUnistyleDependencies(value)
 
             counter.add(value)
             this.stylesCounter.set(hash, counter)
             this.applyStyles(hash, convertUnistyles(value))
 
-            UnistylesListener.addListeners(dependencies, async () => {
-                // Move this callback to the end of the event loop
-                await Promise.resolve()
-
-                const newComputedStyleSheet = this.getComputedStylesheet(stylesheet)
-                const newValue = newComputedStyleSheet[key]!
-                const result = typeof newValue === 'function'
-                    ? newValue(...args)
-                    : newValue
-                const { variantsResult } = Object.fromEntries(getVariants({ variantsResult: result }, variants))
-                const resultWithVariants = deepMergeObjects(result, variantsResult ?? {})
-
-                this.applyStyles(hash, convertUnistyles(resultWithVariants))
-            })
-
-            return hash
+            return { hash, existingHash: false }
         }
 
         existingCounter.add(value)
 
-        return hash
+        return { hash, existingHash: true }
     }
 
-    private applyStyles = (hash: string, styles: Record<string, any>) => {
+    applyStyles = (hash: string, styles: Record<string, any>) => {
         Object.entries(styles).forEach(([key, value]) => {
             if (!this.styleTag.sheet) {
                 return
@@ -228,6 +203,10 @@ class UnistylesRegistryBuilder {
         if (existingStyles.size === 0) {
             const ruleIndex = Array.from(this.styleTag.sheet?.cssRules ?? []).findIndex(rule => rule.cssText.includes(`.${hash}`))
 
+            if (ruleIndex === -1) {
+                return
+            }
+
             this.styleTag.sheet?.deleteRule(ruleIndex)
         }
     }

package/src/web/runtime.ts

@@ -54,6 +54,10 @@ class UnistylesRuntimeBuilder {
         return WebContentSizeCategory.Unspecified
     }
 
+    get breakpoints() {
+        return UnistylesState.breakpoints ?? {}
+    }
+
     get breakpoint() {
         return UnistylesState.breakpoint
     }

package/src/web/shadowRegistry.ts

@@ -1,6 +1,8 @@
 import type { UnistylesValues } from '../types'
+import { convertUnistyles } from './convert'
+import { UnistylesListener } from './listener'
 import { UnistylesRegistry } from './registry'
-import { createDoubleMap, deepMergeObjects, equal, extractSecrets, extractUnistyleDependencies, isInDocument } from './utils'
+import { deepMergeObjects, equal, extractSecrets, extractUnistyleDependencies, isInDocument } from './utils'
 import { getVariants } from './variants'
 
 type Style = UnistylesValues | ((...args: Array<any>) => UnistylesValues)
@@ -14,10 +16,13 @@ class UnistylesShadowRegistryBuilder {
     dispose = () => {}
     // END MOCKS
 
-    private resultsMap = createDoubleMap<HTMLElement, string, UnistylesValues>()
-    private classNamesMap = createDoubleMap<HTMLElement, string, Array<string>>()
+    private resultsMap = new Map<HTMLElement, UnistylesValues>()
+    private hashMap = new Map<HTMLElement, string>()
+    private classNamesMap = new Map<HTMLElement, Array<string>>()
+    private timeoutMap = new Map<HTMLElement, NodeJS.Timeout>()
+    private queuedResultMap = new Map<HTMLElement, Record<string, any>>()
 
-    add = (ref: any, _style?: Style | Array<Style>, _variants?: Record<string, any>, _args?: Array<any>) => {
+    add = (ref: any, _style?: Style | Array<Style>, _variants?: Record<string, any>, _args?: Array<any>) => new Promise<Array<string>>(resolve => {
         // Style is not provided
         if (!_style) {
             return
@@ -39,15 +44,15 @@ class UnistylesShadowRegistryBuilder {
         if (ref === null) {
             const secrets = extractSecrets(_style)
 
-            secrets.forEach(({ __uni__refs, __uni__key }) => {
+            secrets.forEach(({ __uni__refs }) => {
                 __uni__refs.forEach(ref => {
                     if (isInDocument(ref)) {
                         return
                     }
 
-                    const oldResult = this.resultsMap.get(ref, __uni__key)
-                    this.resultsMap.delete(ref, __uni__key)
-                    this.classNamesMap.delete(ref, __uni__key)
+                    const oldResult = this.resultsMap.get(ref)
+                    this.resultsMap.delete(ref)
+                    this.classNamesMap.delete(ref)
 
                     if (oldResult) {
                         UnistylesRegistry.remove(oldResult)
@@ -74,46 +79,80 @@ class UnistylesShadowRegistryBuilder {
                 : style
             const { variantsResult } = Object.fromEntries(getVariants({ variantsResult: result }, variants))
             const resultWithVariants = deepMergeObjects(result, variantsResult ?? {})
-            const oldResult = this.resultsMap.get(ref, __uni__key)
-
-            // If results are the same do nothing
-            if (equal(oldResult, resultWithVariants)) {
-                return
-            }
-
-            const oldClassNames = this.classNamesMap.get(ref, __uni__key)
-
-            // Remove old styles
-            if (oldResult) {
-                UnistylesRegistry.remove(oldResult)
-            }
-
-            // Remove old classnames from the ref
-            oldClassNames?.forEach(className => ref.classList.remove(className))
-            this.resultsMap.set(ref, __uni__key, resultWithVariants)
-
-            const className = UnistylesRegistry.add({
-                key: __uni__key,
-                args,
-                stylesheet: __uni__stylesheet,
-                value: resultWithVariants,
-                variants
+
+            // Get stored result from queue
+            const storedResult = this.queuedResultMap.get(ref) ?? {}
+            // Merge stored result with new result
+            const newResult = deepMergeObjects(storedResult, resultWithVariants)
+            const timeout = this.timeoutMap.get(ref)
+
+            // Add callback to the queue and remove old one
+            this.queuedResultMap.set(ref, newResult)
+            clearTimeout(timeout)
+            this.timeoutMap.set(ref, setTimeout(() => {
+                const oldResult = this.resultsMap.get(ref)
+
+                // If results are the same do nothing
+                if (equal(oldResult, newResult)) {
+                    return
+                }
+
+                const oldClassNames = this.classNamesMap.get(ref)
+
+                // Remove old styles
+                if (oldResult) {
+                    UnistylesRegistry.remove(oldResult)
+                }
+
+                // Remove old classnames from the ref
+                oldClassNames?.forEach(className => ref.classList.remove(className))
+                this.resultsMap.set(ref, newResult)
+
+                const { hash, existingHash } = UnistylesRegistry.add(newResult)
+                const injectedClassNames: Array<string> = newResult?._web?._classNames ?? []
+                const newClassNames = injectedClassNames.concat(hash)
+                const dependencies = extractUnistyleDependencies(newResult)
+
+                if (typeof __uni__stylesheet === 'function') {
+                    // Add dependencies from dynamic styles to stylesheet
+                    UnistylesRegistry.addDependenciesToStylesheet(__uni__stylesheet, dependencies)
+                }
+
+                __uni__refs.add(ref)
+                this.classNamesMap.set(ref, newClassNames)
+                // Add new classnames to the ref
+                ref.classList.add(...newClassNames)
+                resolve(newClassNames)
+
+                // If it is new hash add it to the map to use for the listener
+                if (!existingHash) {
+                    this.hashMap.set(ref, hash)
+                }
+            }, 0))
+
+            // Listen for theme / runtime changes
+            const dispose = UnistylesListener.addListeners(extractUnistyleDependencies(newResult), () => {
+                const hash = this.hashMap.get(ref)
+
+                // Dispose listener if there is no hash
+                if (!hash) {
+                    dispose()
+
+                    return
+                }
+
+                const newComputedStyleSheet = UnistylesRegistry.getComputedStylesheet(__uni__stylesheet)
+                const newValue = newComputedStyleSheet[__uni__key]!
+                const result = typeof newValue === 'function'
+                    ? newValue(...args)
+                    : newValue
+                const { variantsResult } = Object.fromEntries(getVariants({ variantsResult: result }, variants))
+                const resultWithVariants = deepMergeObjects(result, variantsResult ?? {})
+
+                UnistylesRegistry.applyStyles(hash, convertUnistyles(resultWithVariants))
             })
-            const injectedClassNames: Array<string> = resultWithVariants?._web?._classNames ?? []
-            const newClassNames = injectedClassNames.concat(className)
-            const dependencies = extractUnistyleDependencies(resultWithVariants)
-
-            if (typeof __uni__stylesheet === 'function') {
-                // Add dependencies from dynamic styles to stylesheet
-                UnistylesRegistry.addDependenciesToStylesheet(__uni__stylesheet, dependencies)
-            }
-
-            __uni__refs.add(ref)
-            this.classNamesMap.set(ref, __uni__key, newClassNames)
-            // Add new classnames to the ref
-            ref.classList.add(...newClassNames)
         })
-    }
+    })
 
     remove = () => {}
 }

package/src/web/utils/common.ts

@@ -68,40 +68,4 @@ export const generateHash = (value: any) => {
     return `unistyles-${(hasher >>> 0).toString(36)}`
 }
 
-export const createDoubleMap = <TKey, TSecondKey, TValue>() => {
-    const map = new Map<TKey, Map<TSecondKey, TValue>>()
-
-    return {
-        get: (key: TKey, secondKey: TSecondKey) => {
-            const mapForKey = map.get(key)
-
-            if (!mapForKey) {
-                return undefined
-            }
-
-            return mapForKey.get(secondKey)
-        },
-        set: (key: TKey, secondKey: TSecondKey, value: TValue) => {
-            const mapForKey = map.get(key) ?? new Map<TSecondKey, TValue>()
-
-            map.set(key, mapForKey)
-            mapForKey.set(secondKey, value)
-        },
-        delete: (key: TKey, secondKey: TSecondKey) => {
-            const mapForKey = map.get(key)
-
-            if (!mapForKey) {
-                return
-            }
-
-            mapForKey.delete(secondKey)
-        },
-        forEach: (callback: (key: TKey, secondKey: TSecondKey, value: TValue) => void) => {
-            map.forEach((mapForKey, key) => {
-                mapForKey.forEach((value, secondKey) => {
-                    callback(key, secondKey, value)
-                })
-            })
-        }
-    }
-}
+export const hyphenate = (propertyName: string) => propertyName.replace(/[A-Z]/g, (m: string) => `-${m.toLowerCase()}`)

package/src/web/utils/unistyle.ts

@@ -98,7 +98,11 @@ export const getMediaQuery = (query: string) => {
 }
 
 export const extractUnistyleDependencies = (value: any) => {
+    if (!value) {
+        return []
+    }
+
     const dependencies: Array<UnistyleDependency> = keyInObject(value, 'uni__dependencies') ? value.uni__dependencies : []
 
-    return dependencies
+    return Array.isArray(dependencies) ? dependencies : []
 }