Support local assets in stylesheets and inline styles

[mbostock]

Framework does static analysis of HTML and JavaScript to find references to local assets, such as linked images and imported JavaScript modules; however, it doesn’t currently perform static analysis of stylesheets and inline styles, so attempting to reference local images and import other local stylesheets currently breaks. Here are a few examples (that can serve as test cases for this feature).

An inline stylesheet that references a local image:

<style type="text/css">

body {
  background-image: url("image.png");
}

</style>

A linked local stylesheet that references a local image:

<link rel="stylesheet" href="test.css" type="text/css">

Alternatively, via @import (which is currently also unsupported for local stylesheets, and should be considered part of this issue):

<style type="text/css">

@import url("./test.css");

</style>

And the following stylesheet:

body {
  background-image: url("image.png");
}

An inline style that references a local image:

<div class="card" style="background-image: url('image.png');">
  I have a background image.
</div>

Related #415 #416 #423 #467 #474 #786 #788 #1372.

[Arijitdesignsit]

I have been trying to go around this issue for a long time now. I am able to solve it via D3js today. So, I just simply took the served absolute URL of the image by

const imgURL = await FileAttachment("./exampleImage.jpg").href;

Then by doing the following I am able to put a background image in a div with id divId:

d3.select("#divId").style("background-image", "url("+imgURL+")");

[Fil]

It's possible to work around the issue and host these fonts within your data app, but it requires a little bit of juggling. Here's my current approach: https://observablehq.observablehq.cloud/framework-example-font-face/?secret=w7WHOz2YV5uW-V0Bml5Cmwvc7hEsVOAfm2RRwuh-vu4

(I'm sharing in case it can unblock someone, but it would be better to fix the issue.)

[drom]

Thank you for the great framework!

I am trying to load local font in my custom style.css

@font-face {
  font-family: 'Iosevka Drom Web';
  font-display: swap;
  font-weight: 400;
  font-stretch: normal;
  font-style: normal;
  src: url("./IosevkaDrom-Regular.woff2") format('woff2');
}

And getting this error:

Is there other way I should try?

Self hosting custom fonts is a critical requirement for my projects. It would be nice if there was a way to implement it.

[Fil]

Did you try the technique I described just above your comment?

[drom]

@Fil I did. Does it suppose to work in dev mode, or only in release?

[Fil]

it should work in preview after you have deployed a first time (since the URL for the font is absolute)

[drom]

yes, when fonts are all on the web, I can reference them with https://... url. That works