How to set dynamic values inside <style> tag?

[derpycoder]

<style type="text/css">
  @font-face {
    font-family: "Poppins";
src: url({ AssetPath("asset_src/fonts/Poppins-Regular.woff2")}) format("woff2");
     font-weight: normal;
     font-style: normal;
     font-display: swap;
  }

  @font-face {
    font-family: "Poppins";
src: url({ AssetPath("asset_src/fonts/Poppins-SemiBold.woff2") }) format("woff2");
     font-weight: 600;
     font-style: normal;
     font-display: swap;
  }

  @font-face {
    font-family: "Poppins";
src: url({ AssetPath("asset_src/fonts/Poppins-Medium.woff2") }) format("woff2");
     font-weight: 500;
     font-style: normal;
     font-display: swap;
  }
</style>

I want to add critical css and dynamic paths in templ, is it not possible to have css dynamic?

Also, the syntax highlighting is off inside style tags.

Will it be supported?

What’s the alternative, how do I approach this problem?

[phenpessoa]

I ran in this issue literally today, and the answer is that unfortunately there is no native way to do this currently. Well, at least I couldn't find a native way of doing this.

There are some open issues related to this:
#132
#262
#740

But you have a few non native options.
You could use gcss: https://github.com/AccentDesign/gcss
If you are using tailwind, you can read env vars from your tailwind.config.js file
Lastly, you can create your own type that implements the templ.Component interface, this is what I ended up doing.
For example:

type heroBgImageMediaQuery struct{}

func (s heroBgImageMediaQuery) Render(ctx context.Context, w io.Writer) error {
	fmt.Fprintf(w,
		`<style>@media(min-width:768px){.hero-bg-img{background-image:url('%s') !important}}</style>`,
		config.LiveConfig.AssetsEndpoint()+"/imgs/hero_image-desktop.webp",
	)
	return nil
}