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