From 7c2cf97dcdc26f269e8fd92533425ef9f1fb4698 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Thu, 9 Jan 2025 15:09:08 -0500 Subject: [PATCH] Reload v4 design system when dependencies change --- .../src/projects.ts | 35 +++++++++++++++++++ .../tailwindcss-language-server/src/tw.ts | 7 +--- .../src/util/v4/design-system.ts | 13 +++++++ .../tailwindcss-language-server/src/utils.ts | 2 +- .../src/util/v4/design-system.ts | 1 + 5 files changed, 51 insertions(+), 7 deletions(-) diff --git a/packages/tailwindcss-language-server/src/projects.ts b/packages/tailwindcss-language-server/src/projects.ts index 3a1df51d..2da5a4c7 100644 --- a/packages/tailwindcss-language-server/src/projects.ts +++ b/packages/tailwindcss-language-server/src/projects.ts @@ -110,6 +110,7 @@ export interface ProjectService { onDocumentLinks(params: DocumentLinkParams): DocumentLink[] sortClassLists(classLists: string[]): string[] + dependencies(): Iterable reload(): Promise } @@ -186,6 +187,11 @@ export async function createProjectService( getConfiguration: (uri?: string) => Promise, userLanguages: Record, ): Promise { + /* Project dependencies require a design system reload */ + let dependencies = new Set() + + dependencies.add(projectConfig.configPath) + let enabled = false const folder = projectConfig.folder const disposables: Array> = [] @@ -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 ----') }, diff --git a/packages/tailwindcss-language-server/src/tw.ts b/packages/tailwindcss-language-server/src/tw.ts index f95e438a..aabdc3cf 100644 --- a/packages/tailwindcss-language-server/src/tw.ts +++ b/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 diff --git a/packages/tailwindcss-language-server/src/util/v4/design-system.ts b/packages/tailwindcss-language-server/src/util/v4/design-system.ts index 1b368613..8e8ad5be 100644 --- a/packages/tailwindcss-language-server/src/util/v4/design-system.ts +++ b/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({ + dependencies, legacy, filepath, onError, }: { + dependencies: Set legacy: boolean filepath: string onError: (id: string, error: unknown, resourceType: string) => T @@ -58,6 +60,8 @@ function createLoader({ 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() + 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[] = [] diff --git a/packages/tailwindcss-language-server/src/utils.ts b/packages/tailwindcss-language-server/src/utils.ts index 8b9d8843..1660ce80 100644 --- a/packages/tailwindcss-language-server/src/utils.ts +++ b/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): boolean { for (let file of files) { if (change === file || dirContains(change, file)) { return true diff --git a/packages/tailwindcss-language-service/src/util/v4/design-system.ts b/packages/tailwindcss-language-service/src/util/v4/design-system.ts index 0cb08c0a..cce64d4b 100644 --- a/packages/tailwindcss-language-service/src/util/v4/design-system.ts +++ b/packages/tailwindcss-language-service/src/util/v4/design-system.ts @@ -43,6 +43,7 @@ export interface DesignSystem { } export interface DesignSystem { + dependencies(): Set compile(classes: string[]): postcss.Root[] toCss(nodes: postcss.Root | postcss.Node[]): string }