Add test to verify the design system is reloaded on css changes

This already works and is probably already tested but wanted to add a more explicit test to detect it.

Author: thecrypticace

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

@@ -1164,6 +1164,11 @@ export async function createProjectService(
       let elapsed = process.hrtime.bigint() - start
 
       console.log(`---- RELOADED IN ${(Number(elapsed) / 1e6).toFixed(2)}ms ----`)
+
+      let isTestMode = params.initializationOptions?.testMode ?? false
+      if (!isTestMode) return
+
+      connection.sendNotification('@/tailwindCSS/projectReloaded')
     },
 
     state,

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

@@ -0,0 +1,89 @@
+import { expect } from 'vitest'
+import * as fs from 'node:fs/promises'
+import * as path from 'node:path'
+import { css, defineTest } from '../../src/testing'
+import dedent from 'dedent'
+import { createClient } from '../utils/client'
+
+defineTest({
+  name: 'The design system is reloaded when the CSS changes ($watcher)',
+  fs: {
+    'app.css': css`
+      @import 'tailwindcss';
+
+      @theme {
+        --color-primary: #c0ffee;
+      }
+    `,
+  },
+  prepare: async ({ root }) => ({
+    client: await createClient({
+      root,
+      capabilities(caps) {
+        caps.workspace!.didChangeWatchedFiles!.dynamicRegistration = false
+      },
+    }),
+  }),
+  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({
+      contents: {
+        language: 'css',
+        value: dedent`
+          .text-primary {
+            color: var(--color-primary) /* #c0ffee */;
+          }
+        `,
+      },
+      range: {
+        start: { line: 0, character: 12 },
+        end: { line: 0, character: 24 },
+      },
+    })
+
+    let didReload = new Promise((resolve) => {
+      client.conn.onNotification('@/tailwindCSS/projectReloaded', resolve)
+    })
+
+    // Update the CSS
+    await fs.writeFile(
+      path.resolve(root, 'app.css'),
+      css`
+        @import 'tailwindcss';
+
+        @theme {
+          --color-primary: #bada55;
+        }
+      `,
+    )
+
+    await didReload
+
+    // <div class="text-primary">
+    //             ^
+    let hover2 = await doc.hover({ line: 0, character: 13 })
+
+    expect(hover2).toEqual({
+      contents: {
+        language: 'css',
+        value: dedent`
+          .text-primary {
+            color: var(--color-primary) /* #bada55 */;
+          }
+        `,
+      },
+      range: {
+        start: { line: 0, character: 12 },
+        end: { line: 0, character: 24 },
+      },
+    })
+  },
+})