fix: handle CSS bundle updates during HMR

.changeset/css-bundle-hmr.md

@@ -0,0 +1,6 @@
+---
+"@remix-run/css-bundle": patch
+"@remix-run/dev": patch
+---
+
+Ensure changes to CSS inserted via `@remix-run/css-bundle` are picked up during HMR

integration/hmr-test.ts

@@ -13,6 +13,7 @@ let fixture = (options: { port: number; appServerPort: number }) => ({
       port: options.port,
       appServerPort: options.appServerPort,
     },
+    unstable_cssModules: true,
     unstable_tailwind: true,
     v2_routeConvention: true,
     v2_errorBoundary: true,
@@ -26,6 +27,7 @@ let fixture = (options: { port: number; appServerPort: number }) => ({
         "dev:app": `cross-env NODE_ENV=development nodemon --watch build/ ./server.js`,
       },
       dependencies: {
+        "@remix-run/css-bundle": "0.0.0-local-version",
         "@remix-run/node": "0.0.0-local-version",
         "@remix-run/react": "0.0.0-local-version",
         "cross-env": "0.0.0-local-version",
@@ -90,15 +92,23 @@ let fixture = (options: { port: number; appServerPort: number }) => ({
       @tailwind utilities;
     `,
 
+    "app/styles.module.css": css`
+      .test {
+        color: initial;
+      }
+    `,
+
     "app/root.tsx": js`
       import type { LinksFunction } from "@remix-run/node";
       import { Link, Links, LiveReload, Meta, Outlet, Scripts } from "@remix-run/react";
+      import { cssBundleHref } from "@remix-run/css-bundle";
 
       import Counter from "./components/counter";
       import styles from "./tailwind.css";
 
       export const links: LinksFunction = () => [
         { rel: "stylesheet", href: styles },
+        ...cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : [],
       ];
 
       export default function Root() {
@@ -246,25 +256,40 @@ test("HMR", async ({ page }) => {
     let originalIndex = fs.readFileSync(indexPath, "utf8");
     let counterPath = path.join(projectDir, "app", "components", "counter.tsx");
     let originalCounter = fs.readFileSync(counterPath, "utf8");
+    let cssModulePath = path.join(projectDir, "app", "styles.module.css");
+    let originalCssModule = fs.readFileSync(cssModulePath, "utf8");
 
     // make content and style changed to index route
+    let newCssModule = `
+      .test {
+        background: black;
+        color: white;
+      }
+    `;
+    fs.writeFileSync(cssModulePath, newCssModule);
+
+    // detect HMR'd style changes
+    await page.waitForLoadState("networkidle");
+
     let newIndex = `
       import { useLoaderData } from "@remix-run/react";
+      import styles from "~/styles.module.css";
       export default function Index() {
         const t = useLoaderData();
         return (
           <main>
-            <h1 className="text-white bg-black">Changed</h1>
+            <h1 className={styles.test}>Changed</h1>
           </main>
         )
       }
     `;
     fs.writeFileSync(indexPath, newIndex);
 
-    // detect HMR'd content and style changes
+    // detect HMR'd content
     await page.waitForLoadState("networkidle");
+
     let h1 = page.getByText("Changed");
-    await h1.waitFor({ timeout: 2000 });
+    await h1.waitFor({ timeout: 5000 });
     expect(h1).toHaveCSS("color", "rgb(255, 255, 255)");
     expect(h1).toHaveCSS("background-color", "rgb(0, 0, 0)");
 
@@ -274,6 +299,7 @@ test("HMR", async ({ page }) => {
 
     // undo change
     fs.writeFileSync(indexPath, originalIndex);
+    fs.writeFileSync(cssModulePath, originalCssModule);
     await page.getByText("Index Title").waitFor({ timeout: 2000 });
     expect(await page.getByLabel("Root Input").inputValue()).toBe("asdfasdf");
     await page.waitForSelector(`#root-counter:has-text("inc 1")`);

packages/remix-css-bundle/browser.ts

@@ -2,4 +2,12 @@ import type { AssetsManifest } from "@remix-run/dev/assets-manifest";
 
 let assetsManifest: AssetsManifest = (window as any).__remixManifest;
 
-export const cssBundleHref = assetsManifest.cssBundleHref;
+declare const __INJECT_CSS_BUNDLE_HREF__: string | undefined;
+
+// Injected by `cssBundleUpdatePlugin` on rebuilds
+let updatedHref: string | undefined =
+  typeof __INJECT_CSS_BUNDLE_HREF__ === "string"
+    ? __INJECT_CSS_BUNDLE_HREF__
+    : undefined;
+
+export const cssBundleHref = updatedHref || assetsManifest.cssBundleHref;

packages/remix-dev/compiler/assets.ts

@@ -42,12 +42,12 @@ export interface AssetsManifest {
 export async function createAssetsManifest({
   config,
   metafile,
-  cssBundlePath,
+  cssBundleHref,
   hmr,
 }: {
   config: RemixConfig;
   metafile: esbuild.Metafile;
-  cssBundlePath?: string;
+  cssBundleHref?: string;
   hmr?: AssetsManifest["hmr"];
 }): Promise<AssetsManifest> {
   function resolveUrl(outputPath: string): string {
@@ -126,8 +126,6 @@ export async function createAssetsManifest({
     JSON.stringify({ entry, routes, hmrRoutes: hmr?.routes })
   ).slice(0, 8);
 
-  let cssBundleHref = cssBundlePath ? resolveUrl(cssBundlePath) : undefined;
-
   return { version, entry, routes, cssBundleHref, hmr };
 }
 

packages/remix-dev/compiler/compileBrowser.ts

@@ -20,6 +20,7 @@ import { deprecatedRemixPackagePlugin } from "./plugins/deprecatedRemixPackagePl
 import { emptyModulesPlugin } from "./plugins/emptyModulesPlugin";
 import { mdxPlugin } from "./plugins/mdx";
 import { urlImportsPlugin } from "./plugins/urlImportsPlugin";
+import { cssBundleUpdatePlugin } from "./plugins/cssBundleUpdatePlugin";
 import { cssModulesPlugin } from "./plugins/cssModulesPlugin";
 import { cssSideEffectImportsPlugin } from "./plugins/cssSideEffectImportsPlugin";
 import { vanillaExtractPlugin } from "./plugins/vanillaExtractPlugin";
@@ -78,6 +79,12 @@ const isCssBundlingEnabled = (config: RemixConfig): boolean =>
       config.future.unstable_cssSideEffectImports ||
       config.future.unstable_vanillaExtract
   );
+
+let cssBundleHrefPromise: Promise<string | undefined>;
+
+// Allow plugins to access the latest value of the CSS bundle during rebuilds
+const getCssBundleHref = () => cssBundleHrefPromise;
+
 const createEsbuildConfig = (
   build: "app" | "css",
   config: RemixConfig,
@@ -109,6 +116,7 @@ const createEsbuildConfig = (
 
   let plugins: esbuild.Plugin[] = [
     deprecatedRemixPackagePlugin(options.onWarning),
+    build === "css" ? cssBundleUpdatePlugin({ getCssBundleHref }) : null,
     isCssBundlingEnabled(config) && isCssBuild
       ? cssBundleEntryModulePlugin(config)
       : null,
@@ -131,7 +139,7 @@ const createEsbuildConfig = (
     NodeModulesPolyfillPlugin(),
   ].filter(isNotNull);
 
-  if (mode === "development" && config.future.unstable_dev) {
+  if (build === "app" && mode === "development" && config.future.unstable_dev) {
     // TODO prebundle deps instead of chunking just these ones
     let isolateChunks = [
       require.resolve("react"),
@@ -305,12 +313,20 @@ export const createBrowserCompiler = (
           }),
       ]);
 
-      // Return the CSS bundle path so we can use it to generate the manifest
-      return cssBundlePath;
+      let cssBundleHref =
+        remixConfig.publicPath +
+        path.relative(
+          remixConfig.assetsBuildDirectory,
+          path.resolve(cssBundlePath)
+        );
+
+      return cssBundleHref;
     };
 
-    let [cssBundlePath, metafile] = await Promise.all([
-      cssBuildTask(),
+    cssBundleHrefPromise = cssBuildTask();
+
+    let [cssBundleHref, metafile] = await Promise.all([
+      cssBundleHrefPromise,
       appBuildTask(),
     ]);
 
@@ -336,7 +352,7 @@ export const createBrowserCompiler = (
     let manifest = await createAssetsManifest({
       config: remixConfig,
       metafile: appCompiler.metafile!,
-      cssBundlePath,
+      cssBundleHref,
       hmr,
     });
     await writeAssetsManifest(remixConfig, manifest);

packages/remix-dev/compiler/plugins/cssBundleUpdatePlugin.ts

@@ -0,0 +1,74 @@
+import type { Plugin } from "esbuild";
+import { readFile } from "fs-extra";
+
+const pluginName = "css-bundle-update-plugin";
+const namespace = `${pluginName}-ns`;
+
+/**
+ * This plugin updates the source code for the "css-bundle" package on rebuilds
+ * to contain the latest CSS bundle href so CSS changes get picked up for HMR.
+ * Without this plugin, the "css-bundle" package source code never changes on
+ * disk so it never triggers an update.
+ */
+export function cssBundleUpdatePlugin({
+  getCssBundleHref,
+}: {
+  getCssBundleHref: () => Promise<string | undefined>;
+}): Plugin {
+  return {
+    name: "css-bundle-update-plugin",
+    async setup(build) {
+      let isRebuild = false;
+      build.onEnd(() => {
+        isRebuild = true;
+      });
+
+      let preventInfiniteLoop = {};
+      build.onResolve({ filter: /^@remix-run\/css-bundle$/ }, async (args) => {
+        // Prevent plugin from infinitely trying to resolve itself
+        if (args.pluginData === preventInfiniteLoop) {
+          return null;
+        }
+
+        // We don't wait for the href on the first build and instead rely on the
+        // default runtime manifest lookup. We only need to update this package
+        // to reflect changes during development so the first build is fine.
+        if (!isRebuild) {
+          return null;
+        }
+
+        let resolvedPath = (
+          await build.resolve(args.path, {
+            resolveDir: args.resolveDir,
+            kind: args.kind,
+            pluginData: preventInfiniteLoop,
+          })
+        ).path;
+
+        return {
+          path: resolvedPath,
+          namespace,
+        };
+      });
+
+      build.onLoad({ filter: /.*/, namespace }, async (args) => {
+        let [cssBundleHref, contents] = await Promise.all([
+          getCssBundleHref(),
+          readFile(args.path, "utf8"),
+        ]);
+
+        if (cssBundleHref) {
+          contents = contents.replace(
+            /__INJECT_CSS_BUNDLE_HREF__/g,
+            JSON.stringify(cssBundleHref)
+          );
+        }
+
+        return {
+          loader: "js",
+          contents,
+        };
+      });
+    },
+  };
+}