From 8c4365079819734acee69fac36f46e9a856c5827 Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Mon, 26 Aug 2024 16:37:06 +0200 Subject: [PATCH] Don't block on module dependency resolution --- .../src/commands/build/index.ts | 18 ++++++----- .../src/get-module-dependencies.ts | 2 +- packages/@tailwindcss-postcss/src/index.ts | 32 +++++++++++-------- packages/@tailwindcss-vite/src/index.ts | 22 ++++++++----- 4 files changed, 43 insertions(+), 31 deletions(-) diff --git a/packages/@tailwindcss-cli/src/commands/build/index.ts b/packages/@tailwindcss-cli/src/commands/build/index.ts index 1261d0fdf..57959aaf3 100644 --- a/packages/@tailwindcss-cli/src/commands/build/index.ts +++ b/packages/@tailwindcss-cli/src/commands/build/index.ts @@ -132,7 +132,7 @@ export async function handle(args: Result>) { let inputFile = args['--input'] && args['--input'] !== '-' ? args['--input'] : process.cwd() let inputBasePath = path.dirname(path.resolve(inputFile)) - let fullRebuildPaths = [...cssImportPaths] + let fullRebuildPaths: Promise[] = [Promise.resolve(cssImportPaths)] function compile(css: string) { return tailwindcss.compile(css, { @@ -142,8 +142,8 @@ export async function handle(args: Result>) { } let resolvedPath = path.resolve(inputBasePath, pluginPath) - fullRebuildPaths.push(resolvedPath) - fullRebuildPaths.push(...(await getModuleDependencies(resolvedPath))) + fullRebuildPaths.push(Promise.resolve([resolvedPath])) + fullRebuildPaths.push(getModuleDependencies(resolvedPath)) return import(pathToFileURL(resolvedPath).href + '?id=' + Date.now()).then( (m) => m.default ?? m, ) @@ -155,8 +155,8 @@ export async function handle(args: Result>) { } let resolvedPath = path.resolve(inputBasePath, configPath) - fullRebuildPaths.push(resolvedPath) - fullRebuildPaths.push(...(await getModuleDependencies(resolvedPath))) + fullRebuildPaths.push(Promise.resolve([resolvedPath])) + fullRebuildPaths.push(getModuleDependencies(resolvedPath)) return import(pathToFileURL(resolvedPath).href + '?id=' + Date.now()).then( (m) => m.default ?? m, ) @@ -187,11 +187,13 @@ export async function handle(args: Result>) { let changedFiles: ChangedContent[] = [] let rebuildStrategy: 'incremental' | 'full' = 'incremental' + let resolvedFullRebuildPaths = (await Promise.all(fullRebuildPaths)).flat() + for (let file of files) { // If one of the changed files is related to the input CSS or JS // config/plugin files, then we need to do a full rebuild because // the theme might have changed. - if (fullRebuildPaths.includes(file)) { + if (resolvedFullRebuildPaths.includes(file)) { rebuildStrategy = 'full' // No need to check the rest of the events, because we already know we @@ -226,8 +228,8 @@ export async function handle(args: Result>) { `, args['--input'] ?? base, ) - clearRequireCache(fullRebuildPaths) - fullRebuildPaths = cssImportPaths + clearRequireCache(resolvedFullRebuildPaths) + fullRebuildPaths = [Promise.resolve(cssImportPaths)] // Create a new compiler, given the new `input` compiler = await compile(input) diff --git a/packages/@tailwindcss-node/src/get-module-dependencies.ts b/packages/@tailwindcss-node/src/get-module-dependencies.ts index 8497c8dbe..5d36adce7 100644 --- a/packages/@tailwindcss-node/src/get-module-dependencies.ts +++ b/packages/@tailwindcss-node/src/get-module-dependencies.ts @@ -102,5 +102,5 @@ export async function getModuleDependencies(absoluteFilePath: string) { path.extname(absoluteFilePath), ) - return seen + return Array.from(seen) } diff --git a/packages/@tailwindcss-postcss/src/index.ts b/packages/@tailwindcss-postcss/src/index.ts index 4fdf96175..5c760a8b9 100644 --- a/packages/@tailwindcss-postcss/src/index.ts +++ b/packages/@tailwindcss-postcss/src/index.ts @@ -49,7 +49,7 @@ function tailwindcss(opts: PluginOptions = {}): AcceptedPlugin { compiler: null as null | Awaited>, css: '', optimizedCss: '', - fullRebuildPaths: [] as string[], + fullRebuildPaths: [] as Promise[], } }) @@ -84,8 +84,10 @@ function tailwindcss(opts: PluginOptions = {}): AcceptedPlugin { let context = cache.get(inputFile) let inputBasePath = path.dirname(path.resolve(inputFile)) - function createCompiler() { - clearRequireCache(context.fullRebuildPaths) + async function createCompiler() { + for (let files of await Promise.all(context.fullRebuildPaths)) { + clearRequireCache(files) + } context.fullRebuildPaths = [] return compile(root.toString(), { loadPlugin: async (pluginPath) => { @@ -94,8 +96,8 @@ function tailwindcss(opts: PluginOptions = {}): AcceptedPlugin { } let resolvedPath = path.resolve(inputBasePath, pluginPath) - context.fullRebuildPaths.push(resolvedPath) - context.fullRebuildPaths.push(...(await getModuleDependencies(resolvedPath))) + context.fullRebuildPaths.push(Promise.resolve([resolvedPath])) + context.fullRebuildPaths.push(getModuleDependencies(resolvedPath)) return import(pathToFileURL(resolvedPath).href + '?id=' + Date.now()).then( (m) => m.default ?? m, ) @@ -107,8 +109,8 @@ function tailwindcss(opts: PluginOptions = {}): AcceptedPlugin { } let resolvedPath = path.resolve(inputBasePath, configPath) - context.fullRebuildPaths.push(resolvedPath) - context.fullRebuildPaths.push(...(await getModuleDependencies(resolvedPath))) + context.fullRebuildPaths.push(Promise.resolve([resolvedPath])) + context.fullRebuildPaths.push(getModuleDependencies(resolvedPath)) return import(pathToFileURL(resolvedPath).href + '?id=' + Date.now()).then( (m) => m.default ?? m, ) @@ -124,13 +126,15 @@ function tailwindcss(opts: PluginOptions = {}): AcceptedPlugin { // Track file modification times to CSS files { - for (let file of context.fullRebuildPaths) { - result.messages.push({ - type: 'dependency', - plugin: '@tailwindcss/postcss', - file, - parent: result.opts.from, - }) + for (let files of await Promise.all(context.fullRebuildPaths)) { + for (let file of files) { + result.messages.push({ + type: 'dependency', + plugin: '@tailwindcss/postcss', + file, + parent: result.opts.from, + }) + } } let files = result.messages.flatMap((message) => { diff --git a/packages/@tailwindcss-vite/src/index.ts b/packages/@tailwindcss-vite/src/index.ts index ad7db1306..9314f8cf0 100644 --- a/packages/@tailwindcss-vite/src/index.ts +++ b/packages/@tailwindcss-vite/src/index.ts @@ -95,15 +95,18 @@ export default function tailwindcss(): Plugin[] { } let resolvedPath = path.resolve(inputBasePath, pluginPath) + let [module, moduleDependencies] = await Promise.all([ + import(pathToFileURL(resolvedPath).href + '?id=' + Date.now()), + getModuleDependencies(resolvedPath), + ]) + addWatchFile(resolvedPath) fullRebuildPaths.push(resolvedPath) - for (let file of await getModuleDependencies(resolvedPath)) { + for (let file of moduleDependencies) { addWatchFile(file) fullRebuildPaths.push(file) } - return import(pathToFileURL(resolvedPath).href + '?id=' + Date.now()).then( - (m) => m.default ?? m, - ) + return module.default ?? module }, loadConfig: async (configPath) => { @@ -112,15 +115,18 @@ export default function tailwindcss(): Plugin[] { } let resolvedPath = path.resolve(inputBasePath, configPath) + let [module, moduleDependencies] = await Promise.all([ + import(pathToFileURL(resolvedPath).href + '?id=' + Date.now()), + getModuleDependencies(resolvedPath), + ]) + addWatchFile(resolvedPath) fullRebuildPaths.push(resolvedPath) - for (let file of await getModuleDependencies(resolvedPath)) { + for (let file of moduleDependencies) { addWatchFile(file) fullRebuildPaths.push(file) } - return import(pathToFileURL(resolvedPath).href + '?id=' + Date.now()).then( - (m) => m.default ?? m, - ) + return module.default ?? module }, })