From 63817870c5b849a7181dd41baa1bad5d68d299f4 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Sat, 20 Mar 2021 12:23:22 -0400
Subject: [PATCH] Fix extending gradient colors directly

---
 src/corePlugins/gradientColorStops.js | 11 +++++------
 tests/00-kitchen-sink.test.css        |  7 +++++++
 tests/00-kitchen-sink.test.html       |  1 +
 tests/00-kitchen-sink.test.js         |  3 +++
 4 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/corePlugins/gradientColorStops.js b/src/corePlugins/gradientColorStops.js
index c9ca6b3..5d1f4f8 100644
--- a/src/corePlugins/gradientColorStops.js
+++ b/src/corePlugins/gradientColorStops.js
@@ -1,4 +1,3 @@
-const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
 const flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette').default
 const toColorValue = require('tailwindcss/lib/util/toColorValue').default
 const toRgba = require('tailwindcss/lib/util/withAlphaVariable').toRgba
@@ -17,11 +16,11 @@ function transparentTo(value) {
   }
 }
 
-module.exports = function ({ matchUtilities, jit: { theme } }) {
-  let colorPalette = flattenColorPalette(theme.backgroundColor)
+module.exports = function ({ matchUtilities, theme }) {
+  let colorPalette = flattenColorPalette(theme('gradientColorStops'))
 
   matchUtilities({
-    from: (modifier, { theme }) => {
+    from: (modifier) => {
       let value = asColor(modifier, colorPalette)
 
       if (value === undefined) {
@@ -39,7 +38,7 @@ module.exports = function ({ matchUtilities, jit: { theme } }) {
     },
   })
   matchUtilities({
-    via: (modifier, { theme }) => {
+    via: (modifier) => {
       let value = asColor(modifier, colorPalette)
 
       if (value === undefined) {
@@ -59,7 +58,7 @@ module.exports = function ({ matchUtilities, jit: { theme } }) {
     },
   })
   matchUtilities({
-    to: (modifier, { theme }) => {
+    to: (modifier) => {
       let value = asColor(modifier, colorPalette)
 
       if (value === undefined) {
diff --git a/tests/00-kitchen-sink.test.css b/tests/00-kitchen-sink.test.css
index cd056ad..cab8b2c 100644
--- a/tests/00-kitchen-sink.test.css
+++ b/tests/00-kitchen-sink.test.css
@@ -288,6 +288,13 @@ div {
 .bg-opacity-50 {
   --tw-bg-opacity: 0.5;
 }
+.bg-gradient-to-r {
+  background-image: linear-gradient(to right, var(--tw-gradient-stops));
+}
+.from-foo {
+  --tw-gradient-from: #bada55;
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(186, 218, 85, 0));
+}
 .text-center {
   text-align: center;
 }
diff --git a/tests/00-kitchen-sink.test.html b/tests/00-kitchen-sink.test.html
index 91cc9dc..4366259 100644
--- a/tests/00-kitchen-sink.test.html
+++ b/tests/00-kitchen-sink.test.html
@@ -30,6 +30,7 @@
     <div class="filter-none filter-grayscale"></div>
     <div class="focus:font-normal"></div>
     <div class="font-medium"></div>
+    <div class="bg-gradient-to-r from-foo"></div>
     <div class="custom-component custom-util"></div>
     <div class="bg-opacity-50"></div>
     <div class="focus:ring-2 focus:ring-blue-500"></div>
diff --git a/tests/00-kitchen-sink.test.js b/tests/00-kitchen-sink.test.js
index eec4b93..92b9e63 100644
--- a/tests/00-kitchen-sink.test.js
+++ b/tests/00-kitchen-sink.test.js
@@ -19,6 +19,9 @@ test('it works', () => {
           range: { min: '1280px', max: '1535px' },
           multi: [{ min: '640px', max: '767px' }, { max: '868px' }],
         },
+        gradientColorStops: {
+          foo: '#bada55',
+        },
       },
     },
     plugins: [