From 5f88388b7c1c4104cd24942b72ba31acd5f9f407 Mon Sep 17 00:00:00 2001
From: Lachlan Campbell <lachlan@hackclub.com>
Date: Thu, 16 Jan 2020 20:18:03 -0500
Subject: [PATCH 1/7] Add variants support to components

---
 packages/components/package.json  |  1 +
 packages/components/src/Box.js    |  4 ++++
 packages/components/test/index.js | 15 +++++++++++++++
 3 files changed, 20 insertions(+)

diff --git a/packages/components/package.json b/packages/components/package.json
index 849616e59..9ae61ceef 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -14,6 +14,7 @@
     "@styled-system/color": "^5.1.2",
     "@styled-system/should-forward-prop": "^5.1.2",
     "@styled-system/space": "^5.1.2",
+    "@theme-ui/core": "^0.3.1",
     "@theme-ui/css": "^0.3.1"
   },
   "peerDependencies": {
diff --git a/packages/components/src/Box.js b/packages/components/src/Box.js
index c4c0c0bfa..f8c210055 100644
--- a/packages/components/src/Box.js
+++ b/packages/components/src/Box.js
@@ -1,5 +1,6 @@
 import styled from '@emotion/styled'
 import { css, get } from '@theme-ui/css'
+import { merge } from '@theme-ui/core'
 import { createShouldForwardProp } from '@styled-system/should-forward-prop'
 import space from '@styled-system/space'
 import color from '@styled-system/color'
@@ -13,6 +14,8 @@ 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 variants = ({ theme, variants = [], __themeKey = 'variants' }) =>
+  css(merge(variants.map(v => get(theme, __themeKey + '.' + v, get(theme, v)))))
 
 export const Box = styled('div', {
   shouldForwardProp,
@@ -23,6 +26,7 @@ export const Box = styled('div', {
     minWidth: 0,
   },
   base,
+  variants,
   variant,
   space,
   color,
diff --git a/packages/components/test/index.js b/packages/components/test/index.js
index 3d7a9d279..940980879 100644
--- a/packages/components/test/index.js
+++ b/packages/components/test/index.js
@@ -48,6 +48,10 @@ const theme = {
       p: 4,
       bg: 'highlight',
     },
+    boop: {
+      bg: 'tomato',
+      color: 'white',
+    },
   },
   cards: {
     primary: {
@@ -132,6 +136,17 @@ describe('Box', () => {
     expect(json).toHaveStyleRule('padding', '32px')
   })
 
+  test('renders with variants prop', () => {
+    const json = renderJSON(
+      <ThemeProvider theme={theme}>
+        <Box variants={['boxes.beep', 'boxes.boop']} />
+      </ThemeProvider>
+    )
+    expect(json).toHaveStyleRule('padding', '32px')
+    expect(json).toHaveStyleRule('background-color', 'tomato')
+    expect(json).toHaveStyleRule('color', 'white')
+  })
+
   test('renders with base styles', () => {
     const json = renderJSON(
       <Box

From d63897adf63b28e7e6b3b4e1c358650607a6aee7 Mon Sep 17 00:00:00 2001
From: Lachlan Campbell <lachlan@hackclub.com>
Date: Thu, 16 Jan 2020 20:21:39 -0500
Subject: [PATCH 2/7] Add docs

---
 packages/docs/src/pages/components/variants.mdx | 11 +++++++++++
 packages/docs/src/pages/guides/variants.mdx     | 12 ++++++++++++
 2 files changed, 23 insertions(+)

diff --git a/packages/docs/src/pages/components/variants.mdx b/packages/docs/src/pages/components/variants.mdx
index 1a7c0828b..6a3aee37b 100644
--- a/packages/docs/src/pages/components/variants.mdx
+++ b/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 `variants` prop.
+If styles conflict, those of the variant passed later will render.
+
+```jsx live=true
+<Text variants={['caps', 'heading']}>
+  Title text
+</Text>
+```
+
 ## Example Theme
 
 ```js
diff --git a/packages/docs/src/pages/guides/variants.mdx b/packages/docs/src/pages/guides/variants.mdx
index 3ca36662f..3bd07a615 100644
--- a/packages/docs/src/pages/guides/variants.mdx
+++ b/packages/docs/src/pages/guides/variants.mdx
@@ -29,6 +29,9 @@ For example, you can define `primary` and `secondary` variants for buttons and u
       color: 'white',
       bg: 'secondary',
     },
+    small: {
+      fontSize: 1
+    }
   },
 }
 ```
@@ -51,6 +54,15 @@ Variants can use any name you choose, and deeply nested objects can be accessed
 
 </Note>
 
+## Combining Multiple Variants
+
+If you want to combine multiple variants on the same element, pass an array to `variants` in the `sx` prop.
+If styles conflict, those of the variant passed later will render.
+
+```jsx
+<button sx={{ variants: ['buttons.primary', 'buttons.small'] }} />
+```
+
 ## Color Modes
 
 Variants will also work with [color modes](/color-modes).

From 4eaf9b42febfaec65b0bdc1b8d2d7486f9630e00 Mon Sep 17 00:00:00 2001
From: Lachlan Campbell <lachlan@hackclub.com>
Date: Thu, 16 Jan 2020 20:23:09 -0500
Subject: [PATCH 3/7] Begin css support

---
 packages/css/package.json  |  3 +++
 packages/css/src/index.js  |  8 ++++++++
 packages/css/test/index.js | 15 +++++++++++++++
 3 files changed, 26 insertions(+)

diff --git a/packages/css/package.json b/packages/css/package.json
index fc232501a..d6490d08d 100644
--- a/packages/css/package.json
+++ b/packages/css/package.json
@@ -8,6 +8,9 @@
     "prepare": "microbundle --no-compress",
     "watch": "microbundle watch --no-compress"
   },
+  "dependencies": {
+    "deepmerge": "^4.2.2"
+  },
   "author": "Brent Jackson",
   "license": "MIT",
   "publishConfig": {
diff --git a/packages/css/src/index.js b/packages/css/src/index.js
index 98122fdb5..6ade0caa7 100644
--- a/packages/css/src/index.js
+++ b/packages/css/src/index.js
@@ -1,3 +1,5 @@
+import { all } from 'deepmerge'
+
 export const get = (obj, key, def, p, undef) => {
   key = key && key.split ? key.split('.') : [key]
   for (p = 0; p < key.length; p++) {
@@ -191,6 +193,12 @@ export const css = args => (props = {}) => {
       continue
     }
 
+    if (key === 'variants' && typeof val === 'array') {
+      const variants = css(all(val.map(v => get(theme, v))(theme)))
+      result = { ...result, ...variants }
+      continue
+    }
+
     if (val && typeof val === 'object') {
       result[key] = css(val)(theme)
       continue
diff --git a/packages/css/test/index.js b/packages/css/test/index.js
index e1b7fcf04..b6e106f85 100644
--- a/packages/css/test/index.js
+++ b/packages/css/test/index.js
@@ -230,6 +230,21 @@ test('handles responsive variants', () => {
   })
 })
 
+test('returns multiple variants from theme', () => {
+  const result = css({
+    variants: ['text.caps', 'text.title'],
+  })(theme)
+  expect(result).toEqual({
+    fontSize: 16,
+    letterSpacing: '-0.01em',
+    textTransform: 'uppercase',
+    '@media screen and (min-width: 40em)': {
+      fontSize: 16,
+      letterSpacing: '-0.02em',
+    },
+  })
+})
+
 test('handles negative margins from scale', () => {
   const result = css({
     mt: -3,

From 9d5bad5e43af24cc9298c821f0547e07c7f4006d Mon Sep 17 00:00:00 2001
From: Lachlan Campbell <lachlan@hackclub.com>
Date: Thu, 16 Jan 2020 20:26:34 -0500
Subject: [PATCH 4/7] Add to changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 424ff81b5..5b492b18f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 - Adjust media query sort logic #600
 - Fixed link to Gatsby Plugin page in `getting-started` page. Issue #602
+- Adds support for combining multiple variants (pass `variants` an array in `sx` or as a prop on components)
 
 ## v0.3.0 2019-01-22
 

From e49688b0948fbe3cbda3fedd76b6106223db8858 Mon Sep 17 00:00:00 2001
From: Lachlan Campbell <lachlan@hackclub.com>
Date: Thu, 23 Jan 2020 15:13:20 -0500
Subject: [PATCH 5/7] Continue variants implementation

---
 packages/components/package.json |  4 ++--
 packages/components/src/Box.js   | 13 ++++++++++---
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/components/package.json b/packages/components/package.json
index 9ae61ceef..171457a8a 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -14,8 +14,8 @@
     "@styled-system/color": "^5.1.2",
     "@styled-system/should-forward-prop": "^5.1.2",
     "@styled-system/space": "^5.1.2",
-    "@theme-ui/core": "^0.3.1",
-    "@theme-ui/css": "^0.3.1"
+    "@theme-ui/css": "^0.3.1",
+    "deepmerge": "^4.2.2"
   },
   "peerDependencies": {
     "react": "^16.8.0"
diff --git a/packages/components/src/Box.js b/packages/components/src/Box.js
index f8c210055..e75a0b1ad 100644
--- a/packages/components/src/Box.js
+++ b/packages/components/src/Box.js
@@ -1,9 +1,9 @@
 import styled from '@emotion/styled'
 import { css, get } from '@theme-ui/css'
-import { merge } from '@theme-ui/core'
 import { createShouldForwardProp } from '@styled-system/should-forward-prop'
 import space from '@styled-system/space'
 import color from '@styled-system/color'
+import deepmerge from 'deepmerge'
 
 const shouldForwardProp = createShouldForwardProp([
   ...space.propNames,
@@ -12,10 +12,17 @@ const shouldForwardProp = createShouldForwardProp([
 
 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 variants = ({ theme, variants = [], __themeKey = 'variants' }) =>
-  css(merge(variants.map(v => get(theme, __themeKey + '.' + v, get(theme, v)))))
+const variants = ({ theme, variants = [], __themeKey = 'variants' }) => {
+  if (!Array.isArray(variants)) return {}
+  return css(
+    deepmerge.all(
+      variants.map(v => get(theme, __themeKey + '.' + v, get(theme, v)))
+    )
+  )
+}
 
 export const Box = styled('div', {
   shouldForwardProp,

From b81c1a03a2e14e0f40af781d5c646f37dbf6a890 Mon Sep 17 00:00:00 2001
From: Lachlan Campbell <lachlan@hackclub.com>
Date: Thu, 23 Jan 2020 15:13:33 -0500
Subject: [PATCH 6/7] Add additional tests

---
 .../test/__snapshots__/index.js.snap          | 12 +++++++++++
 packages/components/test/index.js             | 21 +++++++++++++++++++
 2 files changed, 33 insertions(+)

diff --git a/packages/components/test/__snapshots__/index.js.snap b/packages/components/test/__snapshots__/index.js.snap
index 203351cc5..d8463d31e 100644
--- a/packages/components/test/__snapshots__/index.js.snap
+++ b/packages/components/test/__snapshots__/index.js.snap
@@ -180,6 +180,18 @@ exports[`Box renders 1`] = `
 </div>
 `;
 
+exports[`Box renders with incorrect type of variants prop 1`] = `
+.emotion-0 {
+  box-sizing: border-box;
+  margin: 0;
+  min-width: 0;
+}
+
+<div
+  className="emotion-0"
+/>
+`;
+
 exports[`Button renders 1`] = `
 .emotion-0 {
   box-sizing: border-box;
diff --git a/packages/components/test/index.js b/packages/components/test/index.js
index 940980879..4a86d1607 100644
--- a/packages/components/test/index.js
+++ b/packages/components/test/index.js
@@ -147,6 +147,27 @@ describe('Box', () => {
     expect(json).toHaveStyleRule('color', 'white')
   })
 
+  test('renders with variant and variants prop', () => {
+    const json = renderJSON(
+      <ThemeProvider theme={theme}>
+        <Box variant="text.heading" variants={['boxes.beep', 'boxes.boop']} />
+      </ThemeProvider>
+    )
+    expect(json).toHaveStyleRule('font-size', '32px')
+    expect(json).toHaveStyleRule('padding', '32px')
+    expect(json).toHaveStyleRule('background-color', 'tomato')
+    expect(json).toHaveStyleRule('color', 'white')
+  })
+
+  test('renders with incorrect type of variants prop', () => {
+    const json = renderJSON(
+      <ThemeProvider theme={theme}>
+        <Box variants="boxes.beep" />
+      </ThemeProvider>
+    )
+    expect(json).toMatchSnapshot()
+  })
+
   test('renders with base styles', () => {
     const json = renderJSON(
       <Box

From a1990cde62ba2e2d3f5cfe09da1cb8ffd61b63a5 Mon Sep 17 00:00:00 2001
From: Lachlan Campbell <lachlan@hackclub.com>
Date: Thu, 23 Jan 2020 15:28:30 -0500
Subject: [PATCH 7/7] Begin fixing CSS implementation

---
 packages/css/src/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/css/src/index.js b/packages/css/src/index.js
index 6ade0caa7..3649453b8 100644
--- a/packages/css/src/index.js
+++ b/packages/css/src/index.js
@@ -193,8 +193,8 @@ export const css = args => (props = {}) => {
       continue
     }
 
-    if (key === 'variants' && typeof val === 'array') {
-      const variants = css(all(val.map(v => get(theme, v))(theme)))
+    if (key === 'variants') {
+      const variants = css(get(theme, val))(theme)
       result = { ...result, ...variants }
       continue
     }