Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adjust asset references in CSS/JS/JSON in Manganis #3325

Open
ochrons opened this issue Dec 10, 2024 · 0 comments
Open

Adjust asset references in CSS/JS/JSON in Manganis #3325

ochrons opened this issue Dec 10, 2024 · 0 comments
Labels
enhancement New feature or request manganis Related to the manganis crate

Comments

@ochrons
Copy link

ochrons commented Dec 10, 2024

Feature Request

When Manganis processes an asset like logo.png it will change the name by adding a hash of the file contents to help with caching. If, however, a CSS file refers to this asset with its original name, it will not work correctly after the build process. For example

background-image: url('/assets/logo.png');

Same issue happens also with JS or JSON files referring to assets. Common case would be providing a manifest JSON for multiple icon files

{
  "icons": [
    { "src": "/assets/icon.png", "type": "image/png", "sizes": "48x48" },
    { "src": "/assets/icon-large.png", "type": "image/png", "sizes": "128x128" }
  ]
}

CSS files may also import other CSS files. Although this might be already be handled by the minification process by combining them all in one file?

/* more styles */
@import url("my-imported-styles.css");

In all these cases, Manganis should fix these filenames to the new generated name and update the respective textual asset files.

This is something that JS tools like Webpack already do, at least to some extent.

Implement Suggestion

Add an asset option for fixing the affected names when encountered in a text file. When processing assets, identify files containing references to other assets, build a dependency graph, process the assets in correct order generating new names, update new asset names into files.

@ealmloff ealmloff added enhancement New feature or request manganis Related to the manganis crate labels Dec 10, 2024
vishwamartur added a commit to vishwamartur/dioxus that referenced this issue Dec 12, 2024
Related to DioxusLabs#3325

Add functionality to update asset references in CSS, JS, and JSON files during the build process.

* **CSS Changes:**
  - Add `update_asset_references` function to update asset references in CSS files.
  - Modify `process_css` to call the new function.

* **JSON Changes:**
  - Add `update_asset_references` function to update asset references in JSON files.
  - Modify `process_json` to call the new function.

* **JS Changes:**
  - Add `update_asset_references` function to update asset references in JS files.
  - Modify `process_js` to call the new function.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request manganis Related to the manganis crate
Projects
None yet
Development

No branches or pull requests

2 participants