Properly restart server when detecting new Tailwind CSS v4 configs (#1387)

In editors that use our language server directly (not our VSCode
extension), if you start with a project with a CSS file that isn't a
Tailwind CSS config then edit it we want the server to restart.

Unfortunately this was hitting an error causing the restart to fail but
because of how things are set up this error isn't easily catchable (but
it did get logged thankfully).

This fixes that error and turning a CSS file from a non-config into a
proper Tailwind CSS v4 config should work and the server should react
accordingly.

Author: thecrypticace

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

@@ -1133,7 +1133,7 @@ export class TW {
     this.commonRegistrations?.dispose()
     this.commonRegistrations = undefined
 
-    this.lastTriggerCharacters.clear()
+    this.lastTriggerCharacters?.clear()
     this.completionRegistration?.then((r) => r.dispose())
     this.completionRegistration = undefined
 

packages/tailwindcss-language-server/tests/env/restart.test.ts

@@ -190,3 +190,79 @@ defineTest({
     expect(ids3).not.toContainEqual(expect.toBeOneOf(ids2))
   },
 })
+
+defineTest({
+  name: 'Creating a CSS config in an empty folder initalizes a project',
+  fs: {
+    'app.css': css`
+      /* this file is not a Tailwind CSS config yet */
+    `,
+  },
+  prepare: async ({ root }) => ({
+    client: await createClient({ root, log: true }),
+  }),
+  handle: async ({ root, client }) => {
+    let doc = await client.open({
+      lang: 'html',
+      text: '<div class="text-primary">',
+    })
+
+    // <div class="text-primary">
+    //             ^
+    let hover = await doc.hover({ line: 0, character: 13 })
+
+    expect(hover).toEqual(null)
+
+    // Create a CSS config file
+    await fs.writeFile(
+      `${root}/app.css`,
+      css`
+        @import 'tailwindcss';
+
+        @theme {
+          --color-primary: #c0ffee;
+        }
+      `,
+    )
+
+    // Create a CSS config file
+    // Notify the server of the config change
+    let didRestart = Promise.race([
+      new Promise((resolve) => {
+        client.conn.onNotification('@/tailwindCSS/serverRestarted', resolve)
+      }),
+      new Promise((_, reject) =>
+        setTimeout(() => reject(new Error('Did not restart in time')), 5000),
+      ),
+    ])
+
+    await client.notifyChangedFiles({
+      changed: [`${root}/app.css`],
+    })
+
+    await didRestart
+
+    // TODO: Sending a shutdown request immediately after a restart
+    // gets lost
+    // await client.shutdown()
+
+    // <div class="text-primary">
+    //             ^
+    hover = await doc.hover({ line: 0, character: 13 })
+
+    expect(hover).toEqual({
+      contents: {
+        language: 'css',
+        value: dedent`
+          .text-primary {
+            color: var(--color-primary) /* #c0ffee */;
+          }
+        `,
+      },
+      range: {
+        start: { line: 0, character: 12 },
+        end: { line: 0, character: 24 },
+      },
+    })
+  },
+})

packages/tailwindcss-language-server/tests/utils/client.ts

@@ -12,13 +12,15 @@ import {
   DocumentLinkRequest,
   DocumentSymbol,
   DocumentSymbolRequest,
+  ExitNotification,
   FileChangeType,
   FileEvent,
   Hover,
   NotificationHandler,
   ProtocolConnection,
   PublishDiagnosticsParams,
   Registration,
+  ShutdownRequest,
   SymbolInformation,
   UnregistrationRequest,
   WorkspaceFolder,
@@ -226,6 +228,11 @@ export interface Client extends ClientWorkspace {
    * Update the global settings for the server
    */
   updateSettings(settings: DeepPartial<Settings>): Promise<void>
+
+  /**
+   * Shutdown the server
+   */
+  shutdown(): Promise<void>
 }
 
 export interface ClientWorkspaceOptions {
@@ -567,6 +574,13 @@ export async function createClient(opts: ClientOptions): Promise<Client> {
     })
   }
 
+  let didExit = new Promise<void>((resolve) => conn.onNotification(ExitNotification.type, resolve))
+
+  async function shutdown() {
+    await conn.sendRequest(ShutdownRequest.type)
+    await didExit
+  }
+
   return {
     ...clientWorkspaces[0],
     get serverCapabilities() {
@@ -576,6 +590,7 @@ export async function createClient(opts: ClientOptions): Promise<Client> {
     notifyChangedFiles,
     workspace,
     updateSettings,
+    shutdown,
   }
 }
 

packages/vscode-tailwindcss/CHANGELOG.md

@@ -3,6 +3,7 @@
 ## Prerelease
 
 - Simplify completion details for border and outline utilities ([#1384](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1384))
+- Fix error initializing a new project when editing a CSS file ([#1387](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1387))
 
 # 0.14.19