From c3c9cdf5d68972a72ea27656ba46d322d5ee58fb Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Mon, 4 Mar 2019 13:05:18 -0500
Subject: [PATCH 1/3] Support nested object for backgroundColor plugin

---
 __tests__/plugins/backgroundColor.test.js | 64 +++++++++++++++++++++++
 src/plugins/backgroundColor.js            | 15 +++++-
 2 files changed, 78 insertions(+), 1 deletion(-)
 create mode 100644 __tests__/plugins/backgroundColor.test.js

diff --git a/__tests__/plugins/backgroundColor.test.js b/__tests__/plugins/backgroundColor.test.js
new file mode 100644
index 000000000..489487da3
--- /dev/null
+++ b/__tests__/plugins/backgroundColor.test.js
@@ -0,0 +1,64 @@
+import _ from 'lodash'
+import escapeClassName from '../../src/util/escapeClassName'
+import plugin from '../../src/plugins/backgroundColor'
+
+test('colors can be a nested object', () => {
+  const addedUtilities = []
+
+  const config = {
+    theme: {
+      backgroundColor: {
+        purple: 'purple',
+        red: {
+          1: 'rgb(33,0,0)',
+          2: 'rgb(67,0,0)',
+          3: 'rgb(100,0,0)',
+        },
+        green: {
+          1: 'rgb(0,33,0)',
+          2: 'rgb(0,67,0)',
+          3: 'rgb(0,100,0)',
+        },
+        blue: {
+          1: 'rgb(0,0,33)',
+          2: 'rgb(0,0,67)',
+          3: 'rgb(0,0,100)',
+        },
+      },
+    },
+    variants: {
+      backgroundColor: ['responsive'],
+    },
+  }
+
+  const pluginApi = {
+    config: (key, defaultValue) => _.get(config, key, defaultValue),
+    e: escapeClassName,
+    addUtilities(utilities, variants) {
+      addedUtilities.push({
+        utilities,
+        variants,
+      })
+    },
+  }
+
+  plugin()(pluginApi)
+
+  expect(addedUtilities).toEqual([
+    {
+      utilities: {
+        '.bg-purple': { 'background-color': 'purple' },
+        '.bg-red-1': { 'background-color': 'rgb(33,0,0)' },
+        '.bg-red-2': { 'background-color': 'rgb(67,0,0)' },
+        '.bg-red-3': { 'background-color': 'rgb(100,0,0)' },
+        '.bg-green-1': { 'background-color': 'rgb(0,33,0)' },
+        '.bg-green-2': { 'background-color': 'rgb(0,67,0)' },
+        '.bg-green-3': { 'background-color': 'rgb(0,100,0)' },
+        '.bg-blue-1': { 'background-color': 'rgb(0,0,33)' },
+        '.bg-blue-2': { 'background-color': 'rgb(0,0,67)' },
+        '.bg-blue-3': { 'background-color': 'rgb(0,0,100)' },
+      },
+      variants: ['responsive'],
+    },
+  ])
+})
diff --git a/src/plugins/backgroundColor.js b/src/plugins/backgroundColor.js
index 49fca7f66..2a0e4de90 100644
--- a/src/plugins/backgroundColor.js
+++ b/src/plugins/backgroundColor.js
@@ -1,9 +1,22 @@
 import _ from 'lodash'
 
