Handle referenced assets in CSS files

We're not quite at the point where you can do

import 'typeface-roboto-slab';

inside your app/client.js and have it work, because that import references relative URLs that break when the CSS is extracted.

Those referenced assets presumably need to be copied into the client directory (which I guess should really be called assets, and assets should become static, but we can shave that yak another day), possibly with hashed filenames, and the URLs should be rewritten.

The same presumably goes for @imported files.

This would also allow us to reference relative assets in <style> tags in components.

It's an open question how much of this work belongs to Sapper and how much to Rollup. It feels like bundler territory, but Rollup's ESM-first approach means that it's hard to do in an unopinionated way, which potentially shifts some of the burden back to Sapper.

Also worth considering at the same time: how can CSS transformers (autoprefixers, optimisers, whatever) interact with what Sapper does? And what should we do about @import in <style> tags — should the imported styles be scoped and subjected to DCE? (And if so, how does one dedupe across a bundle?) Lots of tricky inter-related questions, but the payoff is huge if we get the answers right.

sveltejs / sapper

Handle referenced assets in CSS files #420