🐛 BUG: duplicate style prop for `define:vars` is set when another style prop is spread

[ascorbic]

What version of @astrojs/compiler are you using?

2.10.3

What package manager are you using?

pnpm

What operating system are you using?

Mac

Describe the Bug

Normally, when setting define:vars on a style tag, an inline style prop is added to elements that sets those CSS vars. If there is an existing style prop, the var definition is concatenated to it. If however the style prop is spread from an object, the values are not concatenated, and instead a duplicate style attribute is applied causing the second attribute to be ignored.

---
import Layout from '../layouts/Layout.astro';

const props = {
	style: "background-color: green"
}

---

<Layout title="Welcome to Astro.">

<div class='box' style="background-color: blue">Inline works</div>
<div class='box' {...props}>Spread doesn't</div>
</Layout>

<style define:vars={{
	colour: "yellow"
}}>

.box {
	display: grid;
	place-items: center;
	text-align: center;
	width: 100px;
	height: 100px;
	background-color: red;
	border: 4px var(--colour) solid;
}
</style>

...generates this:

<div class="box" style="background-color: blue; --colour: yellow;" data-astro-cid-j7pv25f6>Inline works</div>
<div class="box" style="background-color: green" data-astro-cid-j7pv25f6 style="--colour: yellow;">Spread doesn't</div>

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-88jot9?file=src%2Fpages%2Findex.astro&on=stackblitz