show config errors

Author: Brad Cornes

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

@@ -11,6 +11,18 @@ import invariant from 'tiny-invariant'
 import getPlugins from './getPlugins'
 import getVariants from './getVariants'
 import resolveConfig from './resolveConfig'
+import * as util from 'util'
+
+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 glob(pattern, options = {}) {
   return new Promise((resolve, reject) => {
@@ -73,7 +85,12 @@ export default async function getClassNames(
     })
 
     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(
@@ -116,8 +133,12 @@ export default async function getClassNames(
     const prevDeps = result ? result.dependencies : []
     try {
       result = await run()
-    } catch (_) {
-      onChange(null)
+    } catch (error) {
+      if (error instanceof TailwindConfigError) {
+        onChange({ error })
+      } else {
+        onChange(null)
+      }
       return
     }
     if (!arraysEqual(prevDeps, result.dependencies)) {

packages/tailwindcss-language-server/src/server.ts

@@ -63,7 +63,7 @@ connection.onInitialize(
       params.rootPath || URI.parse(params.rootUri).path,
       {
         onChange: (newState: State): void => {
-          if (newState) {
+          if (newState && !newState.error) {
             state = { ...newState, enabled: true, editor: editorState }
             connection.sendNotification('tailwindcss/configUpdated', [
               state.configPath,
@@ -72,6 +72,20 @@ connection.onInitialize(
             ])
           } else {
             state = { enabled: false, editor: editorState }
+            if (newState && newState.error) {
+              const payload: {
+                message: string
+                file?: string
+                line?: number
+              } = { message: newState.error.message }
+              const lines = newState.error.stack.toString().split('\n')
+              const match = /^(?<file>.*?):(?<line>[0-9]+)$/.exec(lines[0])
+              if (match) {
+                payload.file = match.groups.file
+                payload.line = parseInt(match.groups.line, 10)
+              }
+              connection.sendNotification('tailwindcss/configError', [payload])
+            }
             // TODO
             // connection.sendNotification('tailwindcss/configUpdated', [null])
           }

packages/tailwindcss-language-server/src/util/state.ts

@@ -37,6 +37,7 @@ export type State = null | {
   classNames?: ClassNames
   dependencies?: string[]
   editor?: EditorState
+  error?: Error
 }
 
 export type DocumentClassList = {

packages/tailwindcss-vscode/src/extension.ts

@@ -12,12 +12,12 @@ import {
   WorkspaceFolder,
   Uri,
 } from 'vscode'
-
 import {
   LanguageClient,
   LanguageClientOptions,
   TransportKind,
 } from 'vscode-languageclient'
+import { registerConfigErrorHandler } from './lib/registerConfigErrorHandler'
 
 let defaultClient: LanguageClient
 let clients: Map<string, LanguageClient> = new Map()
@@ -138,6 +138,10 @@ export function activate(context: ExtensionContext) {
         clientOptions
       )
 
+      client.onReady().then(() => {
+        registerConfigErrorHandler(client)
+      })
+
       client.start()
       clients.set(folder.uri.toString(), client)
     }

packages/tailwindcss-vscode/src/lib/registerConfigErrorHandler.ts

@@ -0,0 +1,23 @@
+import { LanguageClient } from 'vscode-languageclient'
+import { window, Uri, Range, Position } from 'vscode'
+
+export function registerConfigErrorHandler(client: LanguageClient) {
+  client.onNotification(
+    'tailwindcss/configError',
+    async ({ message, file, line }) => {
+      const actions: string[] = file ? ['View'] : []
+      const action = await window.showErrorMessage(
+        `Tailwind CSS: ${message}`,
+        ...actions
+      )
+      if (action === 'View') {
+        window.showTextDocument(Uri.file(file), {
+          selection: new Range(
+            new Position(line - 1, 0),
+            new Position(line - 1, 0)
+          ),
+        })
+      }
+    }
+  )
+}