feat: Add merging array of variants

CHANGELOG.md

@@ -98,6 +98,7 @@
 
 ### `@theme-ui/core`
 
+- Box - ability to merge array variant prop. Issues #1209 #1208
 - Make ThemeProvider `theme` prop required
 
 ### `@theme-ui/editor`

packages/components/src/Box.js

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled'
-import { css, get } from '@theme-ui/css'
+import { css, getVariantValue } from '@theme-ui/css'
+import deepmerge from 'deepmerge'
 import { createShouldForwardProp } from '@styled-system/should-forward-prop'
 import space from '@styled-system/space'
 import color from '@styled-system/color'
@@ -9,10 +10,19 @@ 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(
+      deepmerge.all(
+        variant.map((v) => getVariantValue(theme, __themeKey, v) || {}),
+        { arrayMerge: (dest, src) => src }
+      )
+    )
+  }
+  return css(getVariantValue(theme, __themeKey, variant))
+}
 
 export const Box = styled('div', {
   shouldForwardProp,
@@ -27,7 +37,7 @@ export const Box = styled('div', {
   space,
   color,
   sx,
-  props => props.css
+  (props) => props.css
 )
 
 export default Box

packages/components/test/__snapshots__/index.js.snap

@@ -180,6 +180,43 @@ exports[`Box renders 1`] = `
 </div>
 `;
 
+exports[`Box renders with variant array derived variant from theme merge 1`] = `
+.emotion-0 {
+  box-sizing: border-box;
+  margin: 0;
+  min-width: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  display: inline-block;
+  text-align: center;
+  line-height: inherit;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  font-size: inherit;
+  padding-left: 16px;
+  padding-right: 16px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  color: white;
+  background-color: var(--theme-ui-colors-primary, #0cf);
+  border: 0;
+  border-radius: 4px;
+  color: var(--theme-ui-colors-background, #fefefe);
+  border: 2px solid undefined;
+  background-color: transparent;
+  border-bottom-left-radius: 5px 85px;
+  border-bottom-right-radius: 75px 5px;
+  border-top-left-radius: 85px 5px;
+  border-top-right-radius: 5px 75px;
+}
+
+<button
+  className="emotion-0"
+/>
+`;
+
 exports[`Button hidden 1`] = `
 .emotion-0 {
   box-sizing: border-box;

packages/components/test/index.js

@@ -47,6 +47,10 @@ const theme = {
       p: 4,
       bg: 'highlight',
     },
+    bop: {
+      m: 1,
+      bg: 'muted',
+    },
   },
   cards: {
     primary: {
@@ -139,6 +143,122 @@ 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 variant array function merge', () => {
+    const json = renderJSON(
+      <ThemeProvider
+        theme={{
+          colors: {
+            shadow: '#333333',
+          },
+          boxes: {
+            beep: {
+              border: (t) => `1px solid ${t.colors.shadow}`,
+            },
+            bop: {
+              border: (t) => `2px solid ${t.colors.shadow}`,
+            },
+          },
+        }}>
+        <Box variant={['boxes.beep', 'boxes.bop']} />
+      </ThemeProvider>
+    )
+    expect(json).toHaveStyleRule(
+      'border',
+      '2px solid var(--theme-ui-colors-shadow, #333333)'
+    )
+  })
+
+  test('renders with variant array derived variant from theme merge', () => {
+    jest.spyOn(global.Math, 'random').mockReturnValue(0.4)
+
+    const lighten = (color, amount) => {
+      if (color === '#0cf' && amount === 0.25) {
+        return '#80e5ff'
+      }
+    }
+
+    const sketchyBorders = [
+      {
+        borderBottomLeftRadius: '5px 85px',
+        borderBottomRightRadius: '75px 5px',
+        borderTopLeftRadius: '85px 5px',
+        borderTopRightRadius: '5px 75px',
+      },
+      {
+        borderBottomLeftRadius: '61px 8px',
+        borderBottomRightRadius: '6px 68px',
+        borderTopLeftRadius: '41px 8px',
+        borderTopRightRadius: '3px 68px',
+      },
+      {
+        borderBottomLeftRadius: '75px 5px',
+        borderBottomRightRadius: '5px 85px',
+        borderTopLeftRadius: '5px 75px',
+        borderTopRightRadius: '85px 5px',
+      },
+    ]
+    const randomNumber = () => 0.321;
+    const borderIndex = Math.floor(randomNumber() * sketchyBorders.length)
+    const json = renderJSON(
+      <ThemeProvider
+        theme={{
+          colors: {
+            primary: '#0cf',
+            text: '#000',
+            background: '#fefefe',
+          },
+          buttons: {
+            primary: (t) => {
+              const backgroundColor = lighten(t?.colors?.primary, 0.25)
+
+              return {
+                color: 'background',
+                border: `2px solid ${backgroundColor}`,
+                backgroundColor,
+              }
+            },
+            ghost: {
+              backgroundColor: 'transparent',
+            },
+            sketchy: (t) => {
+              return sketchyBorders[borderIndex]
+            },
+          },
+        }}>
+        <Button variant={['primary', 'ghost', 'sketchy']} />
+      </ThemeProvider>
+    )
+
+    expect(json).toMatchSnapshot()
+
+    expect(json).toHaveStyleRule(
+      'border-bottom-left-radius',
+      sketchyBorders[borderIndex].borderBottomLeftRadius
+    )
+    expect(json).toHaveStyleRule(
+      'border-bottom-right-radius',
+      sketchyBorders[borderIndex].borderBottomRightRadius
+    )
+
+    expect(json).toHaveStyleRule(
+      'color',
+      'var(--theme-ui-colors-background, #fefefe)'
+    )
+    expect(json).toHaveStyleRule('background-color', 'transparent')
+
+    jest.spyOn(global.Math, 'random').mockRestore()
+  })
 
   test('renders with base styles', () => {
     const json = renderJSON(

packages/css/src/index.ts

@@ -22,6 +22,17 @@ export function get(
   return obj === undef ? def : obj
 }
 
+export const getVariantValue = (
+  theme: Theme,
+  _themeKey: string,
+  variant: string): ThemeUICSSObject => {
+  const defValue = get(theme, variant);
+  const value = get(theme, `${_themeKey}.${variant}`, 
+    typeof defValue === 'function' ? defValue(theme) : defValue
+  );
+  return typeof value === 'function' ?value(theme) : value;
+}
+
 export const defaultBreakpoints = [40, 52, 64].map((n) => n + 'em')
 
 const defaultTheme = {

packages/docs/src/pages/components/variants.mdx

@@ -64,6 +64,17 @@ For example, a secondary button style can be added to `theme.buttons.secondary`
 </Button>
 ```
 
+## Combining Multiple Variants
+
+ If you want to combine multiple variants on the same element, pass an array of variants with the `variant` prop.
+ Variant styles are merged from left to right, so if some of the styles conflict, those of the variant passed later will render.
+
+ ```jsx live=true
+ <Text variant={['caps', 'heading']}>
+   Title text
+ </Text>
+ ```
+
 ## Example Theme
 
 ```js