In need of stylex for deno fresh

[kordeviant]

this is a feature/plugin request.
Stylex is a css in js solution that builds css in compile time,
this issue is created so please people with knowledge pave the way to make it happen in fresh.
please provide the way this plugin needs to be implemented.

[nmn]

Please create an issue on the StyleX repo as well so we can help make this happen. What bundler is Fresh based on?

[deer]

I started looking at this (without knowing about this issue) but didn't make a whole bunch of progress last week: https://discord.com/channels/684898665143206084/1189565451664117760/1189681460932788254. For simplicity, the summarized version is:

1) they use babel instead of esbuild. Not a huge issue, other than I don't know anything about babel
2) need to perform some sort of compilation , because the functions throw errors if actually invoked
3) fresh doesn't have the idea of compiling source files and then running them
4) would likely need more changes to the plugin api to modify fresh.gen.ts (or some other solution). This relates back to point 1, but when we try to import everything for the manifest, this ends up running variables declared with stylex.create, which throws the error

@nmn, the key issue I see is number 2, in that fresh doesn't currently have a spot to perform some sort of compilation. I started investigating what it would look like if fresh plugins could create "processed" files, and then would use these files instead of the original source files. This all seemed to work just fine, assuming the modified source can be produced (i.e. remove stylex.create and generate some .css).

The stumbling block I had was how to integrate with babel easily, although I must admit I didn't spend a large amount of time trying. Fresh has the concept of https://fresh.deno.dev/docs/concepts/ahead-of-time-builds to run esbuild on the islands that get sent to the browser. Ideally there would be an esbuild plugin provided by stylex that fresh could simply use.

@marvinhagemeister can speak about the entire picture more intelligently, since he has a more complete view of node/react/babel/etc. (I basically just know about deno/fresh 😅 )

[marvinhagemeister]

The overall issue is the same as in #1622 . The crux of the problem is that we don't compile the server code at the moment. We only transpile the code that is used for islands via esbuild. Adding the necessary babel pass is trivial, but for as long as we don't transpile the server code it wouldn't help much.

I've been advocation for adding some sort of loader API to Deno for enabling those workflows over the past months, but it looks like that won't come anytime soon. At least not support for custom loaders. That means the only other option is to transpile everything ourselves with Fresh, but then you run into the problem that deno test won't work anymore. I'm not sure yet what's the best way to solve that is.

[nmn]

For context, here's how StyleX is supposed to work:

1. Transform all source JS files using the Babel plugin.
2. The babel plugin produces JSON styles from each of the JS files as metadata
3. Collect all the styles from all the files and generate a single CSS file for the whole app.

This approach doesn't seem to fit in with the way Deno works at the moment. Not only do we need to collect styles from both server and client code. We also need to avoid any kind of bundle splitting of the generated CSS. Generated a single small CSS file is a core performance reason to use StyleX.

The other problem seems to be the way Deno handles imports. StyleX needs to compile imported packages that may contain StyleX too.

---

It sounds like the only possible solution here is to have a "source" folder that gets compiled wholesale into a "src" folder. This compilation can happen while you author code. The CSS file can be updated in-place with every edit.

I'm already looking into this, but even with node_modules I need a tool to figure out dependency trees while not bundling to make this possible.