From c01f9ff7573e9f378c9b85e3351b0fcb34a7240c Mon Sep 17 00:00:00 2001
From: Chance Strickland <hi@chance.dev>
Date: Wed, 18 May 2022 10:16:32 -0500
Subject: [PATCH] rebuild fixes

---
 packages/remix-dev/compiler.ts | 127 ++++++++++++++++++---------------
 1 file changed, 71 insertions(+), 56 deletions(-)

diff --git a/packages/remix-dev/compiler.ts b/packages/remix-dev/compiler.ts
index 1d4191899fd..c8c82854e07 100644
--- a/packages/remix-dev/compiler.ts
+++ b/packages/remix-dev/compiler.ts
@@ -409,50 +409,11 @@ async function createBrowserBuild(
       plugins,
     })
     .then(async (build) => {
-      // Model files and their imports as an adjacency list
-      // https://en.wikipedia.org/wiki/Adjacency_list
-      // E.g. "Module A imports from B, C, and D" becomes `{A:[B,C,D]}`
-      let graph = Object.fromEntries(
-        Object.entries(build.metafile.inputs).map(([input, { imports }]) => {
-          return [input, imports.map(({ path }) => path)];
-        })
-      );
-
-      // Order CSS Modules based on the module that imported them
-      let componentFiles = topologicalSort(graph, {
-        filterEdges: (node) => node.startsWith("css-modules-namespace:"),
-      });
-
-      let cssModules: string[] = [];
-      for (let componentFile of componentFiles) {
-        let imports = graph[componentFile];
-        for (let imported of imports) {
-          if (
-            imported.endsWith(".module.css") &&
-            !cssModules.includes(imported)
-          ) {
-            cssModules.push(imported);
-          }
-        }
-      }
-
-      let cssModulesContent = "";
-      let cssModulesMap = Object.fromEntries(
-        await Promise.all(
-          cssModules.map(async (filePath) => {
-            filePath = filePath.replace(/^css-modules-namespace:/, "");
-            let processed = await processCss({ config, filePath });
-            cssModulesContent += processed.css;
-            return [filePath, processed] as const;
-          })
-        )
-      );
-
-      let [globalStylesheetFilePath, globalStylesheetFileUrl] =
-        getCssModulesFileReferences(config, cssModulesContent);
+      let { cssContent, moduleMap, stylesheetUrl, stylesheetPath } =
+        await buildCssModules(config, build);
 
-      await fse.ensureDir(path.dirname(globalStylesheetFilePath));
-      await fse.writeFile(globalStylesheetFilePath, cssModulesContent);
+      await fse.ensureDir(path.dirname(stylesheetPath));
+      await fse.writeFile(stylesheetPath, cssContent);
 
       return {
         ...build,
@@ -467,23 +428,23 @@ async function createBrowserBuild(
             return undefined;
           }
           let builder = (async () => {
-            // Clear CSS modules data before rebuild
-            cssModulesContent = "";
-            cssModulesMap = {};
+            let { stylesheetUrl, stylesheetPath, ...rebuilt } =
+              await buildCssModules(config, build);
+            cssContent = rebuilt.cssContent;
+            moduleMap = rebuilt.moduleMap;
+
             let result = await build.rebuild!();
-            let [globalStylesheetFilePath, globalStylesheetFileUrl] =
-              getCssModulesFileReferences(config, cssModulesContent);
 
-            await fse.ensureDir(path.dirname(globalStylesheetFilePath));
-            await fse.writeFile(globalStylesheetFilePath, cssModulesContent);
+            await fse.ensureDir(path.dirname(stylesheetPath));
+            await fse.writeFile(stylesheetPath, cssContent);
 
             return {
               ...result,
               rebuild: builder,
               cssModules: {
-                globalStylesheetFilePath,
-                globalStylesheetFileUrl,
-                moduleMap: cssModulesMap,
+                globalStylesheetFilePath: stylesheetPath,
+                globalStylesheetFileUrl: stylesheetUrl,
+                moduleMap,
               },
             };
           }) as BuildInvalidate;
@@ -493,9 +454,9 @@ async function createBrowserBuild(
           return builder;
         })(),
         cssModules: {
-          globalStylesheetFilePath,
-          globalStylesheetFileUrl,
-          moduleMap: cssModulesMap,
+          globalStylesheetFilePath: stylesheetPath,
+          globalStylesheetFileUrl: stylesheetUrl,
+          moduleMap,
         },
       };
     });
@@ -663,3 +624,57 @@ function topologicalSort(
   }
   return visited;
 }
+
+async function buildCssModules(
+  config: RemixConfig,
+  build: esbuild.BuildResult & {
+    metafile: esbuild.Metafile;
+  }
+) {
+  // Model files and their imports as an adjacency list
+  // https://en.wikipedia.org/wiki/Adjacency_list
+  // E.g. "Module A imports from B, C, and D" becomes `{A:[B,C,D]}`
+  let graph = Object.fromEntries(
+    Object.entries(build.metafile.inputs).map(([input, { imports }]) => {
+      return [input, imports.map(({ path }) => path)];
+    })
+  );
+
+  // Order CSS Modules based on the module that imported them
+  let componentFiles = topologicalSort(graph, {
+    filterEdges: (node) => node.startsWith("css-modules-namespace:"),
+  });
+
+  let cssModules: string[] = [];
+  for (let componentFile of componentFiles) {
+    let imports = graph[componentFile];
+    for (let imported of imports) {
+      if (imported.endsWith(".module.css") && !cssModules.includes(imported)) {
+        cssModules.push(imported);
+      }
+    }
+  }
+
+  let cssContent = "";
+  let moduleMap = Object.fromEntries(
+    await Promise.all(
+      cssModules.map(async (filePath) => {
+        filePath = filePath.replace(/^css-modules-namespace:/, "");
+        let processed = await processCss({ config, filePath });
+        cssContent += processed.css;
+        return [filePath, processed] as const;
+      })
+    )
+  );
+  let [stylesheetPath, stylesheetUrl] = getCssModulesFileReferences(
+    config,
+    cssContent
+  );
+
+  return {
+    cssContent,
+    moduleMap: moduleMap,
+    stylesheetPath,
+    stylesheetUrl,
+  };
+}