Add support for generating background-image utilities

Author: hacknug

index.js

@@ -6,10 +6,14 @@ module.exports = function () {
     addUtilities, addComponents, addBase, addVariant,
     e, prefix, theme, variants, config,
   }) {
-    const pluginUtilities = {
-        // '.bg': {},
-        // '.bg-image': {},
+    const buildObjectFromTheme = themeKey => {
+      const buildObject = ([ modifier, value ]) => [ modifier, { [themeKey]: value } ]
+      const themeEntries = Object.entries(theme(themeKey, {})).map(entry => buildObject(entry))
+      return _.fromPairs(themeEntries)
+    }
 
+    const pluginUtilities = {
+        image: buildObjectFromTheme('backgroundImage'),
         clip: {
           border: { backgroundClip: 'border-box' },
           padding: { backgroundClip: 'padding-box' },
@@ -23,14 +27,16 @@ module.exports = function () {
         },
     }
 
-    Object.entries(pluginUtilities).forEach(([ modifier, values ]) => {
-      const variantName = _.camelCase(`background-${modifier}`)
-      const utilities = flatten(
-        { [`.${e(`bg-${modifier}`)}`]: values },
-        { delimiter: '-', maxDepth: 2 },
-      )
+    Object.entries(pluginUtilities)
+      .filter(([ modifier, values ]) => !_.isEmpty(values))
+      .forEach(([ modifier, values ]) => {
+        const variantName = _.camelCase(`background-${modifier}`)
+        const utilities = flatten(
+          { [`.${e(`bg-${modifier}`)}`]: values },
+          { delimiter: '-', maxDepth: 2 },
+        )
 
-      addUtilities(utilities, variants(variantName, ['responsive']))
-    })
+        addUtilities(utilities, variants(variantName, ['responsive']))
+      })
   }
 }

package.json

@@ -2,7 +2,8 @@
   "name": "tailwindcss-background-extended",
   "version": "0.1.0",
   "scripts": {
-    "test": "jest"
+    "test": "jest",
+    "dev": "jest --watch"
   },
   "description": "This plugin adds all of the missing background utilities to Tailwind CSS.",
   "license": "MIT",

test.js

@@ -1,3 +1,5 @@
+const _ = require('lodash')
+
 const plugin = require('./index.js')
 const postcss = require('postcss')
 const tailwindcss = require('tailwindcss')
@@ -10,7 +12,7 @@ const generatePluginCss = (testConfig = {}, pluginOptions = {}) => {
     plugins: [ plugin(pluginOptions) ],
   }
   const postcssPlugins =[
-    tailwindcss({ ...sandboxConfig, ...testConfig }),
+    tailwindcss(_.merge(sandboxConfig, testConfig)),
   ]
 
   return postcss(postcssPlugins)
@@ -20,7 +22,7 @@ const generatePluginCss = (testConfig = {}, pluginOptions = {}) => {
 
 expect.extend({ toMatchCss: require('jest-matcher-css') })
 
-test('the plugin generates some utilities and responsive variants by default', () => {
+test('generates default utilities and responsive variants', () => {
   const testConfig = {}
   const expectedCss = `
     .bg-clip-border { background-clip: border-box }
@@ -76,3 +78,40 @@ test('variants can be customized', () => {
 
   return generatePluginCss(testConfig).then(css => expect(css).toMatchCss(expectedCss))
 })
+
+test('utilities can be customized', () => {
+  const testConfig = {
+    theme: {
+      backgroundImage: {
+        tailwindcss: "url('https://avatars0.githubusercontent.com/u/30317862')",
+      },
+    },
+  }
+  const expectedCss = `
+    .bg-image-tailwindcss { background-image: url('https://avatars0.githubusercontent.com/u/30317862') }
+
+    .bg-clip-border { background-clip: border-box }
+    .bg-clip-padding { background-clip: padding-box }
+    .bg-clip-content { background-clip: content-box }
+    .bg-clip-text { background-clip: text }
+
+    .bg-origin-border { background-origin: border-box }
+    .bg-origin-padding { background-origin: padding-box }
+    .bg-origin-content { background-origin: content-box }
+
+    @media (min-width: 640px) {
+      .sm\\:bg-image-tailwindcss { background-image: url('https://avatars0.githubusercontent.com/u/30317862') }
+
+      .sm\\:bg-clip-border { background-clip: border-box }
+      .sm\\:bg-clip-padding { background-clip: padding-box }
+      .sm\\:bg-clip-content { background-clip: content-box }
+      .sm\\:bg-clip-text { background-clip: text }
+
+      .sm\\:bg-origin-border { background-origin: border-box }
+      .sm\\:bg-origin-padding { background-origin: padding-box }
+      .sm\\:bg-origin-content { background-origin: content-box }
+    }
+  `
+
+  return generatePluginCss(testConfig).then(css => expect(css).toMatchCss(expectedCss))
+})