From 6190fe52d4b687e88234d8d7426e52f92c4dd9c5 Mon Sep 17 00:00:00 2001
From: David Hemphill <davidlee.hemphill@gmail.com>
Date: Tue, 2 Apr 2019 15:23:40 -0500
Subject: [PATCH] Fix fill color utility generation

---
 .prettierrc                    | 13 ++++++
 __tests__/plugins/fill.test.js | 74 ++++++++++++++++++++++++++++++++++
 src/plugins/fill.js            |  3 +-
 3 files changed, 89 insertions(+), 1 deletion(-)
 create mode 100644 .prettierrc
 create mode 100644 __tests__/plugins/fill.test.js

diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 000000000..cd28a056a
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,13 @@
+{
+  "arrowParens": "avoid",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "printWidth": 100,
+  "proseWrap": "preserve",
+  "requirePragma": false,
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "useTabs": false
+}
diff --git a/__tests__/plugins/fill.test.js b/__tests__/plugins/fill.test.js
new file mode 100644
index 000000000..2276e72ef
--- /dev/null
+++ b/__tests__/plugins/fill.test.js
@@ -0,0 +1,74 @@
+import _ from 'lodash'
+import escapeClassName from '../../src/util/escapeClassName'
+import plugin from '../../src/plugins/fill'
+
+test('colors can be a nested object', () => {
+  const addedUtilities = []
+
+  const config = {
+    theme: {
+      fill: {
+        purple: 'purple',
+        white: {
+          25: 'rgba(255,255,255,.25)',
+          50: 'rgba(255,255,255,.5)',
+          75: 'rgba(255,255,255,.75)',
+          default: '#fff',
+        },
+        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: {
+      fill: ['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: {
+        '.fill-purple': { fill: 'purple' },
+        '.fill-white-25': { fill: 'rgba(255,255,255,.25)' },
+        '.fill-white-50': { fill: 'rgba(255,255,255,.5)' },
+        '.fill-white-75': { fill: 'rgba(255,255,255,.75)' },
+        '.fill-white': { fill: '#fff' },
+        '.fill-red-1': { fill: 'rgb(33,0,0)' },
+        '.fill-red-2': { fill: 'rgb(67,0,0)' },
+        '.fill-red-3': { fill: 'rgb(100,0,0)' },
+        '.fill-green-1': { fill: 'rgb(0,33,0)' },
+        '.fill-green-2': { fill: 'rgb(0,67,0)' },
+        '.fill-green-3': { fill: 'rgb(0,100,0)' },
+        '.fill-blue-1': { fill: 'rgb(0,0,33)' },
+        '.fill-blue-2': { fill: 'rgb(0,0,67)' },
+        '.fill-blue-3': { fill: 'rgb(0,0,100)' },
+      },
+      variants: ['responsive'],
+    },
+  ])
+})
diff --git a/src/plugins/fill.js b/src/plugins/fill.js
index d975cfd0d..6361410dc 100644
--- a/src/plugins/fill.js
+++ b/src/plugins/fill.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.fill'), (value, modifier) => {
+      _.map(flattenColorPalette(config('theme.fill')), (value, modifier) => {
         return [
           `.${e(`fill-${modifier}`)}`,
           {