[WIP] StyleX support for Solid

[hyperknot]

I'm working on making an proper implementation of StyleX with Solid + Vite.

Officially StyleX doesn't have a Vite example, but they have an official Babel plugin and PostCSS plugin.

I was able to integrate those for the React Vite starter, it works correctly (if they accept it, my example would be an official Vite StyleX example one day):
https://github.com/hyperknot/bug_repro/tree/main/vite_stylex_react

Now, I'm trying to do the same for SolidJS, but the same syntax doesn't work.

I mean I have this in React:

react({
  babel: babelConfig,
}),

And in Solid:

solid({
  babel: babelConfig,
}),

Yet somehow the Solid one behaves totally different, it's not processing the files with babel. I've spent many hours on this issue, but I think I'm stuck, I don't know the internals of vite-plugin-solid. How is it different from vite-plugin-react?

Here is the full vite config:
https://github.com/hyperknot/bug_repro/blob/main/vite_stylex_solid/app/vite.config.ts

How can I implement this babel transformation step with Solid?

If you'd like to have a look at it, please look at my example here:
https://github.com/hyperknot/bug_repro/tree/main/vite_stylex_solid/app

When you run pnpm dev, it'll say

Uncaught Error: Unexpected 'stylex.defineVars' call at runtime. Styles must be compiled by '@stylexjs/babel-plugin'.
    at errorForFn (@stylexjs_stylex.js?v=b944b837:129:28)
    at Module.stylexDefineVars (@stylexjs_stylex.js?v=b944b837:141:9)
    at vars.stylex.ts:3:31

This is the step which is somehow skipped in Solid plugin, but is working fine in the React plugin.