fix: escape " when inlining <style> rules into style attr

[danielroe]

🔗 Linked issue

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

A <style scoped> rule whose value contains a ", like a background-image with a url, currently produces invalid HTML when the asset transform inlines it. (the inner " closes the style=" attribute and Vue fails the build with Illegal '/' in tags.)

Repro:

<template>
  <div class="bg-confetti" />
</template>

<style scoped>
.bg-confetti {
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='10'%3E%3Crect width='5' height='5'/%3E%3C/svg%3E");
}
</style>

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/nuxt-og-image@629

commit: f427312