From 25f87654edcb9b420d48cf41b1fc6a5654e07b5a Mon Sep 17 00:00:00 2001
From: Chris Morrell <chris@cmorrell.com>
Date: Thu, 1 Mar 2018 22:17:27 -0700
Subject: [PATCH 1/2] config() concept

---
 __tests__/processPlugins.test.js | 75 +++++++++++++++++++++++++++++++-
 src/util/processPlugins.js       | 17 +++++++-
 2 files changed, 89 insertions(+), 3 deletions(-)

diff --git a/__tests__/processPlugins.test.js b/__tests__/processPlugins.test.js
index 74ceae9f2ab6..5c41fc936f3f 100644
--- a/__tests__/processPlugins.test.js
+++ b/__tests__/processPlugins.test.js
@@ -200,14 +200,14 @@ test('plugins can access the current config', () => {
       xl: '1200px',
     },
     plugins: [
-      function({ rule, atRule, addComponents, config }) {
+      function({ rule, atRule, addComponents, customUserConfig }) {
         const containerClasses = [
           rule('.container', {
             width: '100%',
           }),
         ]
 
-        _.forEach(config.screens, breakpoint => {
+        _.forEach(customUserConfig.screens, breakpoint => {
           const mediaQuery = atRule(`@media (min-width: ${breakpoint})`, [
             rule('.container', { 'max-width': breakpoint }),
           ])
@@ -246,3 +246,74 @@ test('plugins can access the current config', () => {
     }
   `)
 })
+
+test('plugins can pull values from current config with config()', () => {
+  const [components, utilities] = processPlugins({
+    colors: {
+      'purple': 'rebeccapurple',
+    },
+    plugins: [
+      function({ rule, addComponents, config }) {
+        const color = config('#9900cc', 'colors.purple')
+        addComponents([
+          rule('.prince-shadow', {
+            'box-shadow': `0 2px 4px 0 ${color}`,
+          }),
+        ])
+      },
+    ],
+  })
+
+  expect(utilities.length).toBe(0)
+  expect(css(components)).toMatchCss(`
+    .prince-shadow {
+      box-shadow: 0 2px 4px 0 rebeccapurple
+    }
+  `)
+})
+
+test('plugins can pull values from default config with config()', () => {
+  const [components, utilities] = processPlugins({
+    colors: {},
+    plugins: [
+      function({ rule, addComponents, config }) {
+        const color = config('#9900cc', 'colors.purple')
+        addComponents([
+          rule('.prince-shadow', {
+            'box-shadow': `0 2px 4px 0 ${color}`,
+          }),
+        ])
+      },
+    ],
+  })
+
+  expect(utilities.length).toBe(0)
+  expect(css(components)).toMatchCss(`
+    .prince-shadow {
+      box-shadow: 0 2px 4px 0 #9561e2
+    }
+  `)
+})
+
+test('plugins can fall back on default value with config()', () => {
+  const [components, utilities] = processPlugins({
+    colors: {},
+    plugins: [
+      function({ rule, addComponents, config }) {
+        const color = config('#9900cc', 'hey_this_changed_in_v4.purple')
+        addComponents([
+          rule('.prince-shadow', {
+            'box-shadow': `0 2px 4px 0 ${color}`,
+          }),
+        ])
+      },
+    ],
+  })
+
+  expect(utilities.length).toBe(0)
+  expect(css(components)).toMatchCss(`
+    .prince-shadow {
+      box-shadow: 0 2px 4px 0 #9900cc
+    }
+  `)
+})
diff --git a/src/util/processPlugins.js b/src/util/processPlugins.js
index bf68cad3425c..153cc8903678 100644
--- a/src/util/processPlugins.js
+++ b/src/util/processPlugins.js
@@ -3,6 +3,8 @@ import postcss from 'postcss'
 import escapeClassName from '../util/escapeClassName'
 import wrapWithVariants from '../util/wrapWithVariants'
 
+const defaultConfig = require('../../defaultConfig')();
+
 function defineRule(selector, properties) {
   const decls = _.map(properties, (value, property) => {
     return postcss.decl({
@@ -29,9 +31,22 @@ export default function(config) {
   const pluginComponents = []
   const pluginUtilities = []
 
+  const tryConfig = (defaultValue, ...paths) => {
+    for (let source of [config, defaultConfig]) {
+      for (let path of paths) {
+        if (_.has(source, path)) {
+          return _.get(source, path)
+        }
+      }
+    }
+
+    return defaultValue
+  }
+
   config.plugins.forEach(plugin => {
     plugin({
-      config,
+      customUserConfig: config,
+      config: tryConfig,
       rule: defineRule,
       atRule: defineAtRule,
       e: escapeClassName,

From 87c1ef22113df6dbe3904dd54ab2019517eea308 Mon Sep 17 00:00:00 2001
From: Chris Morrell <chris@cmorrell.com>
Date: Thu, 1 Mar 2018 22:24:54 -0700
Subject: [PATCH 2/2] Add'l test case

---
 __tests__/processPlugins.test.js | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/__tests__/processPlugins.test.js b/__tests__/processPlugins.test.js
index 5c41fc936f3f..b6a9fb18c90e 100644
--- a/__tests__/processPlugins.test.js
+++ b/__tests__/processPlugins.test.js
@@ -317,3 +317,29 @@ test('plugins can fall back on default value with config()', () => {
     }
   `)
 })
+
+test('config() helper tries all paths provided until finding a match', () => {
+  const [components, utilities] = processPlugins({
+    colors: {},
+    specialColors: {
+      rebeccaPurple: 'rebeccapurple'
+    },
+    plugins: [
+      function({ rule, addComponents, config }) {
+        const color = config('#9900cc', 'colors.purple', 'specialColors.rebeccaPurple')
+        addComponents([
+          rule('.prince-shadow', {
+            'box-shadow': `0 2px 4px 0 ${color}`,
+          }),
+        ])
+      },
+    ],
+  })
+
+  expect(utilities.length).toBe(0)
+  expect(css(components)).toMatchCss(`
+    .prince-shadow {
+      box-shadow: 0 2px 4px 0 rebeccapurple
+    }
+  `)
+})