1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

diff --git a/packages/tailwindcss-class-names/src/index.js b/packages/tailwindcss-class-names/src/index.js
index 1835e66efab64cbc1e93c7335b0d9cadb7a836b1..4b55f764d6dcd4cc0fcd94de0eb57d01dfdf3a6e 100644
--- a/packages/tailwindcss-class-names/src/index.js
+++ b/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 @@       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(
@@ -116,8 +133,12 @@   async function handleChange() {
     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)) {

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

diff --git a/packages/tailwindcss-language-server/src/server.ts b/packages/tailwindcss-language-server/src/server.ts
index 729d1f0c30862343cf77f8ab1c278230155392d7..349ef7ec9617a4a4823001cd638f0a0bc1690662 100644
--- a/packages/tailwindcss-language-server/src/server.ts
+++ b/packages/tailwindcss-language-server/src/server.ts
@@ -63,7 +63,7 @@     const tailwindState = await getTailwindState(
       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 @@               state.plugins,
             ])
           } 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])
           }

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

diff --git a/packages/tailwindcss-language-server/src/util/state.ts b/packages/tailwindcss-language-server/src/util/state.ts
index 175dade6ed563cc36605c1fc3c55f5b56e900573..d41127d6272e6bbf5b719b96ba602362395c67b9 100644
--- a/packages/tailwindcss-language-server/src/util/state.ts
+++ b/packages/tailwindcss-language-server/src/util/state.ts
@@ -37,6 +37,7 @@   variants?: string[]
   classNames?: ClassNames
   dependencies?: string[]
   editor?: EditorState
+  error?: Error
 }
 
 export type DocumentClassList = {

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

diff --git a/packages/tailwindcss-vscode/src/extension.ts b/packages/tailwindcss-vscode/src/extension.ts
index 81ca5e142d98ad15c2af1fae7eac4aaf35da44b2..e27a99c150f0ea8a7edecdec942515657135dd3c 100755
--- a/packages/tailwindcss-vscode/src/extension.ts
+++ b/packages/tailwindcss-vscode/src/extension.ts
@@ -12,12 +12,12 @@   OutputChannel,
   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()
@@ -137,6 +137,10 @@         'LSP Multi Server Example',
         serverOptions,
         clientOptions
       )
+
+      client.onReady().then(() => {
+        registerConfigErrorHandler(client)
+      })
 
       client.start()
       clients.set(folder.uri.toString(), client)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

diff --git a/packages/tailwindcss-vscode/src/lib/registerConfigErrorHandler.ts b/packages/tailwindcss-vscode/src/lib/registerConfigErrorHandler.ts
new file mode 100644
index 0000000000000000000000000000000000000000..819458efb3a9286fbf011b6f03c77558b6058428
--- /dev/null
+++ b/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)
+          ),
+        })
+      }
+    }
+  )
+}