react-native-unistyles/src/web/convert/object/objectStyle.ts

Level up your React Native StyleSheet

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