CSS does not render properly with compile_assets

[i-h8-github]

Hello,

I have a Roda app based on the Roda/Sequel stack skeleton here: https://github.com/jeremyevans/roda-sequel-stack

I have extended Bootstrap's css in my app.scss file, and when rendering, everything works just as expected except when I try to compile the assets for faster delivery.

The only changes I have made from the skeleton in this regard are pointing the assets plugin to the relevant files and adding the compile_assets line as per the documentation for the assets plugin, as below:

plugin :assets, js: ['unpoly.js', 'jquery-3.7.1.min.js', 'bootstrap/dist/js/bootstrap.bundle.js'], css: ['unpoly.css', 'app.scss'], css_opts: css_opts, timestamp_paths: true,
dependencies: {'assets/css/bootstrap/scss/bootstrap.scss'=>Dir['assets/css/bootstrap/scss/bootstrap/' '**/*.scss']}
compile_assets

Without the compile_assets line, everything works as expected, albeit too slowly for real use in the wild. With the compile_assets line, my own css works, but anything imported or extended from Bootstrap doesn't.

Any thoughts?

[jeremyevans]

Interesting. I'm not sure why everything would work without compile_assets, but doesn't work with compile_assets. Both compile_assets and normal rendering end up calling the same method internally (read_asset_file). If you look at the compiled css file, is it missing the bootstrap content? Any chance you could provide a link to a repository showing the issue (or even better, create a minimal example showing the issue)?

I don't think the :dependencies option does anything in your example, since you aren't using bootstrap.scss in your :css option. I'm guessing your app.scss file includes bootstrap.scss, but that inclusion would be handled by the scss compiler, not by Roda, so the dependency option wouldn't be affected. You would probably want to use assets/css/app.scss instead of assets/css/bootstrap/scss/bootstrap.scss. Note this only would only affect caching in development mode, it is unrelated to your compile_assets issue.

[i-h8-github]

Okay, I have narrowed down the issue. I am sorry for not confirming my own hypothetical minimal example.

It should be obvious, I guess, but the layout.erb file in that skeleton loads bootstrap remotely, so that needs to be disabled first.

In my case, the issue seems to stem from passing css: ['unpoly.css', 'app.scss'] (bad) vs css: 'app.scss' or css: ['app.scss'] (good).

That being said, trying to reproduce the issue with a clean project is fiddly and inconsistent. I don't know what front-end devs did to bring this curse down on all of us, but this is a nightmare.

[jeremyevans]

Yes, you would need to remove bootstrap from the layout. Unless you are modifying bootstrap, you are better off using the bootstrap css file instead of trying to use the assets plugin to compile it to css.

Not sure why unpoly.css would be causing a problem, but I don't have any experience with it. If it is hard to reproduce the issue on a clean project, there may be something else causing a problem.

[i-h8-github]

Yes, I am extending bootstrap, hence my doing it this way. In addition to app.css, I have bootstrap, bootstrap icons, unpoly, and an empty css file, and changing the order they're sent to the assets plugin and/or the order they're imported in the app.css file yields different results, even in (a) clean project(s). It is beyond infuriating.

I didn't even realize there was an issue with any of this until I added the compile_assets line, but now I feel like I'm going insane. I should probably be content with having gotten it working in the project under development, but I can't let go of the fact that I have no idea why it works or doesn't work or how things will break without obvious reason in the future. Surely there's something stupid I'm missing.

[jeremyevans]

CSS can definitely be affected by order of inclusion. You could try having unpoly.css after app.scss, just in case unpoly.css is causing issues with CSS concatenated after it. You could also have your app.scss file import the unpoly.css file instead of listing unpoly separately in the assets plugin, and see if that makes a difference.

[i-h8-github]

Importing unpoly.css is how I managed to get around the issue. Interestingly, importing it at the top of app.css, which I presume would have been the result of passing it first in the array for the css option for assets.

None of this explains why compile_assets should be making any difference. This is going to nag at me until I understand. Perhaps I need to learn to let go and accept that web dev just doesn't make sense.