Sprockets doesn't seem to be preprocessing sass code in rails 7 alpha2

[Erayd24]

Steps to reproduce

1. Create a new rails 7 alpha2 app with esbuild and dart-sass (esbuild probably isn't related)
2. In an scss file create an attribute hooked to an html element and attach an image via the asset pipeline which uses sprocket's sass processor.
3. Start the server as well as the yarn watcher for scss and js changes

#test{
  background-image: image-url("testimage.jpg");
}

<div id="test"></div>

Expected behavior

What should happen is sprockets compiles the term image-url down to a url attribute linked to an image in the images folder of the asset pipeline.

Actual behavior

image-url is being passed all the way to the browser, that being incorrect css syntax, it doesn't pick up the image for display. If you change the line in package.json that has build:css, change the second path, which is the output path for the sass code to ./app/assets/builds/application.scss Notice the scss instead of css. Sass needs to do it's thing and throw it in any file you want to name it, even if it's all css on the inside. Then that file needs to go through sprockets as a sass object to convert its share of methods. It doesn't know to pick up a sass file unless you name is as such with scss. The script generating the package.json file for installing sass is generating an incompatible file type.

System configuration

Rails: 7.0.0alpha2
Ruby: 3.0.2

https://www.rubydoc.info/gems/sprockets/4.0.0

[hoffdog]

I've noticed similar behavior. I've been testing out rails 7 alpha2 with esbuild, bootstrap, and custom scss file. I've found running bin/dev loads and renders everything correctly (background-image works, same with BS). But running it in Production creates problems.

More or less same as above:

1. Create a new Rails 7 app with bootstrap, esbuild and a custom scss file.
2. add some boilerplate CSS with a background image. Add an image to assets -> images (pipeline).
3. run RAILS_ENV=production rails assets:precompile
4. start the server with rails s -e production

custom.scss
body { background-color: gray; background-image: image-url('IMG_2535.jpeg'); background-position: cover cover; background-repeat: no-repeat; }

Expected behavior
The background image should load and be displayed.

System configuration
Rails: 7.0.0alpha2
Ruby: 3.0.2

[zarqman]

First, make sure you're on at least sprockets-rails 3.3.0 (just released Nov 11). This enables proper digest handling for url(...) (ref: rails/sprockets-rails#476).

Second, with cssbundling-rails you'll need to switch image-url() and similar (asset-url(), font-url(), etc) to just url() so that the new sprockets-rails will pick it up.

Finally, there's still a bug in sprockets-rails that can cause some digested assets to not be copied into public/assets/ properly (this will likely only affect production). If this is affecting your app, you won't see testimage-[digest].jpg in the output from assets:precompile.

As a workaround, and if necessary, you can reference those assets in assets/config/manifest.js by adding lines like //= link_tree ../fonts. I believe images/ is already referenced by default, but something like fonts/ likely won't be. Additionally, this bug also causes assets provided by a gem, rails engine, or npm to be excluded. Pending fix here: rails/sprockets-rails#480.

[rails-bot]

This issue has been automatically marked as stale because it has not been commented on for at least three months.
The resources of the Rails team are limited, and so we are asking for your help.
If you can still reproduce this error on the 7-0-stable branch or on main, please reply with all of the information you have about it in order to keep the issue open.
Thank you for all your contributions.