Can @vanilla-extract/vite-plugin be used for React Server Component?

[ojj1123]

Background

I want to use vanilla-extract with waku, Minimal React Framework. It supports RSC. This framework use a bundler, vite internally. It means there are lots of vite's plugins for implementing RSC.

The problem is that when I use @vanilla-extract/vite-plugin with waku. I encountered this error:

> waku dev

ready: Listening on http://localhost:3000/
Cannot process SSR ReferenceError: __vanilla_globalCssAdapter__ is not defined
    at eval (/Users/jeongjin/GitHub/waku-vanilla/src/components/styles.css.ts:7:34)
    at async instantiateModule (file:///Users/jeongjin/GitHub/waku-vanilla/node_modules/.pnpm/vite@5.4.8/node_modules/vite/dist/node/chunks/dep-CDnG8rE7.js:52915:5) {
  plugin: 'rsc-delegate-plugin',
  id: '/Users/jeongjin/GitHub/waku-vanilla/src/pages/index.tsx',
  pluginCode: 'import { jsxDEV } from "react/jsx-dev-runtime";\n' +
    'import { Link } from "waku";\n' +
    'import { Counter } from "../components/counter";\n' +
    'import { container } from "../components/styles.css";\n' +
    'export default async function HomePage() {\n' +
    '  const data = await getData();\n' +
    '  return /* @__PURE__ */ jsxDEV("div", { className: container, children: [\n' +
...
}
node:internal/process/promises:289
            triggerUncaughtException(err, true /* fromPromise */);
            ^

ReferenceError: __vanilla_globalCssAdapter__ is not defined
    at eval (/Users/jeongjin/GitHub/waku-vanilla/src/components/styles.css.ts:7:34)
    at async instantiateModule (file:///Users/jeongjin/GitHub/waku-vanilla/node_modules/.pnpm/vite@5.4.8/node_modules/vite/dist/node/chunks/dep-CDnG8rE7.js:52915:5) {
  plugin: 'rsc-delegate-plugin',
  id: '/Users/jeongjin/GitHub/waku-vanilla/src/pages/index.tsx',
  pluginCode: 'import { jsxDEV } from "react/jsx-dev-runtime";\n' +
    'import { Link } from "waku";\n' +
    'import { Counter } from "../components/counter";\n' +
    'import { container } from "../components/styles.css";\n' +
    'export default async function HomePage() {\n' +
    '  const data = await getData();\n' +
    '  return /* @__PURE__ */ jsxDEV("div", { className: container, children: [\n' +
...
}

I checked that __vanilla_globalCssAdapter__ is used in vanilla-extract internally.

I don't know @vanilla-extract/vite-plugin is designed for server component, but I feel like it's not. And I'm not sure whether vanilla-extract's issue or waku's one. So If anyone is interested in this problem, please check out this issue!

Related issue: dai-shi/waku#953

How to reproduce

This is reproduction of this issue.
https://github.com/ojj1123/repro-waku-vanilla-extract

1. pnpm install
2. pnpm dev
3. open http://localhost:3000/
4. you can see this and check out your console error.

Questions

Supporting vanilla-extract on RSC, Should the framework implement its own plugin like @vanilla-extract/next-plugin or @vanilla-extract/webpack-plugin?