[WIP] Background gradients

defaultConfig.stub.js

@@ -773,6 +773,7 @@ module.exports = {
     modules: {
       appearance: ['responsive'],
       backgroundColors: ['responsive', 'hover'],
+      backgroundGradients: ['responsive'],
       backgroundPosition: ['responsive'],
       backgroundSize: ['responsive'],
       borderColors: ['responsive', 'hover'],

src/generators/backgroundGradients.js

@@ -0,0 +1,23 @@
+import _ from 'lodash'
+import defineClasses from '../util/defineClasses'
+
+export default function({ backgroundColors }) {
+  return _.compact(
+    _.flatMap(backgroundColors, (startColor, startClassName) => {
+      return _.flatMap(backgroundColors, (endColor, endClassName) => {
+        if (startClassName === endClassName) {
+          return false
+        }
+
+        return defineClasses({
+          [`bg-gradient-y-${startClassName}-to-${endClassName}`]: {
+            'background-color': `linear-gradient(${startColor}, ${endColor})`,
+          },
+          [`bg-gradient-x-${startClassName}-to-${endClassName}`]: {
+            'background-color': `linear-gradient(to right, ${startColor}, ${endColor})`,
+          },
+        })
+      })
+    })
+  )
+}

src/utilityModules.js

@@ -1,6 +1,7 @@
 import lists from './generators/lists'
 import appearance from './generators/appearance'
 import backgroundColors from './generators/backgroundColors'
+import backgroundGradients from './generators/backgroundGradients'
 import backgroundPosition from './generators/backgroundPosition'
 import backgroundSize from './generators/backgroundSize'
 import borderColors from './generators/borderColors'
@@ -44,6 +45,7 @@ export default [
   { name: 'lists', generator: lists },
   { name: 'appearance', generator: appearance },
   { name: 'backgroundColors', generator: backgroundColors },
+  { name: 'backgroundGradients', generator: backgroundGradients },
   { name: 'backgroundPosition', generator: backgroundPosition },
   { name: 'backgroundSize', generator: backgroundSize },
   { name: 'borderColors', generator: borderColors },