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

remix-run · Jul 30, 2023 · 1e19750 · 1e19750
1 parent f1436ea
commit 1e19750
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 20 deletions.
diff --git a/.changeset/decouple-css-bundle-from-dev.md 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
@@ -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
@@ -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"
+          };`,
         };
       });
     },