Reload v4 design system when dependencies change (#1119)

I noticed that editing imported CSS files, plugins, and configs in v4
the config wasn't reloading. This PR fixes that by making sure we reload
when any of them change.

Author: thecrypticace

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

@@ -110,6 +110,7 @@ export interface ProjectService {
   onDocumentLinks(params: DocumentLinkParams): DocumentLink[]
   sortClassLists(classLists: string[]): string[]
 
+  dependencies(): Iterable<string>
   reload(): Promise<void>
 }
 
@@ -186,6 +187,11 @@ export async function createProjectService(
   getConfiguration: (uri?: string) => Promise<Settings>,
   userLanguages: Record<string, string>,
 ): Promise<ProjectService> {
+  /* Project dependencies require a design system reload */
+  let dependencies = new Set<string>()
+
+  dependencies.add(projectConfig.configPath)
+
   let enabled = false
   const folder = projectConfig.folder
   const disposables: Array<Disposable | Promise<Disposable>> = []
@@ -757,6 +763,14 @@ export async function createProjectService(
 
         state.designSystem = designSystem
 
+        let deps = designSystem.dependencies()
+
+        for (let dep of deps) {
+          dependencies.add(dep)
+        }
+
+        watchPatterns(Array.from(deps))
+
         originalConfig = { theme: {} }
       } catch {
         // TODO: Fall back to built-in v4 stuff
@@ -987,6 +1001,14 @@ export async function createProjectService(
     updateCapabilities()
   }
 
+  for (let entry of projectConfig.config.entries) {
+    dependencies.add(entry.path)
+
+    for (let dep of entry.deps) {
+      dependencies.add(dep.path)
+    }
+  }
+
   return {
     projectConfig,
     enabled() {
@@ -996,6 +1018,7 @@ export async function createProjectService(
       enabled = true
     },
 
+    dependencies: () => dependencies,
     async reload() {
       if (!state.v4) return
 
@@ -1029,6 +1052,18 @@ export async function createProjectService(
       state.classList = classList
       state.variants = getVariants(state)
 
+      let deps = designSystem.dependencies()
+
+      for (let dep of deps) {
+        dependencies.add(dep)
+      }
+
+      watchPatterns(Array.from(deps))
+
+      // Update capabilities to force color swatches to update across editors
+      // TODO: Need to verify how well this works across various editors
+      // updateCapabilities()
+
       console.log('---- RELOADED ----')
     },
 

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

@@ -331,12 +331,7 @@ export class TW {
         for (let [, project] of this.projects) {
           if (!project.state.v4) continue
 
-          let reloadableFiles = [
-            project.projectConfig.configPath,
-            ...project.projectConfig.config.entries.map((entry) => entry.path),
-          ]
-
-          if (!changeAffectsFile(normalizedFilename, reloadableFiles)) continue
+          if (!changeAffectsFile(normalizedFilename, project.dependencies())) continue
 
           needsSoftRestart = true
           break changeLoop

packages/tailwindcss-language-server/src/util/v4/design-system.ts

@@ -44,10 +44,12 @@ async function importFile(id: string) {
  * everything from working so we'll let the error handler decide how to proceed.
  */
 function createLoader<T>({
+  dependencies,
   legacy,
   filepath,
   onError,
 }: {
+  dependencies: Set<string>
   legacy: boolean
   filepath: string
   onError: (id: string, error: unknown, resourceType: string) => T
@@ -58,6 +60,8 @@ function createLoader<T>({
     try {
       let resolved = resolveFrom(base, id)
 
+      dependencies.add(resolved)
+
       let url = pathToFileURL(resolved)
       url.searchParams.append('t', cacheKey)
 
@@ -93,6 +97,8 @@ export async function loadDesignSystem(
     return null
   }
 
+  let dependencies = new Set<string>()
+
   let supportsImports = false
   try {
     await tailwindcss.__unstable__loadDesignSystem(css, {
@@ -115,6 +121,7 @@ export async function loadDesignSystem(
 
     // v4.0.0-alpha.25+
     loadModule: createLoader({
+      dependencies,
       legacy: false,
       filepath,
       onError: (id, err, resourceType) => {
@@ -131,6 +138,8 @@ export async function loadDesignSystem(
     loadStylesheet: async (id: string, base: string) => {
       let resolved = resolveCssFrom(base, id)
 
+      dependencies.add(resolved)
+
       return {
         base: path.dirname(resolved),
         content: await fs.readFile(resolved, 'utf-8'),
@@ -139,6 +148,7 @@ export async function loadDesignSystem(
 
     // v4.0.0-alpha.24 and below
     loadPlugin: createLoader({
+      dependencies,
       legacy: true,
       filepath,
       onError(id, err) {
@@ -149,6 +159,7 @@ export async function loadDesignSystem(
     }),
 
     loadConfig: createLoader({
+      dependencies,
       legacy: true,
       filepath,
       onError(id, err) {
@@ -161,6 +172,8 @@ export async function loadDesignSystem(
 
   // Step 4: Augment the design system with some additional APIs that the LSP needs
   Object.assign(design, {
+    dependencies: () => dependencies,
+
     compile(classes: string[]): (postcss.Root | null)[] {
       let css = design.candidatesToCss(classes)
       let errors: any[] = []

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

@@ -84,7 +84,7 @@ export function normalizeDriveLetter(filepath: string) {
   return filepath.replace(WIN_DRIVE_LETTER, (_, letter) => letter.toUpperCase() + ':')
 }
 
-export function changeAffectsFile(change: string, files: string[]): boolean {
+export function changeAffectsFile(change: string, files: Iterable<string>): boolean {
   for (let file of files) {
     if (change === file || dirContains(change, file)) {
       return true

packages/tailwindcss-language-service/src/util/v4/design-system.ts

@@ -43,6 +43,7 @@ export interface DesignSystem {
 }
 
 export interface DesignSystem {
+  dependencies(): Set<string>
   compile(classes: string[]): postcss.Root[]
   toCss(nodes: postcss.Root | postcss.Node[]): string
 }