Skip to content
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

fix(rsc): Preinit client component css for server components in production #10210

Merged
merged 12 commits into from
Mar 15, 2024

Conversation

Josh-Walker-GM
Copy link
Collaborator

@Josh-Walker-GM Josh-Walker-GM commented Mar 12, 2024

Problem
Currently RSC during yarn rw serve would not load the CSS of nested client components. In development, things appear to work fine without additional manipulation due to the vite dev server.

Approach
During build, we insert preinit calls into server components that cause the browser to load all CSS that is needed for any client component that the server component will cause to be loaded.

Changes

  1. Update the RSC analyse plugin to construct a map between the component id and the component import ids.
  2. Add an additional plugin to the RSC server build step. This plugin analyses the client build manifest to gather all the known CSS assets. It then inserts preinit calls to load CSS assets into server components that would require them because they load client components that have associated CSS assets.

Notes

  1. The tests added here are really only ensuring that we do not make a change to the behaviour that we currently have. There's a bit of a limit as to what we can do when we simply pass known values to a test rather than run these in a more E2E style fashion in a fully fledged RSC test project - with known src, dist, and browser rendering.

@Josh-Walker-GM Josh-Walker-GM added release:fix This PR is a fix changesets-ok Override the changesets check labels Mar 12, 2024
@Josh-Walker-GM Josh-Walker-GM added this to the RSC milestone Mar 12, 2024
@Josh-Walker-GM Josh-Walker-GM self-assigned this Mar 12, 2024
@Josh-Walker-GM Josh-Walker-GM marked this pull request as ready for review March 12, 2024 11:59
@Josh-Walker-GM Josh-Walker-GM marked this pull request as draft March 12, 2024 14:14
@Josh-Walker-GM Josh-Walker-GM marked this pull request as ready for review March 12, 2024 14:22
@Josh-Walker-GM Josh-Walker-GM added the fixture-ok Override the test project fixture check label Mar 12, 2024
@Josh-Walker-GM
Copy link
Collaborator Author

@dac09 are you happy to give this one a review when you get time? I'd like it if we could confirm this is needed if the photo app seems to work without any specific CSS work? I'm also happy to debug those windows tests when I get home and have a windows machine available.

@Josh-Walker-GM Josh-Walker-GM requested a review from Tobbe March 14, 2024 14:32
@Josh-Walker-GM Josh-Walker-GM requested review from dac09 and removed request for Tobbe March 14, 2024 14:47
@Josh-Walker-GM Josh-Walker-GM merged commit 25b24c8 into main Mar 15, 2024
44 checks passed
@Josh-Walker-GM Josh-Walker-GM deleted the jgmw-rsc/css-preinit branch March 15, 2024 08:56
@Josh-Walker-GM Josh-Walker-GM modified the milestones: RSC, v8.0.0 Sep 4, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
changesets-ok Override the changesets check fixture-ok Override the test project fixture check release:fix This PR is a fix
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant