Style composition - Allow sx prop to accept arrays

packages/docs/src/pages/sx-prop.mdx

@@ -34,6 +34,36 @@ export default props => (
 To read more about how the values are converted and for a reference of supported CSS properties, see the
 [`@styled-system/css` docs](https://styled-system.com/css).
 
+## Composition
+
+Styles can be composed by using an array of style objects in the `sx` prop.
+This works the same way as [Emotion](https://emotion.sh/docs/composition).
+
+```jsx
+import React from 'react'
+import { css } from 'theme-ui'
+
+const base {
+  backgroundColor: 'background',
+  color: 'primary'
+}
+
+const danger = {
+  color: 'red'
+}
+
+export default props => (
+  <div>
+    <div sx={base}>This will be the primary color</div>
+    <div sx={[danger, base]}>
+      This will be also be primary since the base styles
+      overwrite the danger styles.
+    </div>
+    <div sx={[base, danger]}>This will be red</div>
+  </div>
+)
+```
+
 ## Margin and Padding
 
 Margin and padding are treated as first-class citizens in Styled System,

packages/theme-ui/src/jsx.js

@@ -3,7 +3,8 @@ import css from '@styled-system/css'
 
 const getCSS = props => theme => {
   if (!props.sx && !props.css) return undefined
-  const styles = css(props.sx)(theme)
+  const sx = Array.isArray(props.sx) ? props.sx : [props.sx]
+  const styles = sx.map(s => css(s)(theme))
   const raw = typeof props.css === 'function' ? props.css(theme) : props.css
   return [styles, raw]
 }

packages/theme-ui/test/jsx.js

@@ -22,6 +22,28 @@ test('custom pragma adds styles', () => {
   expect(json).toHaveStyleRule('background-color', 'tomato')
 })
 
+test('accepts array in sx prop', () => {
+  const json = renderJSON(
+    jsx('div', {
+      sx: [
+        {
+          mx: 2,
+          p: 2,
+          bg: 'tomato',
+        },
+        {
+          mx: 'auto',
+          position: 'absolute',
+        },
+      ],
+    })
+  )
+  expect(json).toHaveStyleRule('margin-left', 'auto')
+  expect(json).toHaveStyleRule('padding', '8px')
+  expect(json).toHaveStyleRule('background-color', 'tomato')
+  expect(json).toHaveStyleRule('position', 'absolute')
+})
+
 test('adds raw values with css prop', () => {
   const json = renderJSON(
     jsx('div', {