fix(dev): add param to route css so it is not deduped by react

[joshuaellis]

Description

React dedupes CSS files that are identical, which is a good default in the case of vanilla react where multiple components might require the same chunk of css however in react router where the route may mount the css chunk first before lazy loaded components have loaded can cause those lazy loaded components to loose their styles when the page is navigated away from.

To solve this, we add a small hash param to route level CSS in the dev package. I used a hash as opposed to a search param because it doesn't download the same CSS twice but the deduping is no longer happening. We still fetch the CSS on route changes, but this is the same behaviour we have now in react-router so i've assumed this is fine.

I've left the branch on my fork with the failing test displayed in 14415, but otherwise modified it here to be a test to keep long term.

Related issues

• resolves Route navigation removes CSS files that lazy loaded components are using #14415
• closes fix: persist lazy-loaded CSS across route changes #14419

[changeset-bot]

🦋 Changeset detected

Latest commit: f1c927d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 11 packages

Name	Type
@react-router/dev	Patch
@react-router/fs-routes	Patch
@react-router/remix-routes-option-adapter	Patch
create-react-router	Patch
react-router	Patch
react-router-dom	Patch
@react-router/architect	Patch
@react-router/cloudflare	Patch
@react-router/express	Patch
@react-router/node	Patch
@react-router/serve	Patch

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

[remix-cla-bot]

Hi @joshuaellis,

Welcome, and thank you for contributing to React Router!

Before we consider your pull request, we ask that you sign our Contributor License Agreement (CLA). We require this only once.

You may review the CLA and sign it by adding your name to contributors.yml.

Once the CLA is signed, the CLA Signed label will be added to the pull request.

If you have already signed the CLA and received this response in error, or if you have any questions, please contact us at [email protected].

Thanks!

- The Remix team

[remix-cla-bot]

Thank you for signing the Contributor License Agreement. Let's get this merged! 🥳

[markdalgleish]

Thanks for the PR!

I looked into this and landed on a similar solution, but I also inspect the Vite manifest and only apply the workaround to href values that are used in a dynamic import context elsewhere in the application. PR is here: #14447 if you're interested. It's been merged to dev and will be out in the next release.