Referencing assets in CSS

[ryanb]

Is it possible to reference other assets such as images and fonts in CSS? In the asset pipeline you'd normally do image-url("image.png"), but from my understanding that is handled by sass-rails and requires an scss file.

Is there a recommended way for doing this through cssbundling-rails and the asset pipeline?

Thanks for your work on this gem!

[rmacklin]

Are you using PostCSS to process your CSS? If so, can https://github.com/postcss/postcss-url solve your use case?
I don't have personal experience with that plugin (currently still using sass), but the docs seemed promising. Perhaps the generated PostCSS configuration could be set up with it.

[chloerei]

I try to add a postprocessor to replace asset path:

class AssetUrlProcessor
  def self.call(input)
    # don't know why, copy from other processor
    context = input[:environment].context_class.new(input)

    data = input[:data].gsub(/url\((.+?)\)/) do |match|
      path = context.asset_path($1)
      "url(#{path})"
    end

    { data: data }
  end
end

Sprockets.register_postprocessor 'text/css', AssetUrlProcessor

It works for me. Need an official solution.

[dhh]

Yes, we need an official solution to this. That asset url processor looks in the ballpark. Here's the one from sassy-rails: https://github.com/sass/sassc-rails/blob/master/lib/sassc/rails/functions.rb

[deepj]

I have a bit different "ask" for official solution. But I guess still related to this. How to reference and "import" assets from npm packages (in my case font-awesome). Here is how to do it in Phoenix/esbuild/sass https://gist.github.com/ks2211/75af6cddc051f5e261a29fc25eed5789

It would be wonderful some official solution for Rails 7/cssbuilding-rails

[stevestmartin]

I try to add a postprocessor to replace asset path:

class AssetUrlProcessor
  def self.call(input)
    # don't know why, copy from other processor
    context = input[:environment].context_class.new(input)

    data = input[:data].gsub(/url\((.+?)\)/) do |match|
      path = context.asset_path($1)
      "url(#{path})"
    end

    { data: data }
  end
end

Sprockets.register_postprocessor 'text/css', AssetUrlProcessor

This works great, just ran into this.

[stevestmartin]

Updating to better handle asset URLs that contain quotes or if they use a data URI / full URL so that we do not attempt to overwrite with a wrong value.

Thanks for the starting point @chloerei

config/initializers/assets.rb

class AssetUrlProcessor
  def self.call(input)
    # don't know why, copy from other processor
    context = input[:environment].context_class.new(input)
    data = input[:data].gsub(/url\(["']?(.+?)["']?\)/i) do |match|
      asset = $1
      if asset && asset !~ /(data:|http)/i
        path = context.asset_path(asset)
        "url(#{path})"
      else
        match
      end
    end

    { data: data }
  end
end

Sprockets.register_postprocessor 'text/css', AssetUrlProcessor

[ryanb]

Thanks for the feedback everyone. I ended up going with a post processor that uses asset-url() with optional quotes so that it doesn't conflict with other urls such as in node modules.

# config/initializers/asset_url_processor.rb
class AssetUrlProcessor
  def self.call(input)
    context = input[:environment].context_class.new(input)
    data = input[:data].gsub(/asset-url\(["']?(.+?)["']?\)/) do |_match|
      "url(#{context.asset_path($1)})"
    end
    {data: data}
  end
end

Sprockets.register_postprocessor "text/css", AssetUrlProcessor

Keep in mind this only handles assets that are managed by sprockets. If we have other external assets that need to be included (such as within node modules), we could use postcss-url as @rmacklin mentioned. I'd probably configure it to output directly to public/assets so that it bypasses sprockets.

[stevestmartin]

Looks like Propshaft might be the official solution to this, although it seems to use an asset-path CSS function which mimics sprockets and @ryanb 's solution. However looking at @chloerei 's solution with minor improvements, I do like the idea that you could take a theme or library etc.. drop its assets into your assets_path and it just fixes everything without having to edit the CSS files to insert the asset-path calls, inevitably you always miss one.

This would make drop in updates of themes, libraries, or icon fonts much simpler by just copying files into folders under config.assets.paths I would assume we could just add path's from node_modules here as well.

[ryanb]

@stevestmartin thanks for pointing out Propshaft. I replied to your issue there: rails/propshaft#1

[Petercopter]

I think I'm running into this problem with FontAwesome. I've got a Rails 6.x app, and I switched from Webpacker to cssbundling-rails and jsbundling-rails. Everything is working great locally as far as I can tell. Compilation is SUPER fast, and there's a LOT less JavaScript involved in the entire process.

I pushed to Heroku, and it seems the font URLs aren't being rewritten. Not a problem, this application isn't live yet, so I get to play with the new and shiny with limited consequences.

Will Propshaft be the right solution for Rails 6.x apps? I see it's locked to Rails 7 right now.

[ryanb]

@Petercopter if the fonts are working in development but not production, they might not be included in the precompile. Try running rails assets:precompile and see if they are in the public/assets directory. If not, add them to the app/assets/config/manifest.js file similar to the images.

If they are included, you might need a post processor to remap the url, similar to the ones mentioned earlier.

[jcoyne]

I'm also running cssbundling-rails on Rails 6.1 and I'm unable to make the Sprockets.register_postprocessor "text/css", AssetUrlProcessor solution work. Does anyone have a public repo with this working for them that they can share?

There is a flaw in the regex in @ryanb's solution. It should be /asset-url\(["']?(.+?)["']?\)/

[ryanb]

@jcoyne thanks, I'll update it.