<style> tags' css ignored in rendering elements

[kingtimm]

Describe the bug

Hi - what I'm experiencing is elements are rendered with tailwind utilities or in-linestyle="". However, elements are rendered in the <style> section.

In the example repro, going to the OG image for Post and comparing to the template you can see the H1 isn't styled.

Steps to repro in the link below:

run pnpm dev and then visit /post/__og_image__/og.png.

The styles from the style tag in MyTemplate.vue are not applied.

Reproduction

https://stackblitz.com/edit/nuxt-starter-kqfwbb

System / Nuxt Info

------------------------------
- Operating System: Linux
- Node Version:     v19.6.0
- Nuxt Version:     3.6.5
- Nitro Version:    2.5.2
- Package Manager:  npm@9.4.0
- Builder:          vite
- User Config:      modules, nitro, ogImage, site
- Runtime Modules:  nuxt-og-image@2.0.18, nuxt-icon@0.4.2
- Build Modules:    -
------------------------------

[harlan-zw]

Hey, sorry for the delay in getting back to you. Thanks for the reproduction!

I've looked into this and I'm not entirely sure I understand the issue, seems like the <h1> is getting the style applied. I can't see any <style> blocks?

Would you be able to provide more context or check the reproduction?

Btw you may need the following as the attrs can mess up satori.

defineOptions({
  inheritAttrs: false,
})

If you're the inline css feature from the Vue SFC blocks it's not supported in all environments (yet). Does it work in development for you?

[harlan-zw]

v2.1.0 introduces style tag inling for all environments which may also fix this, I didn't hear back so will close for now.

LMK if you have any further details and we can reopen.

[StefanH-AT]

Using 2.1.1 and css inside the style tag is still not getting applied

[harlan-zw]

Will need a reproduction to investigate further.