Merge pull request #2176 from tailwindlabs/gradients

Add background gradient support

Author: adamwathan

__tests__/fixtures/tailwind-output-flagged.css

@@ -65,6 +65,7 @@
     "postcss-js": "^2.0.0",
     "postcss-nested": "^4.1.1",
     "postcss-selector-parser": "^6.0.0",
+    "postcss-value-parser": "^4.1.0",
     "pretty-hrtime": "^1.0.3",
     "reduce-css-calc": "^2.1.6",
     "resolve": "^1.14.2"

__tests__/fixtures/tailwind-output-important.css

@@ -9,6 +9,8 @@ import appearance from './plugins/appearance'
 import backgroundAttachment from './plugins/backgroundAttachment'
 import backgroundClip from './plugins/backgroundClip'
 import backgroundColor from './plugins/backgroundColor'
+import backgroundImage from './plugins/backgroundImage'
+import gradientColorStops from './plugins/gradientColorStops'
 import backgroundPosition from './plugins/backgroundPosition'
 import backgroundRepeat from './plugins/backgroundRepeat'
 import backgroundSize from './plugins/backgroundSize'
@@ -118,6 +120,8 @@ export default function({ corePlugins: corePluginConfig }) {
     backgroundAttachment,
     backgroundClip,
     backgroundColor,
+    backgroundImage,
+    gradientColorStops,
     backgroundOpacity,
     backgroundPosition,
     backgroundRepeat,

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

@@ -0,0 +1,23 @@
+import _ from 'lodash'
+import usesCustomProperties from '../util/usesCustomProperties'
+
+export default function() {
+  return function({ addUtilities, e, theme, variants, target }) {
+    const utilities = _.fromPairs(
+      _.map(theme('backgroundImage'), (value, modifier) => {
+        if (target('backgroundImage') === 'ie11' && usesCustomProperties(value)) {
+          return []
+        }
+
+        return [
+          `.${e(`bg-${modifier}`)}`,
+          {
+            'background-image': value,
+          },
+        ]
+      })
+    )
+
+    addUtilities(utilities, variants('backgroundImage'))
+  }
+}

__tests__/fixtures/tailwind-output.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 (_error) {
+            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(`via-${modifier}`)}`,
+            {
+              '--gradient-via-color': value,
+              '--gradient-color-stops': `var(--gradient-from-color), var(--gradient-via-color), var(--gradient-to-color, ${transparentTo})`,
+            },
+          ],
+          [
+            `.${e(`to-${modifier}`)}`,
+            {
+              '--gradient-to-color': value,
+            },
+          ],
+        ]
+      })
+      .unzip()
+      .flatten()
+      .fromPairs()
+      .value()
+
+    addUtilities(utilities, variants('gradientColorStops'))
+  }
+}

package.json

@@ -0,0 +1,14 @@
+import valueParser from 'postcss-value-parser'
+
+export default function usesCustomProperties(value) {
+  let foundCustomProperty = false
+
+  valueParser(value).walk(node => {
+    if (node.type === 'function' && node.value === 'var') {
+      foundCustomProperty = true
+    }
+    return !foundCustomProperty
+  })
+
+  return foundCustomProperty
+}

src/corePlugins.js

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

src/plugins/backgroundImage.js

@@ -151,6 +151,17 @@ module.exports = {
       '64': '16rem',
     },
     backgroundColor: theme => theme('colors'),
+    backgroundImage: {
+      'gradient-to-t': 'linear-gradient(to top, var(--gradient-color-stops))',
+      'gradient-to-tr': 'linear-gradient(to top right, var(--gradient-color-stops))',
+      'gradient-to-r': 'linear-gradient(to right, var(--gradient-color-stops))',
+      'gradient-to-br': 'linear-gradient(to bottom right, var(--gradient-color-stops))',
+      'gradient-to-b': 'linear-gradient(to bottom, var(--gradient-color-stops))',
+      'gradient-to-bl': 'linear-gradient(to bottom left, var(--gradient-color-stops))',
+      'gradient-to-l': 'linear-gradient(to left, var(--gradient-color-stops))',
+      'gradient-to-tl': 'linear-gradient(to top left, var(--gradient-color-stops))',
+    },
+    gradientColorStops: theme => theme('colors'),
     backgroundOpacity: theme => theme('opacity'),
     backgroundPosition: {
       bottom: 'bottom',
@@ -660,6 +671,8 @@ module.exports = {
     backgroundAttachment: ['responsive'],
     backgroundClip: ['responsive'],
     backgroundColor: ['responsive', 'hover', 'focus'],
+    backgroundImage: ['responsive'],
+    gradientColorStops: ['responsive', 'hover', 'focus'],
     backgroundOpacity: ['responsive', 'hover', 'focus'],
     backgroundPosition: ['responsive'],
     backgroundRepeat: ['responsive'],