+function buildColorPalette(colors) {
+  const result = _(colors)
+    .flatMap((color, name) => {
+      return _.isObject(color)
+        ? _.map(color, (value, key) => [`${name}-${key}`, value])
+        : [[name, color]]
+    })
+    .fromPairs()
+    .value()
+
+  return result
+}
+
 export default function() {
   return function({ addUtilities, e, config }) {
     const utilities = _.fromPairs(
-      _.map(config('theme.backgroundColor'), (value, modifier) => {
+      _.map(buildColorPalette(config('theme.backgroundColor')), (value, modifier) => {
         return [
           `.${e(`bg-${modifier}`)}`,
           {

From bfde7e4d6ebb0d529477a29b8e0be097dfd2e869 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Mon, 4 Mar 2019 13:07:26 -0500
Subject: [PATCH 2/3] Support nested object for textColor plugin

---
 __tests__/plugins/textColor.test.js | 64 +++++++++++++++++++++++++++++
 src/plugins/backgroundColor.js      | 16 +-------
 src/plugins/textColor.js            |  3 +-
 3 files changed, 68 insertions(+), 15 deletions(-)
 create mode 100644 __tests__/plugins/textColor.test.js

diff --git a/__tests__/plugins/textColor.test.js b/__tests__/plugins/textColor.test.js
new file mode 100644
index 000000000..dc087a08b
--- /dev/null
+++ b/__tests__/plugins/textColor.test.js
@@ -0,0 +1,64 @@
+import _ from 'lodash'
+import escapeClassName from '../../src/util/escapeClassName'
+import plugin from '../../src/plugins/textColor'
+
+test('colors can be a nested object', () => {
+  const addedUtilities = []
+
+  const config = {
+    theme: {
+      textColor: {
+        purple: 'purple',
+        red: {
+          1: 'rgb(33,0,0)',
+          2: 'rgb(67,0,0)',
+          3: 'rgb(100,0,0)',
+        },
+        green: {
+          1: 'rgb(0,33,0)',
+          2: 'rgb(0,67,0)',
+          3: 'rgb(0,100,0)',
+        },
+        blue: {
+          1: 'rgb(0,0,33)',
+          2: 'rgb(0,0,67)',
+          3: 'rgb(0,0,100)',
+        },
+      },
+    },
+    variants: {
+      textColor: ['responsive'],
+    },
+  }
+
+  const pluginApi = {
+    config: (key, defaultValue) => _.get(config, key, defaultValue),
+    e: escapeClassName,
+    addUtilities(utilities, variants) {
+      addedUtilities.push({
+        utilities,
+        variants,
+      })
+    },
+  }
+
+  plugin()(pluginApi)
+
+  expect(addedUtilities).toEqual([
+    {
+      utilities: {
+        '.text-purple': { 'color': 'purple' },
+        '.text-red-1': { 'color': 'rgb(33,0,0)' },
+        '.text-red-2': { 'color': 'rgb(67,0,0)' },
+        '.text-red-3': { 'color': 'rgb(100,0,0)' },
+        '.text-green-1': { 'color': 'rgb(0,33,0)' },
+        '.text-green-2': { 'color': 'rgb(0,67,0)' },
+        '.text-green-3': { 'color': 'rgb(0,100,0)' },
+        '.text-blue-1': { 'color': 'rgb(0,0,33)' },
+        '.text-blue-2': { 'color': 'rgb(0,0,67)' },
+        '.text-blue-3': { 'color': 'rgb(0,0,100)' },
+      },
+      variants: ['responsive'],
+    },
+  ])
+})
diff --git a/src/plugins/backgroundColor.js b/src/plugins/backgroundColor.js
index 2a0e4de90..5f125336d 100644
--- a/src/plugins/backgroundColor.js
+++ b/src/plugins/backgroundColor.js
@@ -1,22 +1,10 @@
 import _ from 'lodash'
-
-function buildColorPalette(colors) {
-  const result = _(colors)
-    .flatMap((color, name) => {
-      return _.isObject(color)
-        ? _.map(color, (value, key) => [`${name}-${key}`, value])
-        : [[name, color]]
-    })
-    .fromPairs()
-    .value()
-
-  return result
-}
+import flattenColorPalette from '../util/flattenColorPalette'
 
 export default function() {
   return function({ addUtilities, e, config }) {
     const utilities = _.fromPairs(
-      _.map(buildColorPalette(config('theme.backgroundColor')), (value, modifier) => {
+      _.map(flattenColorPalette(config('theme.backgroundColor')), (value, modifier) => {
         return [
           `.${e(`bg-${modifier}`)}`,
           {
diff --git a/src/plugins/textColor.js b/src/plugins/textColor.js
index 7737a5e61..45e84b9eb 100644
--- a/src/plugins/textColor.js
+++ b/src/plugins/textColor.js
@@ -1,9 +1,10 @@
 import _ from 'lodash'
+import flattenColorPalette from '../util/flattenColorPalette'
 
 export default function() {
   return function({ addUtilities, e, config }) {
     const utilities = _.fromPairs(
-      _.map(config('theme.textColor'), (value, modifier) => {
+      _.map(flattenColorPalette(config('theme.textColor')), (value, modifier) => {
         return [
           `.${e(`text-${modifier}`)}`,
           {

From 9b07984144443e9d749da85185f7a58b71a41d1f Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Mon, 4 Mar 2019 13:10:14 -0500
Subject: [PATCH 3/3] Support nested object for borderColor plugin

---
 __tests__/plugins/borderColor.test.js | 64 +++++++++++++++++++++++++++
 __tests__/plugins/textColor.test.js   | 20 ++++-----
 src/plugins/borderColor.js            |  5 ++-
 src/util/flattenColorPalette.js       | 14 ++++++
 4 files changed, 92 insertions(+), 11 deletions(-)
 create mode 100644 __tests__/plugins/borderColor.test.js
 create mode 100644 src/util/flattenColorPalette.js

diff --git a/__tests__/plugins/borderColor.test.js b/__tests__/plugins/borderColor.test.js
new file mode 100644
index 000000000..00f8df529
--- /dev/null
+++ b/__tests__/plugins/borderColor.test.js
@@ -0,0 +1,64 @@
+import _ from 'lodash'
+import escapeClassName from '../../src/util/escapeClassName'
+import plugin from '../../src/plugins/borderColor'
+
+test('colors can be a nested object', () => {
+  const addedUtilities = []
+
+  const config = {
+    theme: {
+      borderColor: {
+        purple: 'purple',
+        red: {
+          1: 'rgb(33,0,0)',
+          2: 'rgb(67,0,0)',
+          3: 'rgb(100,0,0)',
+        },
+        green: {
+          1: 'rgb(0,33,0)',
+          2: 'rgb(0,67,0)',
+          3: 'rgb(0,100,0)',
+        },
+        blue: {
+          1: 'rgb(0,0,33)',
+          2: 'rgb(0,0,67)',
+          3: 'rgb(0,0,100)',
+        },
+      },
+    },
+    variants: {
+      borderColor: ['responsive'],
+    },
+  }
+
+  const pluginApi = {
+    config: (key, defaultValue) => _.get(config, key, defaultValue),
+    e: escapeClassName,
+    addUtilities(utilities, variants) {
+      addedUtilities.push({
+        utilities,
+        variants,
+      })
+    },
+  }
+
+  plugin()(pluginApi)
+
+  expect(addedUtilities).toEqual([
+    {
+      utilities: {
+        '.border-purple': { 'border-color': 'purple' },
+        '.border-red-1': { 'border-color': 'rgb(33,0,0)' },
+        '.border-red-2': { 'border-color': 'rgb(67,0,0)' },
+        '.border-red-3': { 'border-color': 'rgb(100,0,0)' },
+        '.border-green-1': { 'border-color': 'rgb(0,33,0)' },
+        '.border-green-2': { 'border-color': 'rgb(0,67,0)' },
+        '.border-green-3': { 'border-color': 'rgb(0,100,0)' },
+        '.border-blue-1': { 'border-color': 'rgb(0,0,33)' },
+        '.border-blue-2': { 'border-color': 'rgb(0,0,67)' },
+        '.border-blue-3': { 'border-color': 'rgb(0,0,100)' },
+      },
+      variants: ['responsive'],
+    },
+  ])
+})
diff --git a/__tests__/plugins/textColor.test.js b/__tests__/plugins/textColor.test.js
index dc087a08b..45ed5365d 100644
--- a/__tests__/plugins/textColor.test.js
+++ b/__tests__/plugins/textColor.test.js
@@ -47,16 +47,16 @@ test('colors can be a nested object', () => {
   expect(addedUtilities).toEqual([
     {
       utilities: {
-        '.text-purple': { 'color': 'purple' },
-        '.text-red-1': { 'color': 'rgb(33,0,0)' },
-        '.text-red-2': { 'color': 'rgb(67,0,0)' },
-        '.text-red-3': { 'color': 'rgb(100,0,0)' },
-        '.text-green-1': { 'color': 'rgb(0,33,0)' },
-        '.text-green-2': { 'color': 'rgb(0,67,0)' },
-        '.text-green-3': { 'color': 'rgb(0,100,0)' },
-        '.text-blue-1': { 'color': 'rgb(0,0,33)' },
-        '.text-blue-2': { 'color': 'rgb(0,0,67)' },
-        '.text-blue-3': { 'color': 'rgb(0,0,100)' },
+        '.text-purple': { color: 'purple' },
+        '.text-red-1': { color: 'rgb(33,0,0)' },
+        '.text-red-2': { color: 'rgb(67,0,0)' },
+        '.text-red-3': { color: 'rgb(100,0,0)' },
+        '.text-green-1': { color: 'rgb(0,33,0)' },
+        '.text-green-2': { color: 'rgb(0,67,0)' },
+        '.text-green-3': { color: 'rgb(0,100,0)' },
+        '.text-blue-1': { color: 'rgb(0,0,33)' },
+        '.text-blue-2': { color: 'rgb(0,0,67)' },
+        '.text-blue-3': { color: 'rgb(0,0,100)' },
       },
       variants: ['responsive'],
     },
diff --git a/src/plugins/borderColor.js b/src/plugins/borderColor.js
index d5af0be69..143963c98 100644
--- a/src/plugins/borderColor.js
+++ b/src/plugins/borderColor.js
@@ -1,9 +1,12 @@
 import _ from 'lodash'
+import flattenColorPalette from '../util/flattenColorPalette'
 
 export default function() {
   return function({ addUtilities, e, config }) {
+    const colors = flattenColorPalette(config('theme.borderColor'))
+
     const utilities = _.fromPairs(
-      _.map(_.omit(config('theme.borderColor'), 'default'), (value, modifier) => {
+      _.map(_.omit(colors, 'default'), (value, modifier) => {
         return [
           `.${e(`border-${modifier}`)}`,
           {
diff --git a/src/util/flattenColorPalette.js b/src/util/flattenColorPalette.js
new file mode 100644
index 000000000..4faa88a92
--- /dev/null
+++ b/src/util/flattenColorPalette.js
@@ -0,0 +1,14 @@
+import _ from 'lodash'
+
+export default function flattenColorPalette(colors) {
+  const result = _(colors)
+    .flatMap((color, name) => {
+      return _.isObject(color)
+        ? _.map(color, (value, key) => [`${name}-${key}`, value])
+        : [[name, color]]
+    })
+    .fromPairs()
+    .value()
+
+  return result
+}