feat: Add merging array of variants

CHANGELOG.md

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

packages/components/index.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react'
 import { StyledComponent } from '@emotion/styled'
 import { Interpolation } from '@emotion/react'
 import { SpaceProps, ColorProps, MarginProps } from 'styled-system'
-import { ResponsiveStyleValue, ThemeUIStyleObject } from '@theme-ui/css'
+import { ResponsiveStyleValue, ThemeUIStyleObject, VariantProperty } from '@theme-ui/css'
 
 type Omit<T, K> = Pick<T, Exclude<keyof T, K>>
 
@@ -20,7 +20,7 @@ type ForwardRef<T, P> = React.ForwardRefExoticComponent<
 
 export interface BoxOwnProps extends SpaceProps, ColorProps {
   as?: React.ElementType
-  variant?: string
+  variant?: VariantProperty.Variant
   css?: Interpolation<any>
   sx?: ThemeUIStyleObject
 }

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

@@ -4,6 +4,7 @@ import {
   ThemeDerivedStyles,
   Theme,
   ThemeUICSSObject,
+  VariantProperty,
 } from './types'
 
 export * from './types'
@@ -22,6 +23,20 @@ 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 = {
@@ -262,8 +277,8 @@ const responsive = (
         continue
       }
       next[media] = next[media] || {}
-      if (value[i] == null) continue;
-      (next[media] as Record<string, any>)[key] = value[i]
+      if (value[i] == null) continue
+      ;(next[media] as Record<string, any>)[key] = value[i]
     }
   }
   return next
@@ -283,23 +298,30 @@ export const css = (args: ThemeUIStyleObject = {}) => (
 
   // insert variant props before responsive styles, so they can be merged
   // we need to maintain order of the style props, so if a variant is place in the middle
-  // of other props, it will extends its props at that same location order.
+  // of other props, it will extend its props at that same location order.
   if (obj && obj['variant']) {
     for (const key in obj) {
       const x = obj[key as keyof typeof styles]
       if (key === 'variant') {
-        const val = typeof x === 'function' ? x(theme) : x;
-        const variant = get(theme, val as string);
-        result = { ...result, ...variant };
+        // We could start using the types here to ensure we cover all public API.
+        const variantName = x as VariantProperty.Variant
+
+        // TODO: Is this even documented?
+        const val = typeof x === 'function' ? x(theme) : x
+
+        const variant = get(theme, val as string)
+        result = { ...result, ...variant }
       } else {
-        result[key] = x as CSSObject;
-      }  
+        result[key] = x as CSSObject
+      }
     }
   } else {
-    result = obj as CSSObject ;
+    result = obj as CSSObject
   }
+
   const styles = responsive(result as ThemeUICSSObject)(theme)
   result = {}
+
   for (const key in styles) {
     const x = styles[key as keyof typeof styles]
     const val = typeof x === 'function' ? x(theme) : x

packages/css/src/types.ts

@@ -452,6 +452,10 @@ export type ThemeUICSSProperties = {
   >
 }
 
+export declare namespace VariantProperty {
+  export type Variant = string | string[]
+}
+
 export interface VariantProperty {
   /**
    * **`Variants`** can be useful for applying complex styles to a component based on a single prop.
@@ -474,7 +478,7 @@ export interface VariantProperty {
    *
    * @see https://styled-system.com/variants
    */
-  variant?: string
+  variant?: VariantProperty.Variant
 }
 
 export interface ThemeDerivedStyles {

packages/css/test/temporary.ts

@@ -0,0 +1,38 @@
+import { css, Theme } from '../src'
+
+const theme: Theme = {
+  buttons: {
+    'call-to-action': {
+      fontWeight: 900,
+      bg: 'hotpink',
+      color: 'white',
+    },
+  },
+}
+
+// What's the usecase? Is this documented?
+describe('temporary test', () => {
+  it('is this even documented?', () => {
+    expect(
+      JSON.stringify(
+        css({
+          variant: ((theme: Theme) => {
+            const bestButtonVariant = Object.keys(
+              theme.buttons!
+            )[0 /* Math.random()? */]
+
+            return `buttons.${bestButtonVariant}`
+          }) as any,
+        })(theme),
+        null,
+        2
+      )
+    ).toMatchInlineSnapshot(`
+      "{
+        \\"fontWeight\\": 900,
+        \\"backgroundColor\\": \\"hotpink\\",
+        \\"color\\": \\"white\\"
+      }"
+    `)
+  })
+})

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