Port backgroundSize module to plugin

src/defaultPlugins.js

@@ -1,3 +1,4 @@
+import backgroundSize from './plugins/backgroundSize'
 import borderCollapse from './plugins/borderCollapse'
 import borderColors from './plugins/borderColors'
 import borderRadius from './plugins/borderRadius'
@@ -44,6 +45,7 @@ import zIndex from './plugins/zIndex'
 
 export default function (config) {
   return [
+    config.modules.backgroundSize === false ? () => {} : backgroundSize(),
     config.modules.borderCollapse === false ? () => {} : borderCollapse(),
     config.modules.borderColors === false ? () => {} : borderColors(),
     config.modules.borderRadius === false ? () => {} : borderRadius(),

src/generators/backgroundSize.js

@@ -1,10 +0,0 @@
-import _ from 'lodash'
-import defineClass from '../util/defineClass'
-
-export default function({ backgroundSize }) {
-  return _.map(backgroundSize, (size, className) => {
-    return defineClass(`bg-${className}`, {
-      'background-size': size,
-    })
-  })
-}

src/plugins/backgroundSize.js

@@ -0,0 +1,13 @@
+import _ from 'lodash'
+
+export default function () {
+  return function ({ addUtilities, config, e }) {
+    const utilities = _.fromPairs(_.map(config('backgroundSize'), (value, modifier) => {
+      return [`.${e(`bg-${modifier}`)}`, {
+        'background-size': value,
+      }]
+    }))
+
+    addUtilities(utilities, config('modules.opacity'))
+  }
+}

src/utilityModules.js

@@ -4,7 +4,6 @@ import backgroundAttachment from './generators/backgroundAttachment'
 import backgroundColors from './generators/backgroundColors'
 import backgroundPosition from './generators/backgroundPosition'
 import backgroundRepeat from './generators/backgroundRepeat'
-import backgroundSize from './generators/backgroundSize'
 
 export default [
   { name: 'lists', generator: lists },
@@ -13,5 +12,4 @@ export default [
   { name: 'backgroundColors', generator: backgroundColors },
   { name: 'backgroundPosition', generator: backgroundPosition },
   { name: 'backgroundRepeat', generator: backgroundRepeat },
-  { name: 'backgroundSize', generator: backgroundSize },
 ]