Merge pull request #127 from tailwindlabs/fix-gradient-extensions

Fix extending gradient colors directly

Author: adamwathan

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) {

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;
 }

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>

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: [