Compose styles with arrays in sx prop

packages/core/src/index.ts

@@ -13,12 +13,18 @@ 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 styles = css(props.sx)(theme)
+    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]
+    return [...styles, raw]
   }
 }
 

packages/core/src/types.ts

@@ -1,11 +1,11 @@
 import { SystemStyleObject } from '@theme-ui/css'
 
 /**
- * The `sx` prop accepts a `SxStyleProp` object and properties that are part of
- * the `Theme` will be transformed to their corresponding values. Other valid
- * CSS properties are also allowed.
+ * The `sx` prop accepts a `SxStyleProp` object or an array of `SxStyleProp`
+ * objects and properties that are part of the `Theme` will be transformed to
+ * their corresponding values. Other valid CSS properties are also allowed.
  */
-export type SxStyleProp = SystemStyleObject
+export type SxStyleProp = SystemStyleObject | SystemStyleObject[]
 
 export interface SxProps {
   /**

packages/core/test/index.js

@@ -4,13 +4,7 @@ import renderer from 'react-test-renderer'
 import { render, fireEvent, cleanup, act } from '@testing-library/react'
 import { matchers } from 'jest-emotion'
 import mockConsole from 'jest-mock-console'
-import {
-  jsx,
-  Context,
-  useThemeUI,
-  merge,
-  ThemeProvider,
-} from '../src'
+import { jsx, Context, useThemeUI, merge, ThemeProvider } from '../src'
 
 afterEach(cleanup)
 
@@ -104,20 +98,21 @@ describe('ThemeProvider', () => {
       cards: {
         default: {
           border: t => `1px solid ${t.colors.primary}`,
-        }
-      }
+        },
+      },
     }
     const json = renderJSON(
-      jsx(ThemeProvider, { theme },
+      jsx(
+        ThemeProvider,
+        { theme },
         jsx('div', {
           sx: {
             variant: 'cards.default',
-          }
+          },
         })
       )
     )
     expect(json).toHaveStyleRule('border', '1px solid tomato')
-
   })
 })
 
@@ -151,13 +146,15 @@ describe('jsx', () => {
 
   test('css prop accepts functions', () => {
     const json = renderJSON(
-      jsx(ThemeProvider, {
-        theme: {
-          colors: {
-            primary: 'tomato',
-          }
-        }
-      },
+      jsx(
+        ThemeProvider,
+        {
+          theme: {
+            colors: {
+              primary: 'tomato',
+            },
+          },
+        },
         jsx('div', {
           css: t => ({
             color: t.colors.primary,
@@ -216,6 +213,40 @@ describe('jsx', () => {
     expect(json).toHaveStyleRule('color', '#07c')
   })
 
+  test('accepts array in sx prop', () => {
+    const json = renderJSON(
+      jsx(
+        ThemeProvider,
+        {
+          theme: {
+            colors: {
+              primary: 'tomato',
+              blue: '#07c',
+            },
+          },
+        },
+        jsx('div', {
+          sx: [
+            {
+              mx: 2,
+              p: 2,
+              bg: 'primary',
+            },
+            {
+              mx: 'auto',
+              position: 'absolute',
+              bg: 'blue',
+            },
+          ],
+        })
+      )
+    )
+    expect(json).toHaveStyleRule('margin-left', 'auto')
+    expect(json).toHaveStyleRule('padding', '8px')
+    expect(json).toHaveStyleRule('background-color', '#07c')
+    expect(json).toHaveStyleRule('position', 'absolute')
+  })
+
   test('does not add css prop when not provided', () => {
     jest.spyOn(global.console, 'warn')
     const json = renderJSON(jsx(React.Fragment, null, 'hi'))
@@ -338,7 +369,7 @@ describe('useThemeUI', () => {
         theme={{
           colors: {
             text: 'tomato',
-          }
+          },
         }}>
         <GetContext />
       </ThemeProvider>
@@ -347,4 +378,3 @@ describe('useThemeUI', () => {
     expect(context.theme.colors.text).toBe('tomato')
   })
 })
-

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

@@ -143,6 +143,36 @@ In addition to shorthands for applying margin and padding on the x- and y-axes,
 />
 ```
 
+## 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>
+)
+```
+
 ## Functional Values
 
 For shorthand CSS properties or ones that are not automatically mapped to values in the theme,