From c39ed44c13403c59ac8a2548c29ed3787ec830fb Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Wed, 9 Jan 2019 21:50:03 -0500
Subject: [PATCH] Port backgroundColors module to plugin

---
 src/defaultPlugins.js              |  2 ++
 src/generators/backgroundColors.js | 10 ----------
 src/plugins/backgroundColors.js    | 13 +++++++++++++
 src/utilityModules.js              |  2 --
 4 files changed, 15 insertions(+), 12 deletions(-)
 delete mode 100644 src/generators/backgroundColors.js
 create mode 100644 src/plugins/backgroundColors.js

diff --git a/src/defaultPlugins.js b/src/defaultPlugins.js
index e4a37dc85..d7b6333d7 100644
--- a/src/defaultPlugins.js
+++ b/src/defaultPlugins.js
@@ -1,3 +1,4 @@
+import backgroundColors from './plugins/backgroundColors'
 import backgroundPosition from './plugins/backgroundPosition'
 import backgroundRepeat from './plugins/backgroundRepeat'
 import backgroundSize from './plugins/backgroundSize'
@@ -47,6 +48,7 @@ import zIndex from './plugins/zIndex'
 
 export default function (config) {
   return [
+    config.modules.backgroundColors === false ? () => {} : backgroundColors(),
     config.modules.backgroundPosition === false ? () => {} : backgroundPosition(),
     config.modules.backgroundRepeat === false ? () => {} : backgroundRepeat(),
     config.modules.backgroundSize === false ? () => {} : backgroundSize(),
diff --git a/src/generators/backgroundColors.js b/src/generators/backgroundColors.js
deleted file mode 100644
index 955a072be..000000000
--- a/src/generators/backgroundColors.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import _ from 'lodash'
-import defineClass from '../util/defineClass'
-
-export default function({ backgroundColors }) {
-  return _.map(backgroundColors, (color, className) => {
-    return defineClass(`bg-${className}`, {
-      'background-color': color,
-    })
-  })
-}
diff --git a/src/plugins/backgroundColors.js b/src/plugins/backgroundColors.js
new file mode 100644
index 000000000..767213c92
--- /dev/null
+++ b/src/plugins/backgroundColors.js
@@ -0,0 +1,13 @@
+import _ from 'lodash'
+
+export default function () {
+  return function ({ addUtilities, config, e }) {
+    const utilities = _.fromPairs(_.map(config('backgroundColors'), (value, modifier) => {
+      return [`.${e(`bg-${modifier}`)}`, {
+        'background-color': value,
+      }]
+    }))
+
+    addUtilities(utilities, config('modules.backgroundColors'))
+  }
+}
diff --git a/src/utilityModules.js b/src/utilityModules.js
index d9ff1ae75..880f4a904 100644
--- a/src/utilityModules.js
+++ b/src/utilityModules.js
@@ -1,11 +1,9 @@
 import lists from './generators/lists'
 import appearance from './generators/appearance'
 import backgroundAttachment from './generators/backgroundAttachment'
-import backgroundColors from './generators/backgroundColors'
 
 export default [
   { name: 'lists', generator: lists },
   { name: 'appearance', generator: appearance },
   { name: 'backgroundAttachment', generator: backgroundAttachment },
-  { name: 'backgroundColors', generator: backgroundColors },
 ]