Don't block on module dependency resolution

Author: philipp-spiess

packages/@tailwindcss-cli/src/commands/build/index.ts

@@ -132,7 +132,7 @@ export async function handle(args: Result<ReturnType<typeof options>>) {
 
   let inputFile = args['--input'] && args['--input'] !== '-' ? args['--input'] : process.cwd()
   let inputBasePath = path.dirname(path.resolve(inputFile))
-  let fullRebuildPaths = [...cssImportPaths]
+  let fullRebuildPaths: Promise<string[]>[] = [Promise.resolve(cssImportPaths)]
 
   function compile(css: string) {
     return tailwindcss.compile(css, {
@@ -142,8 +142,8 @@ export async function handle(args: Result<ReturnType<typeof options>>) {
         }
 
         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<ReturnType<typeof options>>) {
         }
 
         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<ReturnType<typeof options>>) {
           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<ReturnType<typeof options>>) {
                   `,
               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)

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)
 }

packages/@tailwindcss-postcss/src/index.ts

@@ -49,7 +49,7 @@ function tailwindcss(opts: PluginOptions = {}): AcceptedPlugin {
       compiler: null as null | Awaited<ReturnType<typeof compile>>,
       css: '',
       optimizedCss: '',
-      fullRebuildPaths: [] as string[],
+      fullRebuildPaths: [] as Promise<string[]>[],
     }
   })
 
@@ -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) => {

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
       },
     })