jsbundling with esbuild generated application.css that override the one from cssbundling with sass

[phanhaiquang]

Hi,

I used jsbundling with esbuild. At the install rake task, it shows me a "build" command to put to package.json.

Then, I used cssbundling with sass and it also give me a "build:css" run string that should be put to package.json.

It means that I have "build" and "build:css" script run strings in package.json. I used the default ones that was displayed by install step.

Then, I realized that both run strings generate application.css inside app build. If I edit a scss file, then application.css was generated by "build:css". But if I edit a "js" file, then application.css was generated by "build". I don't know that esbuild could generate a css.

Then, I change the runstring of "build:css" to generate another filename and it works fine together.

I think that we may include this in readme or a doc.

Thanks,

[jhirn]

Could be mitigated by changing the default from the generator.

I had this problem with tailwind but just switched to running tailwind via PostCSS so I completely uninstalled PostCSS so there's only 1 emit now. I like the idea of emitting application-script.js and application-styles.css when installing via the rake task. Breaks years of tradition with application.js being the default javascript_style_tag but never known rails to fear change.

[dhh]

I don't think I understand what the problem is? build:css triggers whatever css bundling setup you're using, it doesn't use esbuild? So you have one script that runs sass and another that runs esbuild and they're both started by bin/dev or compiled with assets:precompile.

[jhirn]

If you have CSS in your JS, ESbuild will emit an application.css with the default install from jsbundling-rails. If you also setup cssbundling-rails and install tailwind for instance, the default yarn task is also to emit an application.css which causes a conflict.

Not a problem with this gem so much as a possible point of confusion when using both gems together. Pretty sure that will be common in Rails 7.

Perhaps using a different default from install would be a viable solution. It seems to generate application-tailwind.css but is configured to emit application.css. if you import a stylesheet or (in my case it was react-toastifyit will start spitting things out. There's an element of, well don't do that. I could/should have imported that tastily gem from my CSS but ESbuild don't care and it's kind of a nasty way to find out about what's going on.

Again this is a pure quality of life issue with the generator and not something that needs to be fixed but it could help with developer UX.

[kylekeesling]

I've experienced this as well. As a work around I renamed my esbuild target file to 'application-esbuild.js' so that there wasn't an overlap.

This wasn't an obvious fix so some type of alternative solution or documentation would be nice.

[dhh]

Documented this for now: 928868e