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