From 9d85eb35d033f62df1fdc89975dc5b4c91ee3141 Mon Sep 17 00:00:00 2001 From: Jonathan Avila Date: Tue, 3 Mar 2020 22:40:58 -0500 Subject: [PATCH] Recursively flatten array of styles --- packages/core/src/index.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 74761693a..6a4915ec1 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -13,10 +13,15 @@ import './react-jsx' export * from './types' +const flattenDeep = arr => + Array.isArray(arr) + ? arr.reduce((a, b) => a.concat(flattenDeep(b)), []) + : [arr] + const getCSS = props => { if (!props.sx && !props.css) return undefined return theme => { - const sx = Array.isArray(props.sx) ? props.sx : [props.sx] + const sx = flattenDeep(props.sx) const styles = sx.map(s => css(s)(theme)) const raw = typeof props.css === 'function' ? props.css(theme) : props.css return [...styles, raw]