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

feat(react-server): handle css in react-server #205

Merged
merged 16 commits into from
Mar 19, 2024
Merged

Conversation

hi-ogawa
Copy link
Owner

@hi-ogawa hi-ogawa commented Mar 18, 2024

The idea is to use virtual:react-server-css.js to copy all css imports from react server to browser entry:

// [virtual:client-entry-wrapper.js]
import "virtual:react-server-css.js"; // prepend to client entry
import "/src/entry-client";


// [virtual:react-server-css.js] (dev)
//   collect by traversing module graph from /src/entry-react-server
import "/src/routes/test/css/css-normal.css";
import "/src/routes/test/css/css-module.module.css";


// [virtual:react-server-css.js] (build)
//   collect RSC build's css assets
import "/dist/rsc/assets/index-B5HX2G7F.css";

This doesn't support cases when some special plugin on rsc dev server is supposed to do its own transform on react server module graph (e.g. unocss), but for unocss specifically, it has easier workaround #206, so for now it looks okay.

todo

  • dev: css
  • dev: ssr FOUC
  • dev: hot reload
  • dev: invalidate virtual:react-server-css.js when adding/removing css files?
  • build
  • test simple
  • test 3rd party lib https://github.com/vercel/react-tweet (later)
    • ouch, this one has a tricky structure where <Tweet /> server component has <TweetInfoCreatedAt /> client component

@hi-ogawa hi-ogawa mentioned this pull request Mar 19, 2024
69 tasks
@hi-ogawa hi-ogawa marked this pull request as ready for review March 19, 2024 03:59
@hi-ogawa hi-ogawa merged commit b56a1c2 into main Mar 19, 2024
4 checks passed
@hi-ogawa hi-ogawa deleted the feat-react-server-css branch March 19, 2024 05:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant