-
-
Notifications
You must be signed in to change notification settings - Fork 10.7k
fix: retain CSS for dynamic imports on navigation #14463
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
🦋 Changeset detectedLatest commit: de3b900 The changes in this PR will be included in the next version bump. This PR includes changesets to release 11 packages
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 |
Alpha release created:
git log --pretty=oneline [email protected] |
.map((href) => { | ||
let publicHref = `${ctx.publicPath}${href}`; | ||
// If this CSS file is also dynamically imported anywhere in the | ||
// application, we append a hash to the href so Vite ignores it when | ||
// managing dynamic CSS injection. If we don't do this, Vite's | ||
// dynamic import logic might hold off on inserting a new `link` | ||
// element because it's already in the page, only for React Router | ||
// to remove it when navigating to a new route, resulting in missing | ||
// styles. By appending a hash, Vite doesn't detect that the CSS is | ||
// already in the page and always manages its own `link` element. | ||
// This means that Vite's CSS stays in the page even if the | ||
// route-level CSS is removed from the document. We use a hash here | ||
// because it's a unique `href` value but isn't a unique network | ||
// request and only adds a single character. | ||
return allDynamicCssFiles.has(href) ? `${publicHref}#` : publicHref; | ||
}), |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is the core of the fix. The rest of the code is in service of this workaround.
Uh oh!
There was an error while loading. Please reload this page.