Impossible to load assets from npm packages in style.css

Description of the bug / feature

I’m following the documentation to load the assets from npm Package. https://vaadin.com/docs/v14/flow/styling/custom-theme-configuration/#assets But I have a 404 error when I’m using it in styles.css.

{
  "assets": {
    "@fortawesome/fontawesome-free": {
      "svgs/regular/**": "fontawesome/icons"
    }
  }
}

.icon-snowflake {
  background-image: url('fontawesome/icons/snowflake.svg');
}

It’s working if I’m trying to add the image with Java:

Image crmImage = new Image(
                "themes/myapp/fontawesome/icons/snowflake.svg",
                "Vaadin Brand");
        add(crmImage);

Minimal reproducible example

Create the view:

@NpmPackage(value = "@fortawesome/fontawesome-free", version = "5.15.3")
@Route(value = "about", layout = MainView.class)
@PageTitle("About")
@CssImport("./views/about/about-view.css")
public class AboutView extends Div {

    public AboutView() {
        addClassName("about-view");
        addClassName("icon-snowflake");
        add(new Text("Content placeholder"));
        /*Image crmImage = new Image(
                "themes/myapp/fontawesome/icons/snowflake.svg",
                "Vaadin Brand");
        add(crmImage);*/
        add(new Html("<i class=\"fab fa-vaadin\"></i>"));
    }

}

Update styles.css:

.icon-snowflake {
    background-image: url('fontawesome/icons/snowflake.svg');
}

And theme.json:

{
  "assets": {
    "@fortawesome/fontawesome-free": {
      "svgs/regular/**": "fontawesome/icons"
    }
  },
  "importCss": [
    "@fortawesome/fontawesome-free/css/all.min.css"
  ]
}

Expected behavior

The icon as a background image should be there.

Actual behavior

No icon. In Vaadin 14.6 alpha I have a 404 error. In Vaadin 19.0.2, the image is redirected by flow: http://localhost:8080/fontawesome/icons/snowflake.svg

Versions:

- Vaadin / Flow version: 14.6.0.alpha1 and 19.0.2
- Java version: 14
- OS version: Mac
- Browser version (if applicable): Chrome
- Application Server (if applicable): Tomcat (default Spring boot app)
- IDE (if applicable): IntelliJ

Here is an example project: vaadin_19_theme.zip

The right path seems to be:

.icon-snowflake {
    background-image: url('/themes/myapp/fontawesome/icons/snowflake.svg');
}

But it won’t work if the application has a context path. With the example project you can try by adding in application.properties:

server.servlet.context-path=/context

[pleku]

How do you load images/bg.png from the parent theme when it exists also in the child theme?

Should it even be possible to map assets to the same mapping in assets in both a parent and a child theme ? Or ever needed ? Not sure what happens now. At least I’m thinking we’re not going to implement anything that starts going upwards from the child theme in checking where the resource is…

Easy would be just to say that it is not supported (to just reference the url from the assets mapping images/foobar.png). But not sure if it is good DX to require either a) always prefixing the resources to the actual theme in both Java & CSS. This will be also problematic in Java at least if/when having multiple themes dynamically at runtime is possible (my bet is that it happens during this year) b) have a different url-path to use depending on where there resource is being loaded (Java/CSS)

@rolfsmeds WDYT ?

[pleku]

From Java and CSS, it should be fine to use

.icon-snowflake {
    background-image: url('fontawesome/icons/snowflake.svg');
}

Image crmImage = new Image(
                "fontawesome/icons/snowflake.svg",
                "Snowflake");

since the asset is mapped with

{
  "assets": {
    "@fortawesome/fontawesome-free": {
      "svgs/regular/**": "fontawesome/icons"
    }
  }
}

@Artur- in https://github.com/vaadin/flow/issues/9535#issuecomment-737107336 you said that it should go like in the prototype to be able to use theme/my-theme/fontawesome/icons/snowflake.svg and then some changes were made so that it works like that. But actually in the story map @rolfsmeds this is specified as using things like above in my comment. So we are now going to fix it to work like above.

But it is a good question that should it also work by using the prefixed themes/my-theme/ ? From CSS, I would say no. From Java, I would say No to avoid using hard-coded magic strings. In the future we might have support for multiple runtime themes on the application, and as a Java developer you want to specify new Image("icons/snowflake.svg", "Snowflake"); where a different theme maps different set of resources to be used. And even there, IMO it would make more sense to be able to drop out the theme name from the url because that is hard-coded to the theme name. It seems at least easier if one doesn’t have to use any code to get the name of the active theme, but to just let the framework redirect the request to the resource to the active theme.