Dynamic font-face doesn't work, static font-face does.

[R4YM3]

Environment

linaria: "2.3.1" @linaria/babel-preset: "3.0.0-beta.15", @linaria/shaker: "3.0.0-beta.15", @callstack/react-theme-provider": "3.0.7",

implemented in nextjs: 12.0.4 Node: 16.13.0 OS: MacOS 11.6 (Arm)

Static font face does work, example:

const woff = '/themes/default/fonts/font.woff';
const woff2 = '/themes/default/fonts/font.woff2';

export const Container = styled.div<ITheme>`
  @font-face {
    font-family: 'regular';
    src: url('${woff}') format('woff2'), url('${woff2}') format('woff');
  };
`;

I noticed in the output that url is written dirrectly in url(..)

Dynamic font-face does not work example

src: url("${woff}") format('woff2'), url("${woff2}") format('woff');

const woff = '/themes/default/fonts/font.woff';
const woff2 = '/themes/default/fonts/font.woff2';

export const Container = styled.div<ITheme>`
  @font-face {
    font-family: 'regular';
    src: ${(props) => `url("${props.fonts.regular.base.woff2}") format('woff2'), url("${props.fonts.regular.base.woff}") format('woff')`};
  };
`;

I noticed in the output that url is written dirrectly as a variable in url(..)

[R4YM3]

For now i fixed the issue by creating a stylesheet for each theme, each stylesheet contains @font-face definitions related to the theme. Then sourced the required stylesheet depending on theme.

I prefered it not to be sourced because this adds another request, but it's fine for now. I am keeping bug open since I did got stuck on this.

[R4YM3]

I would like to preload the fonts, if i want to have it now then I have two bookkeepings of the fonts. One in the stylesheet and the other in my <head/> to preload the fonts, which is not nice.