Merge branch 'next' into config-explorer

Author: Brad Cornes

packages/tailwindcss-class-names/src/getPlugins.js

@@ -1,9 +1,24 @@
 import * as path from 'path'
 import stackTrace from 'stack-trace'
 import pkgUp from 'pkg-up'
+import { glob } from './glob'
+import { isObject } from './isObject'
 
-function isObject(variable) {
-  return Object.prototype.toString.call(variable) === '[object Object]'
+export async function getBuiltInPlugins(cwd) {
+  try {
+    return (
+      await glob(path.resolve(cwd, 'node_modules/tailwindcss/lib/plugins/*.js'))
+    )
+      .map((x) => {
+        try {
+          const mod = __non_webpack_require__(x)
+          return mod.default ? mod.default() : mod()
+        } catch (_) {}
+      })
+      .filter(Boolean)
+  } catch (_) {
+    return []
+  }
 }
 
 export default function getPlugins(config) {
@@ -13,7 +28,7 @@ export default function getPlugins(config) {
     return []
   }
 
-  return plugins.map(plugin => {
+  return plugins.map((plugin) => {
     let pluginConfig = plugin.config
     if (!isObject(pluginConfig)) {
       pluginConfig = {}
@@ -25,7 +40,7 @@ export default function getPlugins(config) {
         : [],
       variants: isObject(pluginConfig.variants)
         ? Object.keys(pluginConfig.variants)
-        : []
+        : [],
     }
 
     const fn = plugin.handler || plugin
@@ -40,32 +55,32 @@ export default function getPlugins(config) {
       const trace = stackTrace.parse(e)
       if (trace.length === 0)
         return {
-          name: fnName
+          name: fnName,
         }
       const file = trace[0].fileName
       const dir = path.dirname(file)
       let pkg = pkgUp.sync({ cwd: dir })
       if (!pkg)
         return {
-          name: fnName
+          name: fnName,
         }
       try {
         pkg = __non_webpack_require__(pkg)
       } catch (_) {
         return {
-          name: fnName
+          name: fnName,
         }
       }
       if (pkg.name && path.resolve(dir, pkg.main || 'index.js') === file) {
         return {
           name: pkg.name,
           homepage: pkg.homepage,
-          contributes
+          contributes,
         }
       }
     }
     return {
-      name: fnName
+      name: fnName,
     }
   })
 }

packages/tailwindcss-class-names/src/getUtilityConfigMap.js

@@ -0,0 +1,57 @@
+import { runPlugin } from './runPlugin'
+import { getBuiltInPlugins } from './getPlugins'
+import { isObject } from './isObject'
+
+const proxyHandler = (base = []) => ({
+  get(target, key) {
+    if (isObject(target[key])) {
+      return new Proxy(target[key], proxyHandler([...base, key]))
+    } else {
+      if (
+        [...base, key].every((x) => typeof x === 'string') &&
+        target.hasOwnProperty(key)
+      ) {
+        return '$dep$' + [...base, key].join('.')
+      }
+      return target[key]
+    }
+  },
+})
+
+export async function getUtilityConfigMap({ cwd, resolvedConfig, postcss }) {
+  const builtInPlugins = await getBuiltInPlugins(cwd)
+  const userPlugins = Array.isArray(resolvedConfig.plugins)
+    ? resolvedConfig.plugins
+    : []
+
+  try {
+    const classNameConfigMap = {}
+    const proxiedConfig = new Proxy(resolvedConfig, proxyHandler())
+
+    ;[...builtInPlugins, ...userPlugins].forEach((plugin) => {
+      runPlugin(plugin, {
+        postcss,
+        config: proxiedConfig,
+        addUtilities: (utilities) => {
+          Object.keys(utilities).forEach((util) => {
+            let props = Object.keys(utilities[util])
+            if (
+              props.length === 1 &&
+              /^\.[^\s]+$/.test(util) &&
+              typeof utilities[util][props[0]] === 'string' &&
+              utilities[util][props[0]].substr(0, 5) === '$dep$'
+            ) {
+              classNameConfigMap[util.substr(1)] = utilities[util][
+                props[0]
+              ].substr(5)
+            }
+          })
+        },
+      })
+    })
+
+    return classNameConfigMap
+  } catch (_) {
+    return {}
+  }
+}

packages/tailwindcss-class-names/src/getVariants.js

@@ -1,5 +1,5 @@
 import semver from 'semver'
-import dlv from 'dlv'
+import { runPlugin } from './runPlugin'
 
 export default function getVariants({ config, version, postcss }) {
   let variants = ['responsive', 'hover']
@@ -9,31 +9,18 @@ export default function getVariants({ config, version, postcss }) {
   semver.gte(version, '1.0.0-beta.1') && variants.push('default')
   semver.gte(version, '1.1.0') &&
     variants.push('first', 'last', 'odd', 'even', 'disabled', 'visited')
+  semver.gte(version, '1.3.0') && variants.push('group-focus')
+
+  let plugins = Array.isArray(config.plugins) ? config.plugins : []
 
-  let plugins = config.plugins
-  if (!Array.isArray(plugins)) {
-    plugins = []
-  }
   plugins.forEach((plugin) => {
-    try {
-      ;(plugin.handler || plugin)({
-        addUtilities: () => {},
-        addComponents: () => {},
-        addBase: () => {},
-        addVariant: (name) => {
-          variants.push(name)
-        },
-        e: (x) => x,
-        prefix: (x) => x,
-        theme: (path, defaultValue) =>
-          dlv(config, `theme.${path}`, defaultValue),
-        variants: () => [],
-        config: (path, defaultValue) => dlv(config, path, defaultValue),
-        postcss,
-      })
-    } catch (_) {
-      console.error(_)
-    }
+    runPlugin(plugin, {
+      postcss,
+      config,
+      addVariant: (name) => {
+        variants.push(name)
+      },
+    })
   })
 
   return variants

packages/tailwindcss-class-names/src/glob.js

@@ -0,0 +1,22 @@
+import nodeGlob from 'glob'
+import dlv from 'dlv'
+import * as path from 'path'
+
+export function glob(pattern, options = {}) {
+  return new Promise((resolve, reject) => {
+    let g = new nodeGlob.Glob(pattern, options)
+    let matches = []
+    let max = dlv(options, 'max', Infinity)
+    g.on('match', (match) => {
+      matches.push(path.resolve(options.cwd || process.cwd(), match))
+      if (matches.length === max) {
+        g.abort()
+        resolve(matches)
+      }
+    })
+    g.on('end', () => {
+      resolve(matches)
+    })
+    g.on('error', reject)
+  })
+}

packages/tailwindcss-class-names/src/index.js

@@ -3,81 +3,75 @@ import Hook from './hook.mjs'
 import dlv from 'dlv'
 import dset from 'dset'
 import importFrom from 'import-from'
-import nodeGlob from 'glob'
-import * as path from 'path'
 import chokidar from 'chokidar'
 import semver from 'semver'
 import invariant from 'tiny-invariant'
 import getPlugins from './getPlugins'
 import getVariants from './getVariants'
 import resolveConfig from './resolveConfig'
+import * as util from 'util'
+import { glob } from './glob'
+import { getUtilityConfigMap } from './getUtilityConfigMap'
 
-function glob(pattern, options = {}) {
-  return new Promise((resolve, reject) => {
-    let g = new nodeGlob.Glob(pattern, options)
-    let matches = []
-    let max = dlv(options, 'max', Infinity)
-    g.on('match', match => {
-      matches.push(path.resolve(options.cwd || process.cwd(), match))
-      if (matches.length === max) {
-        g.abort()
-        resolve(matches)
-      }
-    })
-    g.on('end', () => {
-      resolve(matches)
-    })
-    g.on('error', reject)
-  })
+function TailwindConfigError(error) {
+  Error.call(this)
+  Error.captureStackTrace(this, this.constructor)
+
+  this.name = this.constructor.name
+  this.message = error.message
+  this.stack = error.stack
 }
 
+util.inherits(TailwindConfigError, Error)
+
 function arraysEqual(arr1, arr2) {
   return (
     JSON.stringify(arr1.concat([]).sort()) ===
     JSON.stringify(arr2.concat([]).sort())
   )
 }
 
+const CONFIG_GLOB =
+  '**/{tailwind,tailwind.config,tailwind-config,.tailwindrc}.js'
+
 export default async function getClassNames(
   cwd = process.cwd(),
   { onChange = () => {} } = {}
 ) {
-  let configPath
-  let postcss
-  let tailwindcss
-  let version
+  async function run() {
+    let configPath
+    let postcss
+    let tailwindcss
+    let version
 
-  try {
-    configPath = await glob(
-      '**/{tailwind,tailwind.config,tailwind-config,.tailwindrc}.js',
-      {
-        cwd,
-        ignore: '**/node_modules/**',
-        max: 1
-      }
-    )
+    configPath = await glob(CONFIG_GLOB, {
+      cwd,
+      ignore: '**/node_modules/**',
+      max: 1,
+    })
     invariant(configPath.length === 1, 'No Tailwind CSS config found.')
     configPath = configPath[0]
     postcss = importFrom(cwd, 'postcss')
     tailwindcss = importFrom(cwd, 'tailwindcss')
     version = importFrom(cwd, 'tailwindcss/package.json').version
-  } catch (_) {
-    return null
-  }
 
-  async function run() {
     const sepLocation = semver.gte(version, '0.99.0')
       ? ['separator']
       : ['options', 'separator']
     let userSeperator
-    let hook = Hook(configPath, exports => {
+    let hook = Hook(configPath, (exports) => {
       userSeperator = dlv(exports, sepLocation)
       dset(exports, sepLocation, '__TAILWIND_SEPARATOR__')
       return exports
     })
 
     hook.watch()
-    const config = __non_webpack_require__(configPath)
+    let config
+    try {
+      config = __non_webpack_require__(configPath)
+    } catch (error) {
+      throw new TailwindConfigError(error)
+    }
     hook.unwatch()
 
     const ast = await postcss([tailwindcss(configPath)]).process(
@@ -96,37 +90,61 @@ export default async function getClassNames(
       delete config[sepLocation]
     }
 
+    const resolvedConfig = resolveConfig({ cwd, config })
+
     return {
-      config: resolveConfig({ cwd, config }),
+      configPath,
+      config: resolvedConfig,
       separator: typeof userSeperator === 'undefined' ? ':' : userSeperator,
       classNames: await extractClassNames(ast),
-      dependencies: [configPath, ...hook.deps],
+      dependencies: hook.deps,
       plugins: getPlugins(config),
-      variants: getVariants({ config, version, postcss })
+      variants: getVariants({ config, version, postcss }),
+      utilityConfigMap: await getUtilityConfigMap({
+        cwd,
+        resolvedConfig,
+        postcss,
+      }),
     }
   }
 
   let watcher
-  function watch(files) {
+  function watch(files = []) {
     if (watcher) watcher.close()
     watcher = chokidar
-      .watch(files)
+      .watch([CONFIG_GLOB, ...files])
       .on('change', handleChange)
       .on('unlink', handleChange)
   }
 
-  let result = await run()
-  watch(result.dependencies)
-
   async function handleChange() {
-    const prevDeps = result.dependencies
-    result = await run()
+    const prevDeps = result ? result.dependencies : []
+    try {
+      result = await run()
+    } catch (error) {
+      if (error instanceof TailwindConfigError) {
+        onChange({ error })
+      } else {
+        onChange(null)
+      }
+      return
+    }
     if (!arraysEqual(prevDeps, result.dependencies)) {
       watch(result.dependencies)
     }
     onChange(result)
   }
 
+  let result
+  try {
+    result = await run()
+  } catch (_) {
+    watch()
+    return null
+  }
+
+  watch(result.dependencies)
+
   return result
 }