Add support for background images and 2/3-color-stop gradients

package.json

@@ -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"

src/corePlugins.js

@@ -8,6 +8,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 gradientColor from './plugins/gradientColor'
 import backgroundPosition from './plugins/backgroundPosition'
 import backgroundRepeat from './plugins/backgroundRepeat'
 import backgroundSize from './plugins/backgroundSize'
@@ -116,6 +118,8 @@ export default function({ corePlugins: corePluginConfig }) {
     backgroundAttachment,
     backgroundClip,
     backgroundColor,
+    backgroundImage,
+    gradientColor,
     backgroundOpacity,
     backgroundPosition,
     backgroundRepeat,

src/plugins/backgroundImage.js

@@ -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'))
+  }
+}

src/plugins/gradientColor.js

@@ -0,0 +1,46 @@
+import _ from 'lodash'
+import flattenColorPalette from '../util/flattenColorPalette'
+
+export default function() {
+  return function({ addUtilities, e, theme, variants, target }) {
+    if (target('gradientColor') === 'ie11') {
+      return
+    }
+
+    const colors = flattenColorPalette(theme('gradientColor'))
+
+    const utilities = _(colors)
+      .map((value, modifier) => {
+        return [
+          [
+            `.${e(`gradient-from-${modifier}`)}`,
+            {
+              '--gradient-from-color': value,
+              '--gradient-color-stops': 'var(--gradient-from-color)',
+            },
+          ],
+          [
+            `.${e(`gradient-to-${modifier}`)}`,
+            {
+              '--gradient-to-color': value,
+              '--gradient-color-stops': 'var(--gradient-from-color), var(--gradient-to-color)',
+            },
+          ],
+          [
+            `.${e(`gradient-mid-${modifier}`)}`,
+            {
+              '--gradient-mid-color': value,
+              '--gradient-color-stops':
+                'var(--gradient-from-color), var(--gradient-mid-color), var(--gradient-to-color)',
+            },
+          ],
+        ]
+      })
+      .unzip()
+      .flatten()
+      .fromPairs()
+      .value()
+
+    addUtilities(utilities, variants('gradientColor'))
+  }
+}

src/util/usesCustomProperties.js

@@ -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
+}

stubs/defaultConfig.stub.js

@@ -151,6 +151,13 @@ module.exports = {
       '64': '16rem',
     },
     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'),
     backgroundOpacity: theme => theme('opacity'),
     backgroundPosition: {
       bottom: 'bottom',
@@ -660,6 +667,8 @@ module.exports = {
     backgroundAttachment: ['responsive'],
     backgroundClip: ['responsive'],
     backgroundColor: ['responsive', 'hover', 'focus'],
+    backgroundImage: ['responsive'],
+    gradientColor: ['responsive', 'hover', 'focus'],
     backgroundOpacity: ['responsive', 'hover', 'focus'],
     backgroundPosition: ['responsive'],
     backgroundRepeat: ['responsive'],