Recursive flatten color and backgroundImage

__tests__/flattenColorPalette.test.js

@@ -43,3 +43,43 @@ test('it flattens nested color objects', () => {
     'blue-3': 'rgb(0,0,100)',
   })
 })
+
+test('it recursively flattens nested color objects', () => {
+  expect(
+    flattenColorPalette({
+      brand: {
+        primary: {
+          DEFAULT: 'rgb(100,0,0)',
+          50: 'rgba(100,0,0,.5)',
+        },
+      },
+      theme: {
+        default: {
+          background: {
+            DEFAULT: 'rgb(0,0,0)',
+            50: 'rgba(0,0,0,.5)',
+          },
+        },
+        'not-default': {
+          background: {
+            DEFAULT: 'rgb(255,255,255)',
+            50: 'rgba(255,255,255,.5)',
+            'keep-going': {
+              DEFAULT: 'rgb(128,128,128)',
+              50: 'rgba(128,128,128,.5)',
+            },
+          },
+        },
+      },
+    })
+  ).toEqual({
+    'brand-primary': 'rgb(100,0,0)',
+    'brand-primary-50': 'rgba(100,0,0,.5)',
+    'theme-default-background': 'rgb(0,0,0)',
+    'theme-default-background-50': 'rgba(0,0,0,.5)',
+    'theme-not-default-background': 'rgb(255,255,255)',
+    'theme-not-default-background-50': 'rgba(255,255,255,.5)',
+    'theme-not-default-background-keep-going': 'rgb(128,128,128)',
+    'theme-not-default-background-keep-going-50': 'rgba(128,128,128,.5)',
+  })
+})

__tests__/plugins/backgroundImage.test.js

@@ -0,0 +1,115 @@
+import invokePlugin from '../util/invokePlugin'
+import plugin from '../../src/plugins/backgroundImage'
+
+test('it creates background-image utilities', () => {
+  const config = {
+    target: 'relaxed',
+    theme: {
+      backgroundImage: {
+        hero: 'url("./hero.png")',
+      },
+    },
+    variants: {
+      backgroundImage: [],
+    },
+  }
+
+  const { utilities } = invokePlugin(plugin(), config)
+
+  expect(utilities).toEqual([
+    [
+      {
+        '.bg-hero': {
+          'background-image': 'url("./hero.png")',
+        },
+      },
+      [],
+    ],
+  ])
+})
+
+test('it creates background-image utilities in ie11 mode', () => {
+  const config = {
+    target: 'ie11',
+    theme: {
+      backgroundImage: {
+        hero: 'url("./hero.png")',
+      },
+    },
+    variants: {
+      backgroundImage: [],
+    },
+  }
+
+  const { utilities } = invokePlugin(plugin(), config)
+
+  expect(utilities).toEqual([
+    [
+      {
+        '.bg-hero': {
+          'background-image': 'url("./hero.png")',
+        },
+      },
+      [],
+    ],
+  ])
+})
+
+test('it creates background-image utilities recursively', () => {
+  const config = {
+    target: 'relaxed',
+    theme: {
+      backgroundImage: {
+        theme: {
+          default: {
+            background: {
+              DEFAULT: 'url("./theme-default-background.png")',
+              alt: 'url("./theme-default-background-alt.png")',
+            },
+          },
+          'not-default': {
+            background: {
+              DEFAULT: 'url("./theme-not-default-background.png")',
+              alt: 'url("./theme-not-default-background-alt.png")',
+              'keep-going': {
+                DEFAULT: 'url("./theme-not-default-background-keep-going.png")',
+                alt: 'url("./theme-not-default-background-keep-going-alt.png")',
+              },
+            },
+          },
+        },
+      },
+    },
+    variants: {
+      backgroundImage: [],
+    },
+  }
+
+  const { utilities } = invokePlugin(plugin(), config)
+
+  expect(utilities).toEqual([
+    [
+      {
+        '.bg-theme-default-background': {
+          'background-image': 'url("./theme-default-background.png")',
+        },
+        '.bg-theme-default-background-alt': {
+          'background-image': 'url("./theme-default-background-alt.png")',
+        },
+        '.bg-theme-not-default-background': {
+          'background-image': 'url("./theme-not-default-background.png")',
+        },
+        '.bg-theme-not-default-background-alt': {
+          'background-image': 'url("./theme-not-default-background-alt.png")',
+        },
+        '.bg-theme-not-default-background-keep-going': {
+          'background-image': 'url("./theme-not-default-background-keep-going.png")',
+        },
+        '.bg-theme-not-default-background-keep-going-alt': {
+          'background-image': 'url("./theme-not-default-background-keep-going-alt.png")',
+        },
+      },
+      [],
+    ],
+  ])
+})

src/plugins/backgroundImage.js

@@ -1,10 +1,11 @@
 import _ from 'lodash'
+import flattenColorPalette from '../util/flattenColorPalette'
 import nameClass from '../util/nameClass'
 
 export default function () {
   return function ({ addUtilities, theme, variants }) {
     const utilities = _.fromPairs(
-      _.map(theme('backgroundImage'), (value, modifier) => {
+      _.map(flattenColorPalette(theme('backgroundImage')), (value, modifier) => {
         return [
           nameClass('bg', modifier),
           {

src/util/flattenColorPalette.js

@@ -7,7 +7,7 @@ export default function flattenColorPalette(colors) {
         return [[name, color]]
       }
 
-      return _.map(color, (value, key) => {
+      return _.map(flattenColorPalette(color), (value, key) => {
         const suffix = key === 'DEFAULT' ? '' : `-${key}`
         return [`${name}${suffix}`, value]
       })