fix object styles not escaped (#4887)

* fix object styles not escaped

* fix `shouldEscape` not passed down

* add tests

* fix package name

* fix pnpm-lock

* add changeset

.changeset/swift-moles-crash.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+fix object styles not escaped

packages/astro/src/runtime/server/render/util.ts

@@ -72,7 +72,7 @@ Make sure to use the static attribute syntax (\`${key}={value}\`) instead of the
 
 	// support "class" from an expression passed into an element (#782)
 	if (key === 'class:list') {
-		const listValue = toAttributeString(serializeListValue(value));
+		const listValue = toAttributeString(serializeListValue(value), shouldEscape);
 		if (listValue === '') {
 			return '';
 		}
@@ -81,7 +81,7 @@ Make sure to use the static attribute syntax (\`${key}={value}\`) instead of the
 
 	// support object styles for better JSX compat
 	if (key === 'style' && !(value instanceof HTMLString) && typeof value === 'object') {
-		return markHTMLString(` ${key}="${toStyleString(value)}"`);
+		return markHTMLString(` ${key}="${toAttributeString(toStyleString(value), shouldEscape)}"`);
 	}
 
 	// support `className` for better JSX compat

packages/astro/test/astro-object-style.test.js

@@ -0,0 +1,32 @@
+import { expect } from 'chai';
+import * as cheerio from 'cheerio';
+import { loadFixture } from './test-utils.js';
+
+describe('Object style', async () => {
+	let fixture;
+
+	before(async () => {
+		fixture = await loadFixture({ root: './fixtures/astro-object-style/' });
+		await fixture.build();
+	});
+
+	it('Passes style attributes as expected to elements', async () => {
+		const html = await fixture.readFile('/index.html');
+		const $ = cheerio.load(html);
+
+		expect($('[style="background-color:green"]')).to.have.lengthOf(1);
+		expect($('[style="background-color:red"]')).to.have.lengthOf(1);
+		expect($('[style="background-color:blue"]')).to.have.lengthOf(1);
+		expect($(`[style='background-image:url("a")']`)).to.have.lengthOf(1);
+	});
+
+	it('Passes style attributes as expected to components', async () => {
+		const html = await fixture.readFile('/component/index.html');
+		const $ = cheerio.load(html);
+
+		expect($('[style="background-color:green"]')).to.have.lengthOf(1);
+		expect($('[style="background-color:red"]')).to.have.lengthOf(1);
+		expect($('[style="background-color:blue"]')).to.have.lengthOf(1);
+		expect($(`[style='background-image:url("a")']`)).to.have.lengthOf(1);
+	});
+});

packages/astro/test/fixtures/astro-object-style/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@test/astro-object-style",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "astro": "workspace:*"
+  }
+}

packages/astro/test/fixtures/astro-object-style/src/components/Span.astro

@@ -0,0 +1 @@
+<span {...Astro.props} />

packages/astro/test/fixtures/astro-object-style/src/pages/component.astro

@@ -0,0 +1,10 @@
+---
+import Component from '../components/Span.astro'
+---
+<Component style="background-color:green" />
+
+<Component style={"background-color:red"} />
+
+<Component style={{backgroundColor:"blue"}} />
+
+<Component style={{backgroundImage:'url("a")'}} />

packages/astro/test/fixtures/astro-object-style/src/pages/index.astro

@@ -0,0 +1,7 @@
+<span style="background-color:green" />
+
+<span style={"background-color:red"} />
+
+<span style={{backgroundColor:"blue"}} />
+
+<span style={{backgroundImage:'url("a")'}} />

pnpm-lock.yaml

@@ -1426,6 +1426,12 @@ importers:
     dependencies:
       astro: link:../../..
 
+  packages/astro/test/fixtures/astro-object-style:
+    specifiers:
+      astro: workspace:*
+    dependencies:
+      astro: link:../../..
+
   packages/astro/test/fixtures/astro-page-directory-url:
     specifiers:
       astro: workspace:*