Restart server if a CSS config file is created and no projects exist

Author: thecrypticace

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

@@ -52,7 +52,7 @@ import { readCssFile } from './util/css'
 import { ProjectLocator, type ProjectConfig } from './project-locator'
 import type { TailwindCssSettings } from '@tailwindcss/language-service/src/util/state'
 import { createResolver, Resolver } from './resolver'
-import { retry } from './util/retry'
+import { analyzeStylesheet } from './version-guesser.js'
 
 const TRIGGER_CHARACTERS = [
   // class attributes
@@ -412,6 +412,31 @@ export class TW {
             needsRestart = true
             break
           }
+
+          //
+          else {
+            // If the main CSS file in a project is deleted and then re-created
+            // the server won't restart because the project is gone by now and
+            // there's no concept of a "config file" for us to compare with
+            //
+            // So we'll check if the stylesheet could *potentially* create
+            // a new project but we'll only do so if no projects were found
+            //
+            // If we did this all the time we'd potentially restart the server
+            // unncessarily a lot while the user is editing their stylesheets
+            if (this.projects.size > 0) continue
+
+            let content = await readCssFile(change.file)
+            if (!content) continue
+
+            let stylesheet = analyzeStylesheet(content)
+            if (!stylesheet.root) continue
+
+            if (!stylesheet.versions.includes('4')) continue
+
+            needsRestart = true
+            break
+          }
         }
 
         let isConfigFile = isConfigMatcher(normalizedFilename)

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

@@ -87,3 +87,80 @@ defineTest({
     })
   },
 })
+
+defineTest({
+  name: 'Server is "restarted" when a config file is removed',
+  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 },
+      },
+    })
+
+    // Remove the CSS file
+    let didRestart = new Promise((resolve) => {
+      client.conn.onNotification('@/tailwindCSS/serverRestarted', resolve)
+    })
+    await fs.unlink(path.resolve(root, 'app.css'))
+    await didRestart
+
+    // <div class="text-primary">
+    //             ^
+    let hover2 = await doc.hover({ line: 0, character: 13 })
+    expect(hover2).toEqual(null)
+
+    // Re-create the CSS file
+    let didRestartAgain = new Promise((resolve) => {
+      client.conn.onNotification('@/tailwindCSS/serverRestarted', resolve)
+    })
+    await fs.writeFile(
+      path.resolve(root, 'app.css'),
+      css`
+        @import 'tailwindcss';
+      `,
+    )
+    await didRestartAgain
+
+    await new Promise((resolve) => setTimeout(resolve, 500))
+
+    // <div class="text-primary">
+    //             ^
+    let hover3 = await doc.hover({ line: 0, character: 13 })
+    expect(hover3).toEqual(null)
+  },
+})