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

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

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)
+}

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,69 @@
+import { deepMergeObjects } from '../../../utils'
+import { 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)})`
+    }
+})