facebook
feat: add `esbuild` plugin
Addresses issue #83
Adds a StyleX plugin for esbuild bundler. There are some caveats with how the esbuild plugin API works, and it seems that the consumer will have to provide a full path to the build directory directly to the plugin, because there's no other way to access the build path in the onEnd callback. I am using the onEnd callback in this case (which runs at the end of the build, implied by the name), as we first have to transform each ts[x]/js[x] before we can process the StyleX rules. Let me know if you have simpler ideas on how to solve the bundling of CSS.
An example of how consuming the plugin would look like:
await esbuild.build({
entryPoints: [path.resolve(__dirname, 'src/index.js')],
outdir: 'dist',
outfile: 'bundled.js',
plugins: [stylexPlugin({ absoluteFilePath: path.resolve(__dirname, 'dist/stylex.css') })],
});
Some remaining things to do:
- [x] Improve tests, specifically test for injections in dev and for the output in non-dev build
- [x] Add CSS writes to disk
@nmn I addressed all of your comments. the only issue left now is that flow complains about not being able to resolve some modules. not sure why though, but I assume it has something to do with those modules not having flow types (?). I saw that you created flow_modules file with type definitions for rollup and some babel plugins in the rollup-plugin -- is there a way to generate that somehow?
is there a way to generate that somehow?
There are some scripts online for it as well, but I manually translate the Typescript types for them.
@nmn got you, thanks!
I added translations for esbuild and also ported babel types from the rollup-plugin. perhaps @babel/core definition should be placed in flow-typed as it is now used in two packages?
besides that, I also added node-libraries.js file to flow-typed for node module declarations as I was getting type resolution issues with filesystem module.
@nmn yup, looking into it. probably related to package lock merge conflicts that I tried to resolve yesterday.