styles are not applied correctly with stylex in server components

[emilgpa]

Using stylex with https://github.com/nonzzz/vite-plugin-stylex not apply correctly the styles when the component is a server component. It is applied correctly when the component is a client component. I don't know where the error comes from, if it is from waku or from the plugin. If it is from the plugin then I would open a issue there.

I leave a repo to reproduce it: https://stackblitz.com/edit/vitejs-vite-gj5y4r.
The Logotype component should render with blue color but it is black when the server is running first time. If you save a random file like templates/root-layout.tsx then the Logotype component is correctly displays in blue. It happens only in dev mode, when the repository is built and started (waku build, waku start) everything works.

[dai-shi]

We had some issues with vite-plugin-stylex and switched to vite-plugin-stylex-dev by @nonzzz. #361

It would be nice if vite-plugin-sytylex worked too, but I assume it's the upstream issue. (Or, it might be resolved as we upgrade/improve Waku.)

[emilgpa]

@dai-shi The plugin that I use is the same (vite-plugin-stylex-dev). Maybe you were confused by the name in the url? I mention this because it does not have -dev at the end.

[dai-shi]

Maybe you were confused by the name in the url?

Exactly...

Then, I think @nonzzz can help here?

[hipstersmoothie]

I get lots of random errors on startup with stylex too. If you run start on my project twice though it does work. builds are fine. Can share the project if you want

[nonzzz]

Let me check it.

[nonzzz]

@emilgpa Did you add import "@stylex-dev.css"; in your Logotype.tsx ? I add it work well.

[nonzzz]

@hipstersmoothie If you have any problem. Share your project in my plugin repo, i have time to check it.Thanks.

[emilgpa]

@nonzzz Ok, it works. I added it in the root-layout.tsx. I thought it is only needed in that entry file. Anyway, I have the same problem in a project that is larger even though it includes that import. I think I'll need to include this import in all files where stylex is used and maybe that will fix it. I'll try. If it is not solved, I will try to see what it could be and upload a repo again to reproduce it. Thank you.

[hipstersmoothie]

@nonzzz I put that in my _layout and it works a lot better now! No weird react errors anymore. You should really add that to the docs 😄

[emilgpa]

@nonzzz After to apply the import in all files, the most times it render correctly. But sometimes some server components do not have their styles applied correctly. When the browser is loading the files, the vite console shows something like that:

...
14:13:22 [vite] hmr update /@id/@stylex-dev.css (x161)
14:13:22 [vite] page reload @stylex-dev.css
14:13:22 [vite] hmr update /@id/@stylex-dev.css
14:13:22 [vite] page reload @stylex-dev.css
14:13:22 [vite] hmr update /@id/@stylex-dev.css
14:13:22 [vite] hmr update /@id/@stylex-dev.css
14:13:22 [vite] page reload @stylex-dev.css
14:13:22 [vite] hmr update /@id/@stylex-dev.css
...

Many files are being compiled and loaded and meanwhile the browser with vite displays the components. In this part precisely, is when the server components are shown alternating their version with the styles applied or not, to finally show them correctly applied or not. Currently, as I mentioned at the beginning, most of the time they display correctly but a few times it fails, so I reload and they display correctly again. It seems like something like a race condition.

[hipstersmoothie]

I think a lot of that could be fixed with better caching nonzzz/vite-plugin-stylex#28

[dai-shi]

I just noticed running npm run examples:dev:12_css in the waku repo, it shows
[vite] page reload @stylex-dev.css every time which is a problem that should be resolved. #756 (comment)

[hipstersmoothie]

Yeah that problem is pretty bad and pollutes the log a log. I think what's going on is it creates a virtual module @stylex-dev.css that it invalidates every time it sees a new component using stylex. This can lead to lots of weird issues cause everything is invalidating so quickly.

[dai-shi]

@nonzzz Are you still around? There might be some updates in the Waku core part. Can you look into it?

[dai-shi]

Hmm, does anyone know updated alternative vite plugins for stylex?

[emilgpa]

HorusGoul/vite-plugin-stylex seems to be up to date although I haven't used it yet.

[dai-shi]

Thanks. I wonder if you would be interested in trying out.

[emilgpa]

Yes, I plan to try it out, although I don't know when exactly.

[tylersayshi]

Tried this out on an empty new waku app and it worked well for the basic example. Setup was super simple too:

tylersayshi/waku-stylex@9689a2d

One quirk was a type error with the plugin. I am guessing the library needs to update their types for vite 6, but it still works afaict

[dai-shi]

@tylersayshi Great! Can you update examples/37_css? For the type issue, use // @ts-expect-error.

[dai-shi]

reopened by #1106.

[emilgpa]

One of the creators of stylex is doing the plugin (possibly it will be the official one): facebook/stylex#66 (comment)