Merge pull request #20 from styled-system/css-variants

Add variants support to `css` package

Author: jxnblk

packages/css/index.js

@@ -81,10 +81,6 @@ export const responsive = styles => theme => {
 
   for (const key in styles) {
     const value = styles[key]
-    if (value && !Array.isArray(value) && typeof value === 'object') {
-      next[key] = responsive(value)(theme)
-      continue
-    }
     if (!Array.isArray(value)) {
       next[key] = value
       continue
@@ -105,7 +101,7 @@ export const responsive = styles => theme => {
 
 export const css = args => (props = {}) => {
   const theme = { ...defaultTheme, ...(props.theme || props) }
-  const result = {}
+  let result = {}
   const obj = typeof args === 'function' ? args(theme) : args
   const styles = responsive(obj)(theme)
 
@@ -115,6 +111,11 @@ export const css = args => (props = {}) => {
     const scale = get(theme, scaleName, get(theme, prop, {}))
     const x = styles[key]
     const val = typeof x === 'function' ? x(theme) : x
+    if (key === 'variant') {
+      const variant = css(get(theme, val))(theme)
+      result = { ...result, ...variant }
+      continue
+    }
     if (val && typeof val === 'object') {
       result[prop] = css(val)(theme)
       continue

packages/css/test.js

@@ -18,6 +18,26 @@ const theme = {
   fontWeights: {
     bold: 600,
   },
+  buttons: {
+    primary: {
+      p: 3,
+      fontWeight: 'bold',
+      color: 'white',
+      bg: 'primary',
+      borderRadius: 2,
+    },
+  },
+  text: {
+    caps: {
+      fontSize: [ 1, 2 ],
+      letterSpacing: '0.1em',
+      textTransform: 'uppercase',
+    },
+    title: {
+      fontSize: [ 3, 4 ],
+      letterSpacing: [ '-0.01em', '-0.02em']
+    },
+  }
 }
 
 test('returns a function', t => {
@@ -156,3 +176,44 @@ test('supports functional values', t => {
     color: 'tomato',
   })
 })
+
+test('returns variants from theme', t => {
+  const res = css({
+    variant: 'buttons.primary',
+  })(theme)
+  t.deepEqual(res, {
+    padding: 16,
+    fontWeight: 600,
+    color: 'white',
+    backgroundColor: 'tomato',
+    borderRadius: 2,
+  })
+})
+
+test('handles variants with responsive values', t => {
+  const res = css({
+    variant: 'text.caps',
+  })(theme)
+  t.deepEqual(res, {
+    fontSize: 14,
+    letterSpacing: '0.1em',
+    textTransform: 'uppercase',
+    '@media screen and (min-width: 40em)': {
+      fontSize: 16,
+    }
+  })
+})
+
+test('handles responsive variants', t => {
+  const res = css({
+    variant: 'text.title',
+  })(theme)
+  t.deepEqual(res, {
+    fontSize: 24,
+    letterSpacing: '-0.01em',
+    '@media screen and (min-width: 40em)': {
+      fontSize: 36,
+      letterSpacing: '-0.02em',
+    }
+  })
+})