Compose styles with arrays in sx prop #704
Conversation
| @@ -16,9 +16,10 @@ export * from './types' | |||
| const getCSS = props => { | |||
| if (!props.sx && !props.css) return undefined | |||
| return theme => { | |||
| const styles = css(props.sx)(theme) | |||
| const sx = Array.isArray(props.sx) ? props.sx : [props.sx] | |||
| const styles = sx.map(s => css(s)(theme)) | |||
There was a problem hiding this comment.
@jxnblk Do you have a preferred method for recursively flattening arrays? I realized after I opened the PR that Emotion recursively flattens arrays of styles and this doesn't account for that scenario.
There was a problem hiding this comment.
There are merge utilities in this file (see line 66)—is that what you’re looking for?
There was a problem hiding this comment.
@lachlanjc Thanks for the suggestion. Looks like the merge utility didn't have what i was looking for. I update a PR to do the flattening though.
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/systemui/theme-ui/gvd2e4iv4 |
This PR attempts to revive the work done @phelma (https://github.com/phelma) in #174. I took his work and put in the core package and update the
SxStyleProptype.Sorry about the noise added by Prettier in the test file.