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" + };`, }; }); },