import { deepMergeObjects } from '../../../utils' import { keyInObject } from '../../utils' type Styles = Record type Normalize = (key: keyof TStyles, value: TStyles[keyof TStyles]) => any const createStylesValue = (styles: Array, normalize: Normalize) => styles .map((style) => { const [key] = Object.keys(style) if (!key) { return undefined } return normalize(key, style[key]) }) .filter(Boolean) .join(' ') export const getObjectStyle = ( styles: Array, styleKey: string, normalize: Normalize, ) => { const breakpoints = new Set() const normalStyles: Array = [] 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 return [ { [breakpoint]: { [styleKey]: createStylesValue(stylesPerBreakpoint, normalize), }, }, ] }) return deepMergeObjects>( { [styleKey]: createStylesValue(normalStyles, normalize), }, ...breakpointStyles, ) }