From 53ca284553fad5373e4d3df232b5dd9178f0c50b Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Fri, 1 Mar 2019 08:35:24 -0500
Subject: [PATCH] Remove config() function in favor of theme()

The only reason the config() helper function existed was to access your design tokens in your CSS, like:

```css
.foo {
  color: config('colors.blue')
}
```

Now that design tokens are nested in the new `theme` section, using the `config()` function is a bit more verbose:

```css
.foo {
  color: config('theme.colors.blue')
}
```

This PR removes the `config()` function in favor of a new `theme()` function that is already scoped to the `theme` section of the config:

```css
.foo {
  color: theme('colors.blue')
}
```

I can't think of any reason at all why you would need to access the non-theme values in your config from your CSS (like enabled variants, or your list of plugins), and the word `theme` is much more expressive than `config`, so I think this is a worthwhile change.
---
 __tests__/fixtures/tailwind-input.css                  |  2 +-
 .../{configFunction.test.js => themeFunction.test.js}  | 10 +++++-----
 src/lib/evaluateTailwindFunctions.js                   |  4 ++--
 src/plugins/css/preflight.css                          |  2 +-
 4 files changed, 9 insertions(+), 9 deletions(-)
 rename __tests__/{configFunction.test.js => themeFunction.test.js} (82%)

diff --git a/__tests__/fixtures/tailwind-input.css b/__tests__/fixtures/tailwind-input.css
index 6095e0b50..fcfd51935 100644
--- a/__tests__/fixtures/tailwind-input.css
+++ b/__tests__/fixtures/tailwind-input.css
@@ -7,6 +7,6 @@
 @responsive {
   .example {
     @apply .font-bold;
-    color: config('theme.colors.red');
+    color: theme('colors.red');
   }
 }
diff --git a/__tests__/configFunction.test.js b/__tests__/themeFunction.test.js
similarity index 82%
rename from __tests__/configFunction.test.js
rename to __tests__/themeFunction.test.js
index a355e3c3b..70e889888 100644
--- a/__tests__/configFunction.test.js
+++ b/__tests__/themeFunction.test.js
@@ -5,9 +5,9 @@ function run(input, opts = {}) {
   return postcss([plugin(opts)]).process(input, { from: undefined })
 }
 
-test('it looks up values in the config using dot notation', () => {
+test('it looks up values in the theme using dot notation', () => {
   const input = `
-    .banana { color: config('theme.colors.yellow'); }
+    .banana { color: theme('colors.yellow'); }
   `
 
   const output = `
@@ -28,7 +28,7 @@ test('it looks up values in the config using dot notation', () => {
 
 test('quotes are optional around the lookup path', () => {
   const input = `
-    .banana { color: config(theme.colors.yellow); }
+    .banana { color: theme(colors.yellow); }
   `
 
   const output = `
@@ -49,7 +49,7 @@ test('quotes are optional around the lookup path', () => {
 
 test('a default value can be provided', () => {
   const input = `
-    .cookieMonster { color: config('theme.colors.blue', #0000ff); }
+    .cookieMonster { color: theme('colors.blue', #0000ff); }
   `
 
   const output = `
@@ -70,7 +70,7 @@ test('a default value can be provided', () => {
 
 test('quotes are preserved around default values', () => {
   const input = `
-    .heading { font-family: config('theme.fonts.sans', "Helvetica Neue"); }
+    .heading { font-family: theme('fonts.sans', "Helvetica Neue"); }
   `
 
   const output = `
diff --git a/src/lib/evaluateTailwindFunctions.js b/src/lib/evaluateTailwindFunctions.js
index c071fd800..7e08033b3 100644
--- a/src/lib/evaluateTailwindFunctions.js
+++ b/src/lib/evaluateTailwindFunctions.js
@@ -4,8 +4,8 @@ import functions from 'postcss-functions'
 export default function(config) {
   return functions({
     functions: {
-      config: (path, defaultValue) => {
-        return _.get(config, _.trim(path, `'"`), defaultValue)
+      theme: (path, defaultValue) => {
+        return _.get(config.theme, _.trim(path, `'"`), defaultValue)
       },
     },
   })
diff --git a/src/plugins/css/preflight.css b/src/plugins/css/preflight.css
index 24d4dcc20..c9d385195 100644
--- a/src/plugins/css/preflight.css
+++ b/src/plugins/css/preflight.css
@@ -89,7 +89,7 @@ ul {
 *::after {
   border-width: 0;
   border-style: solid;
-  border-color: config('theme.borderColor.default', currentColor);
+  border-color: theme('borderColor.default', currentColor);
 }
 
 /**