fix: decouple css-bundle from dev (#6982)

.changeset/decouple-css-bundle-from-dev.md

@@ -0,0 +1,7 @@
+---
+"@remix-run/css-bundle": patch
+"@remix-run/dev": patch
+---
+Decouple the `@remix-run/dev` package from the contents of the `@remix-run/css-bundle` package.
+
+The contents of the `@remix-run/css-bundle` package are now entirely managed by the Remix compiler. Even though it's still recommended that your Remix dependencies all share the same version, this change ensures that there are no runtime errors when upgrading `@remix-run/dev` without upgrading `@remix-run/css-bundle`.

packages/remix-css-bundle/index.ts

@@ -1,9 +1,4 @@
-declare const __INJECT_CSS_BUNDLE_HREF__: string | undefined;
-
-// Injected by `cssBundlePlugin`
-let cssBundleHref: string | undefined =
-  typeof __INJECT_CSS_BUNDLE_HREF__ === "string"
-    ? __INJECT_CSS_BUNDLE_HREF__
-    : undefined;
-
-export { cssBundleHref };
+// This file's contents are replaced by `cssBundlePlugin`. This file only exists
+// to provide type definitions and a graceful fallback when importing this
+// package outside of the Remix compiler.
+export const cssBundleHref: string | undefined = undefined;

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

@@ -1,9 +1,8 @@
 import type { Plugin } from "esbuild";
-import { readFile } from "fs-extra";
 
 import type { LazyValue } from "../lazyValue";
 
-const pluginName = "css-bundle-update-plugin";
+const pluginName = "css-bundle-plugin";
 const namespace = `${pluginName}-ns`;
 
 /**
@@ -38,19 +37,14 @@ export function cssBundlePlugin(refs: {
         };
       });
 
-      build.onLoad({ filter: /.*/, namespace }, async (args) => {
+      build.onLoad({ filter: /.*/, namespace }, async () => {
         let cssBundleHref = await refs.lazyCssBundleHref.get();
 
-        let contents = await readFile(args.path, "utf8");
-
-        contents = contents.replace(
-          /__INJECT_CSS_BUNDLE_HREF__/g,
-          cssBundleHref ? JSON.stringify(cssBundleHref) : "undefined"
-        );
-
         return {
           loader: "js",
-          contents,
+          contents: `export const cssBundleHref = ${
+            cssBundleHref ? JSON.stringify(cssBundleHref) : "undefined"
+          };`,
         };
       });
     },