CSS assets paths in 3rd party libraries when using jsbundling-rails

[rctneil]

One of the things that does not appear to be working are images referenced in CSS files that are a part of a 3rd party library such as Photoswipe.

The library itself works but the images fail. Photoswipe includes a SCSS variable for the path to the skin and when I was using Webpack I had this line set as below:

$pswp__assets-path: "../../../node_modules/photoswipe/src/css/default-skin/"; // path to skin assets folder (preloader, PNG and SVG sprite)
This is now failing, I've tried soooo many combinations of things but I cannot for the life of me seem to be able to get those images working.

This is not just a Photoswipe issue, it's happening in a number of other libraries where images are being referenced.

Any suggestions?

[brenogazzola]

Are you still on sprockets or did you switch to Propshaft? They handle paths in different ways.

[rctneil]

I'm actually unsure. I'm assuming Sprockets. Any documentation for this? What is Propshaft?, I've not heard anything about it? I thought I had to use Sprockets?

[rctneil]

Just been looking at the repo for Propshaft and have some questions:

1. Is my issue not resolveable with Sprockets? Sprockets came with my Rails app so am wondering why it needs changing.
2. How do I add Propshaft to an existing app? The documentation only mentions installation for new apps. Nothing about existing ones.
3. Why is this a Sprockets replacement? Why not just update Sprockets?

Just a little bit confused with all this Rails 7 stuff right now as there doesn't appear to be solid documentation for any of it anywhere. It's all well and good for all these fancy features features to come along in new releases but If there are no decent bits of documentation for it then how are people meant to know how to use them?

[brenogazzola]

I'm actually unsure. I'm assuming Sprockets. Any documentation for this? What is Propshaft?, I've not heard anything about it? I thought I had to use Sprockets?

1. Unless your Gemfile has gem "propshaft" in it you are using Sprockets.
2. Sprockets is the asset pipeline gem for the HTTP/1 era. Propshaft is the asset pipeline gem for the HTTP/2 era.
3. We will continue supporting Sprockets for the foreseeable future and Propshaft is still pre-release. So for now it's best if you continue on Sprockets.

Is my issue not resolvable with Sprockets? Sprockets came with my Rails app so am wondering why it needs changing.

It should be. But there are two gems for the assets pipeline (Sprockets and Propshaft) and three bundlers (webpack, esbuild and rollup) so we need more information to figure out what's causing the problem. That is why I asked. By the way, are you still using Webpack or did you change to one of the other two bundlers (esbuild, rollup)?

How do I add Propshaft to an existing app? The documentation only mentions installation for new apps. Nothing about existing ones.

Propshaft is still pre-release. There is no need to migrate if you don't want to. If you do have an interest, I'm currently working on the installation/upgrade guide for existing apps: Add upgrade guide for propshaft #35.

Why is this a Sprockets replacement? Why not just update Sprockets?

Design decisions for Propshaft are based on the fact that browsers and servers support HTTP/2 and we have specialized javascript bundlers like Webpack. These designs decisions were incompatible with how Sprockets does things.

Just a little bit confused with all this Rails 7 stuff right now as there doesn't appear to be solid documentation for any of it anywhere. It's all well and good for all these fancy features features to come along in new releases but If there are no decent bits of documentation for it then how are people meant to know how to use them?

Solid documentation is the result of time and people who are not the maintainers/contributors (like you) trying to adopt the new gems and pointing to us where the problems are. Since Propshaft, jsbudling and the other gems are so new, they haven't had the time or the people needed to develop solid documentation.

[rctneil]

@brenogazzola All makes sense. Appreciate the comments.

Ok, Yes, I am using Sprockets currently. I have switched away from Webpack and am using jsbundling-rails and cssbundling-rails. I chose esbuild for JS and Sass for CSS.

I'm happy to switch to Propshaft if necessary as it does look to be the future etc.

Anything else you need to know about my setup for now?

[brenogazzola]

I created a new project and installed photoswipe, but I just noticed that you posted this in jsbundling but are talking about SCSS files, so I'm unsure if the error is in a CSS file, or in JS file that is importing CSS files. Do you think you can provide a minimal app with just this problem so I can download it, run and see the error happening?

[rctneil]

@brenogazzola Thanks for this. I was digging into this last night and adding some paths into assets.rb appears to fix the issues:

Rails.application.config.assets.paths << Rails.root.join("node_modules/photoswipe/src/css/default-skin")
Rails.application.config.assets.paths << Rails.root.join("node_modules/flag-icons")

[brenogazzola]

Ah. That makes sense. 👍