From 829576693af255f01a1255e1773de4ff043a5957 Mon Sep 17 00:00:00 2001
From: Nestor Vera <nestorvera@me.com>
Date: Mon, 22 Jan 2018 21:17:30 +0100
Subject: [PATCH] Allow users to set their own backgroundSize

---
 defaultConfig.stub.js            | 22 ++++++++++++++++++++++
 src/generators/backgroundSize.js | 19 +++++++------------
 2 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/defaultConfig.stub.js b/defaultConfig.stub.js
index d2e5ab7f8..532375bb6 100644
--- a/defaultConfig.stub.js
+++ b/defaultConfig.stub.js
@@ -360,6 +360,28 @@ module.exports = {
   backgroundColors: colors,
 
 
+  /*
+  |-----------------------------------------------------------------------------
+  | Background sizes              https://tailwindcss.com/docs/background-color
+  |-----------------------------------------------------------------------------
+  |
+  | Here is where you define your background sizes. These can take one or two
+  | values depending on your needs. The first value will set the image's width
+  | while the second will set its height. Using just one will be the same as
+  | setting the image's height to auto. For multiple backgrounds, use comma
+  | separated values to define the size of each one of them.
+  |
+  | Class name: .bg-{size}
+  |
+  */
+
+  backgroundSize: {
+    'auto': 'auto',
+    'cover': 'cover',
+    'contain': 'contain',
+  },
+
+
   /*
   |-----------------------------------------------------------------------------
   | Border widths                     https://tailwindcss.com/docs/border-width
diff --git a/src/generators/backgroundSize.js b/src/generators/backgroundSize.js
index 998c6b12e..44f379d9c 100644
--- a/src/generators/backgroundSize.js
+++ b/src/generators/backgroundSize.js
@@ -1,15 +1,10 @@
-import defineClasses from '../util/defineClasses'
+import _ from 'lodash'
+import defineClass from '../util/defineClass'
 
-export default function() {
-  return defineClasses({
-    'bg-auto': {
-      'background-size': 'auto',
-    },
-    'bg-cover': {
-      'background-size': 'cover',
-    },
-    'bg-contain': {
-      'background-size': 'contain',
-    },
+export default function({ backgroundSizes }) {
+  return _.map(backgroundSizes, (size, className) => {
+    return defineClass(`bg-${className}`, {
+      'background-size': size,
+    })
   })
 }