feat: Add merging array of variants

packages/components/index.d.ts

@@ -20,7 +20,7 @@ type ForwardRef<T, P> = React.ForwardRefExoticComponent<
 
 export interface BoxOwnProps extends SpaceProps, ColorProps {
   as?: React.ElementType
-  variant?: string
+  variant?: string | string[]
   css?: InterpolationWithTheme<any>
 }
 export interface BoxProps

packages/components/src/Box.js

@@ -1,4 +1,5 @@
 import styled from '@emotion/styled'
+import merge from 'deepmerge'
 import { css, get } from '@theme-ui/css'
 import { createShouldForwardProp } from '@styled-system/should-forward-prop'
 import space from '@styled-system/space'
@@ -9,10 +10,20 @@ const shouldForwardProp = createShouldForwardProp([
   ...color.propNames,
 ])
 
-const sx = props => css(props.sx)(props.theme)
-const base = props => css(props.__css)(props.theme)
-const variant = ({ theme, variant, __themeKey = 'variants' }) =>
-  css(get(theme, __themeKey + '.' + variant, get(theme, variant)))
+const sx = (props) => css(props.sx)(props.theme)
+const base = (props) => css(props.__css)(props.theme)
+const variant = ({ theme, variant, __themeKey = 'variants' }) => {
+  if (Array.isArray(variant)) {
+    return css(
+      variant.reduce(
+        (styles, v) =>
+          merge(styles, get(theme, __themeKey + '.' + v, get(theme, v))),
+        {}
+      )
+    )
+  }
+  return css(get(theme, __themeKey + '.' + variant, get(theme, variant)))
+}
 
 export const Box = styled('div', {
   shouldForwardProp,
@@ -27,7 +38,7 @@ export const Box = styled('div', {
   space,
   color,
   sx,
-  props => props.css
+  (props) => props.css
 )
 
 export default Box

packages/components/test/index.js

@@ -48,6 +48,10 @@ const theme = {
       p: 4,
       bg: 'highlight',
     },
+    bop: {
+      m: 1,
+      bg: 'muted',
+    },
   },
   cards: {
     primary: {
@@ -134,6 +138,16 @@ describe('Box', () => {
     expect(json).toHaveStyleRule('background-color', 'highlight')
     expect(json).toHaveStyleRule('padding', '32px')
   })
+  test('renders with variant array', () => {
+    const json = renderJSON(
+      <ThemeProvider theme={theme}>
+        <Box variant={['boxes.beep', 'boxes.bop']} />
+      </ThemeProvider>
+    )
+    expect(json).toHaveStyleRule('background-color', 'muted')
+    expect(json).toHaveStyleRule('padding', '32px')
+    expect(json).toHaveStyleRule('margin', '4px')
+  })
 
   test('renders with base styles', () => {
     const json = renderJSON(