From 0206d060e5233d095703fb5c0c6595fbb82b5a55 Mon Sep 17 00:00:00 2001
From: Enzo Innocenzi <enzo@innocenzi.dev>
Date: Tue, 18 Aug 2020 22:35:10 +0200
Subject: [PATCH 1/3] fix(colors): correctly flatten color closures

---
 src/util/flattenColorPalette.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/util/flattenColorPalette.js b/src/util/flattenColorPalette.js
index 3214d58d7..5110e988d 100644
--- a/src/util/flattenColorPalette.js
+++ b/src/util/flattenColorPalette.js
@@ -3,7 +3,7 @@ import _ from 'lodash'
 export default function flattenColorPalette(colors) {
   const result = _(colors)
     .flatMap((color, name) => {
-      if (!_.isObject(color)) {
+      if (_.isFunction(color) || !_.isObject(color)) {
         return [[name, color]]
       }
 

From 486772a82d0c4c2052e609a0a53db990b2c04ed5 Mon Sep 17 00:00:00 2001
From: Enzo Innocenzi <enzo@innocenzi.dev>
Date: Tue, 18 Aug 2020 22:35:29 +0200
Subject: [PATCH 2/3] fix(gradientColorStops): correctly handle color closures

---
 src/plugins/gradientColorStops.js | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/plugins/gradientColorStops.js b/src/plugins/gradientColorStops.js
index 01d3c9341..4340f13cb 100644
--- a/src/plugins/gradientColorStops.js
+++ b/src/plugins/gradientColorStops.js
@@ -12,6 +12,16 @@ export default function() {
 
     const utilities = _(colors)
       .map((value, modifier) => {
+        const getColorValue = (color, type) => {
+          if (_.isFunction(color)) {
+            return value({
+              opacityVariable: `--gradient-${type}-opacity`,
+            })
+          }
+
+          return color
+        }
+
         const transparentTo = (() => {
           try {
             const [r, g, b] = toRgba(value)
@@ -25,21 +35,21 @@ export default function() {
           [
             `.${e(`from-${modifier}`)}`,
             {
-              '--gradient-from-color': value,
+              '--gradient-from-color': getColorValue(value, 'from'),
               '--gradient-color-stops': `var(--gradient-from-color), var(--gradient-to-color, ${transparentTo})`,
             },
           ],
           [
             `.${e(`via-${modifier}`)}`,
             {
-              '--gradient-via-color': value,
+              '--gradient-via-color': getColorValue(value, 'via'),
               '--gradient-color-stops': `var(--gradient-from-color), var(--gradient-via-color), var(--gradient-to-color, ${transparentTo})`,
             },
           ],
           [
             `.${e(`to-${modifier}`)}`,
             {
-              '--gradient-to-color': value,
+              '--gradient-to-color': getColorValue(value, 'to'),
             },
           ],
         ]

From f6fc9630d5bc53b5766fac483e9e36502630e3a5 Mon Sep 17 00:00:00 2001
From: Enzo Innocenzi <enzo@innocenzi.dev>
Date: Tue, 18 Aug 2020 23:26:29 +0200
Subject: [PATCH 3/3] test(gradientColorStops): ensure opacity variables are
 generated

---
 __tests__/plugins/gradientColorStops.test.js | 38 ++++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 __tests__/plugins/gradientColorStops.test.js

diff --git a/__tests__/plugins/gradientColorStops.test.js b/__tests__/plugins/gradientColorStops.test.js
new file mode 100644
index 000000000..473ae7771
--- /dev/null
+++ b/__tests__/plugins/gradientColorStops.test.js
@@ -0,0 +1,38 @@
+import postcss from 'postcss'
+import tailwind from '../../src/index'
+
+test('opacity variables are given to colors defined as closures', () => {
+  return postcss([
+    tailwind({
+      theme: {
+        colors: {
+          primary: ({ opacityVariable }) => `rgba(31,31,31,var(${opacityVariable},1))`,
+        },
+      },
+      variants: {
+        gradientColorStops: [],
+      },
+      corePlugins: ['gradientColorStops'],
+    }),
+  ])
+    .process('@tailwind utilities', { from: undefined })
+    .then(result => {
+      const expected = `
+				.from-primary {
+					--gradient-from-color: rgba(31,31,31,var(--gradient-from-opacity,1));
+					--gradient-color-stops: var(--gradient-from-color), var(--gradient-to-color, rgba(255, 255, 255, 0))
+				}
+		
+				.via-primary {
+					--gradient-via-color: rgba(31,31,31,var(--gradient-via-opacity,1));
+					--gradient-color-stops: var(--gradient-from-color), var(--gradient-via-color), var(--gradient-to-color, rgba(255, 255, 255, 0))
+				}
+		
+				.to-primary {
+					--gradient-to-color: rgba(31,31,31,var(--gradient-to-opacity,1))
+				}
+      `
+
+      expect(result.css).toMatchCss(expected)
+    })
+})