From 75f0792320c77ffbd068a26f252781523c562861 Mon Sep 17 00:00:00 2001
From: Matt Swanson <matt@mdswanson.com>
Date: Thu, 30 Nov 2017 20:06:14 -0500
Subject: [PATCH] Spike out backgroundGradient generator

---
 defaultConfig.stub.js                 |  1 +
 src/generators/backgroundGradients.js | 23 +++++++++++++++++++++++
 src/utilityModules.js                 |  2 ++
 3 files changed, 26 insertions(+)
 create mode 100644 src/generators/backgroundGradients.js

diff --git a/defaultConfig.stub.js b/defaultConfig.stub.js
index 6917451275a1..8394b7d70f53 100644
--- a/defaultConfig.stub.js
+++ b/defaultConfig.stub.js
@@ -773,6 +773,7 @@ module.exports = {
     modules: {
       appearance: ['responsive'],
       backgroundColors: ['responsive', 'hover'],
+      backgroundGradients: ['responsive'],
       backgroundPosition: ['responsive'],
       backgroundSize: ['responsive'],
       borderColors: ['responsive', 'hover'],
diff --git a/src/generators/backgroundGradients.js b/src/generators/backgroundGradients.js
new file mode 100644
index 000000000000..6cfc4eb99f93
--- /dev/null
+++ b/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})`,
+          },
+        })
+      })
+    })
+  )
+}
diff --git a/src/utilityModules.js b/src/utilityModules.js
index d064d7d2201a..1853bfff8c03 100644
--- a/src/utilityModules.js
+++ b/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 },