not compatible with `@vanilla-extract/css`

[himself65]

See https://github.com/Himself65/affine-waku/tree/css-issue

[dai-shi]

does it emit for client bundle but not for server bundle?

[himself65]

does it emit for client bundle but not for server bundle?

Both not be emitted, I'm now debugging it.

[himself65]

It's weird when running waku source code. I think it might need some improvement on DX

[dai-shi]

Not sure if I follow, but I agree there are tons of room for improvement in terms of Waku's DX.

[dai-shi]

Both not be emitted

That's unfortunate. I hoped it would at least work for client.

[himself65]

Sorry, my mistake. I tried it again.

The issue is:

• if the css.ts file is only imported by the server component, CSS file won't emit
• If it is imported by a client component, it will

[himself65]

It think generates the wrong output code

// App-88e67fcf.js
import { jsxDEV } from "react/jsx-dev-runtime";
import { Counter } from "./rsc0.js";
import { Suspense } from "react";
import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
import { style } from "@vanilla-extract/css";
setFileScope("src/App.css.ts", "affine-waku");
const container = style(
  { border: "3px red dashed", margin: "1em", padding: "1em" }
);
style(
  { border: "3px blue dashed", margin: "1em", padding: "1em" }
);
endFileScope();
const App = ({ name = "Anonymous" }) => {
  return /* @__PURE__ */ jsxDEV("div", { className: container, children: [
    /* @__PURE__ */ jsxDEV("h1", { children: [
      "Hello ",
      name,
      "!!"
    ] }, void 0, true, {
      fileName: "/Users/himself65/Code/affine-waku/src/App.tsx",
      lineNumber: 8,
      columnNumber: 7
    }, globalThis),
    /* @__PURE__ */ jsxDEV("h3", { children: "This is a server component." }, void 0, false, {
      fileName: "/Users/himself65/Code/affine-waku/src/App.tsx",
      lineNumber: 9,
      columnNumber: 7
    }, globalThis),
    /* @__PURE__ */ jsxDEV(Suspense, { fallback: "loading...", children: /* @__PURE__ */ jsxDEV(Counter, {}, void 0, false, {
      fileName: "/Users/himself65/Code/affine-waku/src/App.tsx",
      lineNumber: 11,
      columnNumber: 9
    }, globalThis) }, void 0, false, {
      fileName: "/Users/himself65/Code/affine-waku/src/App.tsx",
      lineNumber: 10,
      columnNumber: 7
    }, globalThis)
  ] }, void 0, true, {
    fileName: "/Users/himself65/Code/affine-waku/src/App.tsx",
    lineNumber: 7,
    columnNumber: 5
  }, globalThis);
};
export {
  App as default
};

[dai-shi]

that looks tough...

[dai-shi]

106 includes something related to this.

Can you check what happens with the latest version v0.14.0?

[himself65]

OK

[dai-shi]

@himself65 please check this too. 🙏

[himself65]

not working still

see https://github.com/himself65/waku-ecosystem/tree/main/playground/waku-vanilla-extract-css

[dai-shi]

That's unfortunate...

[himself65]

I try in the latest version. It also now cannot run in the client component

[dai-shi]

Hoped to support react-tweet #90 too, but it still doesn't. We need someone to help on it.

[himself65]

I guess there might be because of the config plugins missing or something

[dai-shi]

For #90, it seems to work for build, but for dev, vite doesn't understand .css in node_modules. There must be something to do with Vite config.

[Aslemammad]

I'm putting some time on this and I'll let you know my findings.