Add support for "tailwind" function to look up config values

package.json

@@ -39,6 +39,7 @@
     "normalize.css": "^6.0.0",
     "postcss": "^6.0.9",
     "postcss-import": "^11.0.0",
+    "postcss-functions": "^3.0.0",
     "stylefmt": "^6.0.0",
     "suitcss-base": "^3.0.0"
   },

src/generators/backgroundColors.js

@@ -1,10 +1,9 @@
 import _ from 'lodash'
 import defineClass from '../util/defineClass'
-import normalizeColorList from '../util/normalizeColorList'
 import hoverable from '../util/hoverable'
 
-export default function ({ colors, backgrounds }) {
-  return hoverable(_.map(normalizeColorList(backgrounds.colors, colors), (color, className) => {
+export default function ({ backgrounds }) {
+  return hoverable(_.map(backgrounds.colors, (color, className) => {
     return defineClass(`bg-${className}`, {
       'background-color': color,
     })

src/generators/borderColors.js

@@ -1,12 +1,9 @@
 import _ from 'lodash'
 import defineClass from '../util/defineClass'
-import normalizeColorList from '../util/normalizeColorList'
 import hoverable from '../util/hoverable'
 
 export default function ({ colors, borders }) {
-  const borderColors = normalizeColorList(borders.colors, colors)
-
-  return hoverable(_.map(borderColors, (color, className) => {
+  return hoverable(_.map(borders.colors, (color, className) => {
     return defineClass(`border-${className}`, {
       'border-color': color,
     })

src/generators/textColors.js

@@ -1,10 +1,9 @@
 import _ from 'lodash'
 import defineClass from '../util/defineClass'
-import normalizeColorList from '../util/normalizeColorList'
 import hoverable from '../util/hoverable'
 
 export default function ({ colors, text }) {
-  return hoverable(_.map(normalizeColorList(text.colors, colors), (color, modifier) => {
+  return hoverable(_.map(text.colors, (color, modifier) => {
     return defineClass(`text-${modifier}`, {
       'color': color,
     })

src/index.js

@@ -6,8 +6,9 @@ import stylefmt from 'stylefmt'
 import defaultConfig from './defaultConfig'
 import mergeConfig from './util/mergeConfig'
 
-import generateUtilities from './lib/generateUtilities'
 import substituteResetAtRule from './lib/substituteResetAtRule'
+import evaluateTailwindFunctions from './lib/evaluateTailwindFunctions'
+import generateUtilities from './lib/generateUtilities'
 import substituteHoverableAtRules from './lib/substituteHoverableAtRules'
 import substituteResponsiveAtRules from './lib/substituteResponsiveAtRules'
 import substituteBreakpointAtRules from './lib/substituteBreakpointAtRules'
@@ -18,6 +19,7 @@ const plugin = postcss.plugin('tailwind', (options = {}) => {
 
   return postcss([
     substituteResetAtRule(config),
+    evaluateTailwindFunctions(config),
     generateUtilities(config),
     substituteHoverableAtRules(config),
     substituteResponsiveAtRules(config),

src/lib/evaluateTailwindFunctions.js

@@ -0,0 +1,12 @@
+import _ from 'lodash'
+import functions from 'postcss-functions'
+
+export default function(options) {
+  return functions({
+    functions: {
+      tailwind: function (path) {
+        return _.get(options, _.trim(path, `'"`))
+      }
+    }
+  })
+}

src/util/mergeConfig.js

@@ -1,4 +1,6 @@
 import _ from 'lodash'
+import normalizeColorList from './normalizeColorList'
+import findColor from './findColor'
 
 const configTemplate = {
   breakpoints: null,
@@ -63,7 +65,19 @@ function appendConfig(base, appends) {
   })
 }
 
+function normalizeConfigColors(config, colorPalette) {
+  const cloned = _.cloneDeep(config)
+
+  cloned.text.colors = normalizeColorList(cloned.text.colors, colorPalette)
+  cloned.borders.defaults.color = findColor(colorPalette, cloned.borders.defaults.color)
+  cloned.borders.colors = normalizeColorList(cloned.borders.colors, colorPalette)
+  cloned.backgrounds.colors = normalizeColorList(cloned.backgrounds.colors, colorPalette)
+
+  return cloned
+}
+
 export default function mergeConfig(base, other) {
   const replaced = replaceDefaults(configTemplate, base, other)
-  return appendConfig(replaced, _.get(other, 'extend', {}))
+  const config = appendConfig(replaced, _.get(other, 'extend', {}))
+  return normalizeConfigColors(config, config.colors)
 }

yarn.lock

@@ -2872,7 +2872,7 @@ oauth-sign@~0.8.1:
   version "0.8.2"
   resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43"
 
-object-assign@^4.0.1, object-assign@^4.1.0:
+object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
 
@@ -3065,6 +3065,15 @@ plur@^2.0.0, plur@^2.1.2:
   dependencies:
     irregular-plurals "^1.0.0"
 
+postcss-functions@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-functions/-/postcss-functions-3.0.0.tgz#0e94d01444700a481de20de4d55fb2640564250e"
+  dependencies:
+    glob "^7.1.2"
+    object-assign "^4.1.1"
+    postcss "^6.0.9"
+    postcss-value-parser "^3.3.0"
+
 postcss-import@^11.0.0:
   version "11.0.0"
   resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-11.0.0.tgz#a962e2df82d3bc5a6da6a386841747204f41ef5b"