✨ Always return variant style with createVariant

docs/api.md

@@ -593,6 +593,15 @@ const Box = styled.div`
 <Box boxStyle={[ 'red', 'shadow' ]} /> // → background-color: red; color: white; box-shadow: 0 0 20px 0 rgba(0, 0, 0, .3);
 ```
 
+```js
+const Box = styled.div`
+  ${boxStyle.variant}
+`
+
+<Box variant='red' /> // → background-color: red; color: white;
+<Box variant={[ 'red', 'shadow' ]} /> // → background-color: red; color: white; box-shadow: 0 0 20px 0 rgba(0, 0,
+```
+
 ### text
 
 ```js
@@ -680,6 +689,15 @@ const Box = styled.div`
 <Box textStyle='heading' /> // → `theme.textStyle.heading`
 ```
 
+```js
+const Text = styled.div`
+  ${textStyle.variant}
+`
+
+<Text variant={true} /> // → `theme.textStyle.default`
+<Text variant='heading' /> // → `theme.textStyle.heading`
+```
+
 ## Styles
 
 
@@ -2727,7 +2745,7 @@ Related: [textStyle][20], [boxStyle][14], [rule][170], [themeValue][187], [theme
 
 -   `options` **[Object][206]** 
     -   `options.themeKey`  
-    -   `options.prop`   (optional, default `'variant'`)
+    -   `options.prop`   (optional, default `VARIANT`)
     -   `options.cssProp`   (optional, default `false`)
     -   `options.transformValue`  
     -   `options.themeGetter`   (optional, default `getThemeValue(themeKey)`)
@@ -2737,8 +2755,12 @@ Related: [textStyle][20], [boxStyle][14], [rule][170], [themeValue][187], [theme
 ```js
 import { createVariant } from 'pss'
 
+const variant = createVariant({
+  themeKey: 'textStyle'
+})
+
 const Text = styled.p`
-  ${createVariant({ themeKey: 'textStyle' })}
+  ${variant}
 `
 ```
 

src/constants.js

@@ -10,3 +10,4 @@ export const TEXT_STYLE_KEY = 'textStyle'
 export const BOX_STYLE_KEY = 'boxStyle'
 export const FONT_KEY = 'fontFamily'
 export const DEFAULT_MEDIA_KEY = 'all'
+export const VARIANT = 'variant'

src/core/create-variant.js

@@ -1,3 +1,4 @@
+import { VARIANT } from '../constants'
 import { getThemeValue } from '../getters'
 import { themeValue } from '../values/theme-value'
 import { createStyles } from './create-styles'
@@ -15,8 +16,12 @@ import { rule } from './rule'
  * @example
  * import { createVariant } from 'pss'
  *
+ * const variant = createVariant({
+ *   themeKey: 'textStyle'
+ * })
+ *
  * const Text = styled.p`
- *   ${createVariant({ themeKey: 'textStyle' })}
+ *   ${variant}
  * `
  *
  * @example
@@ -43,7 +48,7 @@ import { rule } from './rule'
 
 function createVariant ({
   themeKey,
-  prop = 'variant',
+  prop = VARIANT,
   cssProp = false,
   transformValue,
   themeGetter = getThemeValue(themeKey)
@@ -52,9 +57,17 @@ function createVariant ({
     ? themeStyle({ themeKey, transformValue, themeGetter })
     : rule(cssProp, themeValue({ themeKey, transformValue, themeGetter }))
 
-  return createStyles({
+  const mixin = createStyles({
     [prop]: style
   })
+
+  if (prop !== VARIANT) {
+    mixin[VARIANT] = createStyles({
+      [VARIANT]: style
+    })
+  }
+
+  return mixin
 }
 
 export {

src/styles/__tests__/box-style.js

@@ -16,7 +16,7 @@ const theme = {
   }
 }
 
-test('boxStyle', () => {
+test('default', () => {
   expect(toStyles(boxStyle({
     theme,
     boxStyle: 'red'
@@ -33,7 +33,7 @@ test('boxStyle', () => {
   })
 })
 
-test('boxStyle all', () => {
+test('red, shadow', () => {
   const result = toStyles(boxStyle({
     theme,
     boxStyle: [ 'red', 'shadow' ]
@@ -45,3 +45,16 @@ test('boxStyle all', () => {
     boxShadow: '0 0 20px 0 rgba(0, 0, 0, .3)'
   })
 })
+
+test('variant', () => {
+  const result = toStyles(boxStyle.variant({
+    theme,
+    variant: [ 'red', 'shadow' ]
+  }))
+
+  expect(result).toEqual({
+    backgroundColor: 'red',
+    color: 'white',
+    boxShadow: '0 0 20px 0 rgba(0, 0, 0, .3)'
+  })
+})

src/styles/__tests__/text-style.js

@@ -22,7 +22,7 @@ const theme = {
   }
 }
 
-test('textStyle', () => {
+test('default', () => {
   const result = toStyles(textStyle({
     theme,
     textStyle: 'heading'
@@ -35,7 +35,7 @@ test('textStyle', () => {
   })
 })
 
-test('textStyle responsive', () => {
+test('responsive', () => {
   const result = toStyles(textStyle({
     theme,
     textStyle: 'responsive'
@@ -49,7 +49,7 @@ test('textStyle responsive', () => {
   })
 })
 
-test('textStyle all', () => {
+test('all', () => {
   const result = toStyles(textStyle({
     theme,
     textStyle: [ 'responsive', 'heading' ]
@@ -64,3 +64,19 @@ test('textStyle all', () => {
     }
   })
 })
+
+test('variant', () => {
+  const result = toStyles(textStyle.variant({
+    theme,
+    variant: [ 'responsive', 'heading' ]
+  }))
+
+  expect(result).toEqual({
+    fontSize: 32,
+    lineHeight: 1.1,
+    fontWeight: 'bold',
+    '@media (max-width: 600px)': {
+      fontSize: 12
+    }
+  })
+})

src/styles/box-style.js

@@ -38,6 +38,14 @@ import { createVariant } from '../core'
  * @example
  * <Box boxStyle='red' /> // → background-color: red; color: white;
  * <Box boxStyle={[ 'red', 'shadow' ]} /> // → background-color: red; color: white; box-shadow: 0 0 20px 0 rgba(0, 0, 0, .3);
+ *
+ * @example
+ * const Box = styled.div`
+ *   ${boxStyle.variant}
+ * `
+ *
+ * <Box variant='red' /> // → background-color: red; color: white;
+ * <Box variant={[ 'red', 'shadow' ]} /> // → background-color: red; color: white; box-shadow: 0 0 20px 0 rgba(0, 0,
  */
 
 const boxStyle = createVariant({

src/styles/text-style.js

@@ -43,6 +43,14 @@ import { createVariant } from '../core'
  * @example
  * <Box textStyle={true} /> // → `theme.textStyle.default`
  * <Box textStyle='heading' /> // → `theme.textStyle.heading`
+ *
+ * @example
+ * const Text = styled.div`
+ *   ${textStyle.variant}
+ * `
+ *
+ * <Text variant={true} /> // → `theme.textStyle.default`
+ * <Text variant='heading' /> // → `theme.textStyle.heading`
  */
 
 const textStyle = createVariant({