From b4dff3800486753c7c0c7d566263c551f30174de Mon Sep 17 00:00:00 2001
From: Mark Dalgleish <mark.john.dalgleish@gmail.com>
Date: Fri, 28 Jul 2023 13:38:01 +1000
Subject: [PATCH] fix: decouple css-bundle from dev

---
 .changeset/decouple-css-bundle-from-dev.md       |  7 +++++++
 packages/remix-css-bundle/index.ts               | 13 ++++---------
 .../compiler/plugins/cssBundlePlugin.ts          | 16 +++++-----------
 3 files changed, 16 insertions(+), 20 deletions(-)
 create mode 100644 .changeset/decouple-css-bundle-from-dev.md

diff --git a/.changeset/decouple-css-bundle-from-dev.md b/.changeset/decouple-css-bundle-from-dev.md
new file mode 100644
index 00000000000..9c5d1081d3e
--- /dev/null
+++ b/.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`.
diff --git a/packages/remix-css-bundle/index.ts b/packages/remix-css-bundle/index.ts
index 75ce3d2d976..866461ef482 100644
--- a/packages/remix-css-bundle/index.ts
+++ b/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;
diff --git a/packages/remix-dev/compiler/plugins/cssBundlePlugin.ts b/packages/remix-dev/compiler/plugins/cssBundlePlugin.ts
index 41e2d388818..98f43110520 100644
--- a/packages/remix-dev/compiler/plugins/cssBundlePlugin.ts
+++ b/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"
+          };`,
         };
       });
     },