From 364e9938741874a2eec1b54e488b06c6e10cd3ca Mon Sep 17 00:00:00 2001
From: David Heinemeier Hansson <david@hey.com>
Date: Mon, 30 Sep 2024 14:21:39 -0700
Subject: [PATCH] Explain css/js asset digest file references

---
 README.md | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/README.md b/README.md
index c129297..e6ea522 100644
--- a/README.md
+++ b/README.md
@@ -22,6 +22,29 @@ You can however exempt directories that have been added through the `config.asse
 
 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