Allow assets to have dependencies (eg images in CSS)

[jakearchibald]

Feature Use Case

I'd like to use Rollup's asset system in non-JS files. Eg manifest.json which references icons, style.css which references images.

The hash of the asset should be influenced by its content, and the content of the assets it references.

Feature Proposal

A way to create and later replace placeholders feels sufficient.

[lukastaegert]

Ah sorry, I misunderstood, so you want the placeholder inside the asset

[jakearchibald]

Yeah, so if style.css contains:

.foo {
  background: url('bg.png');
}

I want a way to add bg.png to the build (that bit is easy), but then replace bg.png in the CSS with the eventual asset path.

If bg.png is updated, it should change the hash of both bg.png and style.css.

https://github.com/GoogleChromeLabs/graviton/blob/dea46e2eb5f14955c5f232f803f9c207da99900b/ejs-asset-plugin.js here's what I tried so far. Here I create my own placeholder which I later replace. However, this happens after the hash of the resource has been generated.

[lukastaegert]

How about something like

this.emitAsset(assetName, source, {chunkDependencies: ['someChunkReferenceId'], assetDependencies: ['someAssetReferenceId']});

?

So leaving the actual replacing to the plugin but declaratively add dependencies. Should be doable. So the idea would be that when all hashes are generated, all dependency hashes are incorporated into the dependent hash.

[jakearchibald]

Yeah, that seems totally reasonable.

[tivac]

Omg please, please please. Every step we can take towards rollup managing assets means giant blocks of code I can delete from modular-css!

[philipwalton]

What about adding a new plugin hook that would allow plugins managing non-JS files to update their source contents based on the hash URLs of their dependencies?

As I described #2839, the hash URL problem can be solved in Rollup for JS dependencies, but it would be quite tricky for Rollup to solve it for all possible asset types. However, since Rollup is the only actor in the system with complete knowledge of the full dependency graph, it makes sense that Rollup must control when (and in what order) to determine the file hashes for each asset, but in some cases only a plugin can know how to update its contents to load its dependencies.

What about something like this, which is called with a mapping between each dependency chunk's name and hashed URL path.

resolveAssetURLs({chunkDependencies<name, urlPath>})

And this hook would be the last thing to run before the files were written to the file system, and it could run in reverse topologically sorted order to ensure dependent chunk hashes can be determined based on the final contents of their dependencies (including import paths).

[lukastaegert]

Extending upon this and incorporating the idea with the topological sorting, there are my latest thoughts: #2872 (comment)

Then in the proposed renderAsset hook, plugins could use this.getAssetFileName and this.getChunkFileName similar to how this is possible today within the renderChunk hook.

[shellscape]

Let's move conversation over to #2872 which is the current issue for tracking asset bundling.