Get critical CSS in dev from client env #13503
Conversation
🦋 Changeset detectedLatest commit: a25eed8 The changes in this PR will be included in the next version bump. Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
| // We use a separate environment for loading the critical CSS during | ||
| // development. This is because "ssrLoadModule" isn't available if the "ssr" | ||
| // environment has been defined by another plugin (e.g. | ||
| // vite-plugin-cloudflare) as a custom Vite.DevEnvironment rather than a | ||
| // Vite.RunnableDevEnvironment: | ||
| // https://vite.dev/guide/api-environment-frameworks.html#runtime-agnostic-ssr | ||
| const CSS_DEV_HELPER_ENVIRONMENT_NAME = | ||
| "__react_router_css_dev_helper__" as const; | ||
| type CssDevHelperEnvironmentName = typeof CSS_DEV_HELPER_ENVIRONMENT_NAME; |
There was a problem hiding this comment.
Now that we're loading the CSS from the client environment, we don't need to introduce a custom Vite.RunnableDevEnvironment anymore. This was only introduced because we were originally importing the CSS from the SSR environment, but when using vite-plugin-cloudflare, the SSR environment was a custom Vite.DevEnvironment that couldn't be imported from. With our new approach in this PR, this distinction doesn't matter.
markdalgleish
deleted the
markdalgleish/get-critical-css-from-client-env
branch
|
🤖 Hello there, We just published version Thanks! |
|
🤖 Hello there, We just published version Thanks! |
Fixes #13379
When we extract critical CSS during dev, we're currently doing this from the SSR environment, or a custom environment when using Vite's Environment API to support non-Node SSR environments. This seems to cause issues if the SSR environment differs from the client environment in terms of resolving CSS files. In the case of the linked issue above, our critical CSS extraction logic doesn't work for the virtual CSS modules that Pigment CSS introduces.
To fix this issue, we now request the same CSS that the browser does by passing the CSS URL to
viteDevServer.transformRequest. The only down side of this approach is that it returns a string of JS code with the CSS embedded within it as a string (along with HMR code etc.). To work around this, we use Babel to parse the JS and find the value for the__vite__cssvariable.