Stencil: In production, compiler break css font-face url()

[nonconforme]

Stencil version:

 @stencil/[email protected]

I'm submitting a:
[ x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:
Adding an url() in the component's css was broken after compilation. But works fine in dev.

Expected behavior:
I would expect the component to resolve the image css url relatively inside the dist package that gets later used inside the consuming app.

Steps to reproduce:

@font-face {
  font-family: 'Roboto';
  font-display: swap;
  src: url("../../assets/fonts/roboto/roboto-blackitalic-webfont.eot");
  font-weight: 700;
  font-style: italic;
}

end up after compilation:

@font-face {
  font-family: 'Roboto';
  font-display: swap;
  src: url("src/assets/fonts/roboto/roboto-blackitalic-webfont.eot");
  font-weight: 700;
  font-style: italic;
}

but must be:

@font-face {
  font-family: 'Roboto';
  font-display: swap;
  src: url("collection/assets/fonts/roboto/roboto-blackitalic-webfont.eot");
  font-weight: 700;
  font-style: italic;
}

Directory "dist/src/assets" doesn't exist after compilation. We only have "dist/collection/assets" directory and there is no options to set the directory structure. There is a similar not resolved issue on old core version : issues/923
Our current solution was a custom bash script that replace urls in css compiled javascript files but it must be fixed in the compiler.

Thanks.

[stmoreau]

@nonconforme have a look at the copy config regarding the assets directory and the issue you have.
https://stenciljs.com/docs/config/#copy

It will help you resolve it 😉

[nonconforme]

Assets copy is not the problem @stmoreau, folder copy option work correctly, but it's a problem from compiler. I doubt you have you tried to reproduce the problem before answer me :( :( :(.

Here is my stencil.config.js :

export const config: Config = {
  namespace: 'blabla',
  outputTargets:[
    {
      type: 'dist'
    },
    {
      type: 'www',
      serviceWorker: null
    }
  ],
  copy: [{
    src: require('path').resolve('./src/assets'),
    dest: 'assets'
  }],
  plugins: [sass()],
  globalStyle: './src/assets/css/style.scss'
};

As you can see @stmoreau i already use this option. This options copy assets from 'src/' to 'collection/' but it's not the problem, the compiler doesn't translate url from 'src/' to destination folder 'collection/'. Compiler must translate "src" css url path to "dest" folder of builded app.

Please try to reproduce the problem before answer...

[nonconforme]

• In the right window you can see the translated path.
• In left you can see my copied assets inthe collection directory, created by compiler.
• Right window is the content of compiled file "iw191as3.js"

As you can see the path is incorrect and must be 'collection/assets/font/...'

[nonconforme]

Another example of the problem:

https://forum.ionicframework.com/t/stenciljs-background-image-css-path/147270

[stmoreau]

@nonconforme have a look at this repo to check how I deal with this issue you linked.
https://github.com/stmoreau/stencil-image

[nonconforme]

@stmoreau thanks for your answer but i already look at your repo, it's impossible to use css variables in font-face... I've tried this solution weeks ago, css variables are not usable in font-face. My issue is not the pictures but the fonts.

Only solution i've is:
'Our current solution was a custom bash script that replace urls in css compiled javascript files but it must be fixed in the compiler.'

It's really a problem from the stenciljs core compiler.

I will update the title.

Please try to reproduce my problem... Sending answear without trying to reproduce the problem, is a problem too :)

[nonconforme]

@stmoreau lots of people try to reproduce problem to understand it before answer a possible solution. That's why there is a "Steps to reproduce:" section. Your answear are not about my problem, but your help is gracefull and i thank you. Is it so hard to reproduce ? Adding a tiny scss with a font-face need a repo ? But i think if you haved tried before to reproduce the problem, you'll never post this answers that doesn't reflect a solution to the original problem. And now you are disapointed ?...

[oliviadawd]

@nonconforme were you able to solve this issue? I'm also running into this in my project.

[aderaaij]

I'm having the exact same problem at the moment, If you're adamant on an example I can make one but @nonconforme's description seems pretty clear to me!

[nonconforme]

@oliviadawd, @aderaaij, Yes i've solved this issue. I'll make a NodeJS Stencil plugin soon or you can contact me.

[JVelichko]

@nonconforme Hi, let me know, when plugin will be completed!

[nonconforme]

@JVelichko Yes no problem.

It's possible to add an option to compiler and edit createHostStyle() method from "custom-style.ts" from stencil project.
I currently work on a plugin and a custom createHostStyle() method.
I'll soon do a public release.

[tallcoder]

Running into the same problem ... but I don't use Stencil. Can someone post what they did to fix it, please?

[scottlepp]

@nonconforme can you post your update?

[matthewmullin01]

@nonconforme It seems like quite a few people are having this issue. Any chance you can describe what you did to fix the problem?

[bravetarget]

having issues with @font-face url references as well, can anyone provide a working example?

edit: this was actually just an issue related to the Shadow DOM not seeing the font definitions.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Stencil, please create a new issue and ensure the template is fully filled out.

Thank you for using Stencil!