PostCSS's output file gets clobbered by esbuild

[jaredcwhite]

It's common for JS bundlers like esbuild to output a CSS file as well due to imports of CSS files within the JavaScript dependency graph. Currently when using esbuild + PostCSS together in a Rails 7 app and there's any kind of CSS import within the JS files, esbuild will output to app/assets/builds/application.css…which is also where PostCSS outputs its bundle, and you can literally see the file get clobbered over and over depending on if PostCSS or esbuild got triggered last. I touch on this issue in an article here:

https://dev.to/jaredcwhite/how-to-install-shoelace-with-rails-7-esbuild-and-postcss-1cg9

I'm not sure what's the best approach here. My previous experience with PostCSS + esbuild is I run PostCSS bundling via a plugin within esbuild rather than have it as a separate sidecar process. But in this scenario, all I can think of is that the esbuild CSS output and the PostCSS output should be named differently and both stylesheet link tags included within the application layout.

[jaredcwhite]

Somebody just pointed out to me there's mention of this in the jsbundling readme: https://github.com/rails/jsbundling-rails#why-does-esbuild-overwrite-my-applicationcss

Feels like this should be solved, not be a footnote in the documention.

[pbstriker38]

Yes. I spent way too much time trying to figure out what was going on. I didn't see the mention of it in the readme until after I figured out what was going on.

[dhh]

Feel free to explore an alternative. Problem is in part that the default Rails setup will refer to application.css in the head. So that needs to change. Based on whether you're using esbuild + postcss or just the latter alone. Need something seamless. Anyway, closing as this has been documented (even if the documentation can be missed). Do open a PR if you find a good path that handles all the concerns.