Why does cssbundling "lose" its CSS intermittently? Why does it seem to hiccup?

[jasonfb]

Can someone explain to me why this gem seems to "lose" its CSS intermittently? It happens to me whenever I make a change to my JS files.

Then, if I make any change (like a whitespace change) to my SCSS files, it comes back, but it "hiccups"-- must be loaded twice before it can be fixed.

this is developmentally very significant and I would love to know what I'm missing here-- as far as I can tell this seems like a huge productivity blocker.

The effect is still present even after I use rake assets:clobber css:clobber javascript:clobber

the clobber does not even do its job correctly at all when the assets are 'stale' (which bizarrely happens very often in dev), but still it seems like half the time it puts the CSS in broken state and the other half the time it randomly works. Then if I load twice it fixes the CSS.

perhaps I'm missing something obvious? It seems like this is just baked into the gem and there isn't much I can do except reload things several times every time I make a change.

would strongly recommend prioritizing some understanding or better docs about this because as of now, this is not a good development experience.

When borked, my site loads like this:

then I run rake assets:clobber css:clobber javascript:clobber

Then I reload and it is still broken

Then I go make a whitespace change in application.bootstrap.scss

Then I reload again and it is still broken: (this is the hiccup)

Finally, without making any further changes, I reload the window 3rd time and it snaps back into place:

Why does it do this? What am I missing?

Expected result: It works consistently and makes sense and does not stop developer workflow.

[jasonfb]

something is super messed up for me --- possibly only in my app? --- because every time I make a single JS change, it borks my CSS (but the JS I just added starts working).

Then, if I make a CSS change, it borks the JS and the JS I just added stops working.

the app is built using

rails new HelloWord --css=bootstrap --javascript=esbuild

and I'm starting my dev environment with ./bin/dev.

am I not running both the JS and CSS watches correctly?

my package.json file is

{
  "name": "app",
  "private": "true",
  "dependencies": {
    "@hotwired/stimulus": "^3.0.1",
    "@hotwired/turbo-rails": "^7.1.1",
    "@popperjs/core": "^2.11.4",
    "aos": "^2.3.4",
    "bootstrap": "^5.1.3",
    "bootstrap-icons": "^1.8.1",
    "esbuild": "^0.14.27",
    "jquery": "^3.6.0",
    "sass": "^1.49.9"
  },
  "scripts": {
    "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds",
    "build:css": "sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules"
  }
}

and I have no esbuild config file esbuild.config.js at the root of my project -- maybe this is the problem

[jasonfb]

OK, so I added a defualt esbuild.config.js at the root of my project who does not appear to come along with rails new, that seemed to fix the CSS killing the JS problem, but these hiccups persist:

1. make a change any JS, the CSS then is broken but the JS I just implemented works
2. Make a whitespace change to the CSS, load the browser and the CSS is still broken (the hiccup)
3. Make no changes and reload the browser, the CSS snaps back into place, the JS that I had originally implemented is also working.

Although I can get some stuff done this way --- it is hella frustrating and it seems like this development experience is significantly sub-par.

am I missing something totally obvious or is this actually just how it works?

[edddieee]

Hey @jasonfb , I had the same problem today and I solved it changing my css or js output file.

ref.: https://github.com/rails/jsbundling-rails#why-does-esbuild-overwrite-my-applicationcss