Improve API, support auto-transparent to, rename gradientColor plugin

Author: adamwathan

__tests__/fixtures/tailwind-output-flagged.css

@@ -9,7 +9,7 @@ import backgroundAttachment from './plugins/backgroundAttachment'
 import backgroundClip from './plugins/backgroundClip'
 import backgroundColor from './plugins/backgroundColor'
 import backgroundImage from './plugins/backgroundImage'
-import gradientColor from './plugins/gradientColor'
+import gradientColorStops from './plugins/gradientColorStops'
 import backgroundPosition from './plugins/backgroundPosition'
 import backgroundRepeat from './plugins/backgroundRepeat'
 import backgroundSize from './plugins/backgroundSize'
@@ -119,7 +119,7 @@ export default function({ corePlugins: corePluginConfig }) {
     backgroundClip,
     backgroundColor,
     backgroundImage,
-    gradientColor,
+    gradientColorStops,
     backgroundOpacity,
     backgroundPosition,
     backgroundRepeat,

__tests__/fixtures/tailwind-output-important.css

@@ -0,0 +1,54 @@
+import _ from 'lodash'
+import flattenColorPalette from '../util/flattenColorPalette'
+import { toRgba } from '../util/withAlphaVariable'
+
+export default function() {
+  return function({ addUtilities, e, theme, variants, target }) {
+    if (target('gradientColorStops') === 'ie11') {
+      return
+    }
+
+    const colors = flattenColorPalette(theme('gradientColorStops'))
+
+    const utilities = _(colors)
+      .map((value, modifier) => {
+        const transparentTo = (() => {
+          try {
+            const [r, g, b] = toRgba(value)
+            return `rgba(${r}, ${g}, ${b}, 0)`
+          } catch {
+            return `rgba(255, 255, 255, 0)`
+          }
+        })()
+
+        return [
+          [
+            `.${e(`from-${modifier}`)}`,
+            {
+              '--gradient-from-color': value,
+              '--gradient-color-stops': `var(--gradient-from-color), var(--gradient-to-color, ${transparentTo})`,
+            },
+          ],
+          [
+            `.${e(`mid-${modifier}`)}`,
+            {
+              '--gradient-mid-color': value,
+              '--gradient-color-stops': `var(--gradient-from-color), var(--gradient-mid-color), var(--gradient-to-color, ${transparentTo})`,
+            },
+          ],
+          [
+            `.${e(`to-${modifier}`)}`,
+            {
+              '--gradient-to-color': value,
+            },
+          ],
+        ]
+      })
+      .unzip()
+      .flatten()
+      .fromPairs()
+      .value()
+
+    addUtilities(utilities, variants('gradientColorStops'))
+  }
+}

__tests__/fixtures/tailwind-output-no-color-opacity.css

@@ -10,7 +10,7 @@ function hasAlpha(color) {
   )
 }
 
-function toRgba(color) {
+export function toRgba(color) {
   const [r, g, b, a] = createColor(color)
     .rgb()
     .array()

__tests__/fixtures/tailwind-output.css

@@ -152,12 +152,16 @@ module.exports = {
     },
     backgroundColor: theme => theme('colors'),
     backgroundImage: {
-      'gradient-up': 'linear-gradient(0deg, var(--gradient-color-stops))',
-      'gradient-right': 'linear-gradient(90deg, var(--gradient-color-stops))',
-      'gradient-down': 'linear-gradient(180deg, var(--gradient-color-stops))',
-      'gradient-left': 'linear-gradient(270deg, var(--gradient-color-stops))',
-    },
-    gradientColor: theme => theme('colors'),
+      'gradient-t': 'linear-gradient(to top, var(--gradient-color-stops))',
+      'gradient-tr': 'linear-gradient(to top right, var(--gradient-color-stops))',
+      'gradient-r': 'linear-gradient(to right, var(--gradient-color-stops))',
+      'gradient-br': 'linear-gradient(to bottom right, var(--gradient-color-stops))',
+      'gradient-b': 'linear-gradient(to bottom, var(--gradient-color-stops))',
+      'gradient-bl': 'linear-gradient(to bottom left, var(--gradient-color-stops))',
+      'gradient-l': 'linear-gradient(to left, var(--gradient-color-stops))',
+      'gradient-tl': 'linear-gradient(to top left, var(--gradient-color-stops))',
+    },
+    gradientColorStops: theme => theme('colors'),
     backgroundOpacity: theme => theme('opacity'),
     backgroundPosition: {
       bottom: 'bottom',
@@ -668,7 +672,7 @@ module.exports = {
     backgroundClip: ['responsive'],
     backgroundColor: ['responsive', 'hover', 'focus'],
     backgroundImage: ['responsive'],
-    gradientColor: ['responsive', 'hover', 'focus'],
+    gradientColorStops: ['responsive', 'hover', 'focus'],
     backgroundOpacity: ['responsive', 'hover', 'focus'],
     backgroundPosition: ['responsive'],
     backgroundRepeat: ['responsive'],