README.md in propshaft-1.0.1 vs README.md in propshaft-1.1.0

- old
+ new

@@ -20,9 +20,32 @@ You can however exempt directories that have been added through the `config.assets.excluded_paths`. This is useful if you're for example using `app/assets/stylesheets` exclusively as a set of inputs to a compiler like Dart Sass for Rails, and you don't want these input files to be part of the load path. (Remember you need to add full paths, like `Rails.root.join("app/assets/stylesheets")`). These assets can be referenced through their logical path using the normal helpers like `asset_path`, `image_tag`, `javascript_include_tag`, and all the other asset helper tags. These logical references are automatically converted into digest-aware paths in production when `assets:precompile` has been run (through a JSON mapping file found in `public/assets/.manifest.json`). +## Referencing digested assets in CSS and JavaScript + +Propshaft will automatically convert asset references in CSS to use the digested file names. So `background: url("/bg/pattern.svg")` is converted to `background: url("/assets/bg/pattern-2169cbef.svg")` before the stylesheet is served. + +For JavaScript, you'll have to manually trigger this transformation by using the `RAILS_ASSET_URL` pseudo-method. It's used like this: + +```javascript +export default class extends Controller { + init() { + this.img = RAILS_ASSET_URL("/icons/trash.svg") + } +} +``` + +That'll turn into: + +```javascript +export default class extends Controller { + init() { + this.img = "/assets/icons/trash-54g9cbef.svg" + } +} +``` ## Bypassing the digest step If you need to put multiple files that refer to each other through Propshaft, like a JavaScript file and its source map, you have to digest these files in advance to retain stable file names. Propshaft looks for the specific pattern of `-[digest].digested.js` as the postfix to any asset file as an indication that the file has already been digested.