Register config file with Webpack for watching

This change tells Webpack (for those using it) that the config file
used should be tracked as a dependency and that the CSS should be
re-compiled if that config file changes.

It's careful to make sure the config file is loaded fresh every single
time to avoid weird caching issues.

Author: adamwathan

docs/tailwind.js

@@ -1,4 +1,5 @@
-var config = require('../defaultConfig')
+var config = require('../lib/index').defaultConfig()
+
 
 config.colors = {
   ...config.colors,

src/index.js

@@ -5,6 +5,7 @@ import _ from 'lodash'
 import postcss from 'postcss'
 import stylefmt from 'stylefmt'
 
+import registerConfigAsDependency from './lib/registerConfigAsDependency'
 import substitutePreflightAtRule from './lib/substitutePreflightAtRule'
 import evaluateTailwindFunctions from './lib/evaluateTailwindFunctions'
 import generateUtilities from './lib/generateUtilities'
@@ -15,23 +16,30 @@ import substituteScreenAtRules from './lib/substituteScreenAtRules'
 import substituteClassApplyAtRules from './lib/substituteClassApplyAtRules'
 
 const plugin = postcss.plugin('tailwind', (config) => {
-  if (_.isUndefined(config)) {
-    config = require('../defaultConfig')
+  const plugins = []
+
+  if (! _.isUndefined(config)) {
+    plugins.push(registerConfigAsDependency(path.resolve(config)))
   }
 
-  if (_.isString(config)) {
-    config = require(path.resolve(config))
+  const lazyConfig = () => {
+    if (_.isUndefined(config)) {
+      return require('../defaultConfig')
+    }
+
+    delete require.cache[require.resolve(path.resolve(config))]
+    return require(path.resolve(config))
   }
 
-  return postcss([
-    substitutePreflightAtRule(config),
-    evaluateTailwindFunctions(config),
-    generateUtilities(config),
-    substituteHoverableAtRules(config),
-    substituteFocusableAtRules(config),
-    substituteResponsiveAtRules(config),
-    substituteScreenAtRules(config),
-    substituteClassApplyAtRules(config),
+  return postcss(...plugins, ...[
+    substitutePreflightAtRule(lazyConfig),
+    evaluateTailwindFunctions(lazyConfig),
+    generateUtilities(lazyConfig),
+    substituteHoverableAtRules(lazyConfig),
+    substituteFocusableAtRules(lazyConfig),
+    substituteResponsiveAtRules(lazyConfig),
+    substituteScreenAtRules(lazyConfig),
+    substituteClassApplyAtRules(lazyConfig),
     stylefmt,
   ])
 })

src/lib/evaluateTailwindFunctions.js

@@ -1,7 +1,9 @@
 import _ from 'lodash'
 import functions from 'postcss-functions'
 
-export default function(options) {
+export default function(config) {
+  const options = config()
+
   return functions({
     functions: {
       config: function (path) {

src/lib/generateUtilities.js

@@ -37,8 +37,10 @@ import verticalAlign from '../generators/verticalAlign'
 import visibility from '../generators/visibility'
 import zIndex from '../generators/zIndex'
 
-export default function(options) {
+export default function(config) {
   return function(css) {
+    const options = config()
+
     css.walkAtRules('tailwind', atRule => {
       if (atRule.params === 'utilities') {
         const utilities = _.flatten([

src/lib/registerConfigAsDependency.js

@@ -0,0 +1,15 @@
+import fs from 'fs'
+
+export default function(configFile) {
+  if (! fs.existsSync(configFile)) {
+    throw new Error(`Specified Tailwind config file "${configFile}" doesn't exist.`)
+  }
+
+  return function (css, opts) {
+    opts.messages = [{
+      type: 'dependency',
+      file: configFile,
+      parent: css.source.input.file,
+    }]
+  }
+}

src/lib/substituteClassApplyAtRules.js

@@ -9,8 +9,9 @@ function normalizeClassNames(classNames) {
   })
 }
 
-export default postcss.plugin('tailwind-apply', function(css) {
-  return function(css) {
+export default function(config) {
+  return function (css) {
+    const options = config()
     css.walkRules(function(rule) {
       rule.walkAtRules('apply', atRule => {
         const mixins = normalizeClassNames(postcss.list.space(atRule.params))
@@ -42,4 +43,4 @@ export default postcss.plugin('tailwind-apply', function(css) {
       })
     })
   }
-})
+}

src/lib/substituteFocusableAtRules.js

@@ -2,8 +2,10 @@ import _ from 'lodash'
 import postcss from 'postcss'
 import cloneNodes from '../util/cloneNodes'
 
-export default function(options) {
-  return function(css) {
+export default function(config) {
+  return function (css) {
+    const options = config()
+
     css.walkAtRules('focusable', atRule => {
 
       atRule.walkRules(rule => {

src/lib/substituteHoverableAtRules.js

@@ -2,8 +2,10 @@ import _ from 'lodash'
 import postcss from 'postcss'
 import cloneNodes from '../util/cloneNodes'
 
-export default function(options) {
-  return function(css) {
+export default function(config) {
+  return function (css) {
+    const options = config()
+
     css.walkAtRules('hoverable', atRule => {
 
       atRule.walkRules(rule => {

src/lib/substitutePreflightAtRule.js

@@ -1,8 +1,10 @@
 import fs from 'fs'
 import postcss from 'postcss'
 
-export default function(options) {
+export default function(config) {
   return function (css) {
+    const options = config()
+
     css.walkAtRules('tailwind', atRule => {
       if (atRule.params === 'preflight') {
           atRule.before(postcss.parse(fs.readFileSync(`${__dirname}/../../css/preflight.css`, 'utf8')))

src/lib/substituteResponsiveAtRules.js

@@ -3,8 +3,10 @@ import postcss from 'postcss'
 import cloneNodes from '../util/cloneNodes'
 import buildMediaQuery from '../util/buildMediaQuery'
 
-export default function({ screens }) {
-  return function(css) {
+
+export default function(config) {
+  return function (css) {
+    const screens = config().screens
     const rules = []
 
     css.walkAtRules('responsive', atRule => {