Update style attribute behavior for better object support (#7542)

.changeset/giant-crews-tell.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix bug when using `define:vars` with a `style` object

packages/astro/package.json

@@ -113,7 +113,7 @@
     "test:e2e:match": "playwright test -g"
   },
   "dependencies": {
-    "@astrojs/compiler": "^1.5.0",
+    "@astrojs/compiler": "^1.5.3",
     "@astrojs/internal-helpers": "^0.1.1",
     "@astrojs/language-server": "^1.0.0",
     "@astrojs/markdown-remark": "^2.2.1",

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

@@ -90,9 +90,14 @@ 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') {
+	if (key === 'style' && !(value instanceof HTMLString)) {
+		if (Array.isArray(value) && value.length === 2) {
+			return markHTMLString(` ${key}="${toAttributeString(`${toStyleString(value[0])};${value[1]}`, shouldEscape)}"`);
+		}
+		if (typeof value === 'object') {
 			return markHTMLString(` ${key}="${toAttributeString(toStyleString(value), shouldEscape)}"`);
 		}
+	}
 
 	// support `className` for better JSX compat
 	if (key === 'className') {

packages/astro/test/astro-directives.test.js

@@ -53,6 +53,17 @@ describe('Directives', async () => {
 		expect($('h1').attr('style').toString()).to.include('--textColor: red;');
 	});
 
+	it('Properly handles define:vars on style elements with style object', async () => {
+		const html = await fixture.readFile('/define-vars/index.html');
+		const $ = cheerio.load(html);
+
+		// All styles should be bundled
+		expect($('style')).to.have.lengthOf(0);
+
+		// Inject style attribute on top-level element in page
+		expect($('#compound-style').attr('style').toString()).to.include('color:var(--fg);--fg: black;--bg: white;');
+	});
+
 	it('set:html', async () => {
 		const html = await fixture.readFile('/set-html/index.html');
 		const $ = cheerio.load(html);

packages/astro/test/fixtures/astro-directives/src/pages/define-vars.astro

@@ -36,7 +36,7 @@ let undef: undefined;
 		<script id="inline-5" define:vars={{ undef }}>
 			console.log(undef);
 		</script>
-
+    <div id="compound-style" style={{ color: `var(--fg)` }}></div>
 		<Title />
   </body>
 </html>

pnpm-lock.yaml

@@ -485,8 +485,8 @@ importers:
   packages/astro:
     dependencies:
       '@astrojs/compiler':
-        specifier: ^1.5.0
+        specifier: ^1.5.3
-        version: 1.5.0
+        version: 1.5.3
       '@astrojs/internal-helpers':
         specifier: ^0.1.1
         version: link:../internal-helpers
@@ -5490,14 +5490,14 @@ packages:
       sisteransi: 1.0.5
     dev: false
 
-  /@astrojs/compiler@1.5.0:
+  /@astrojs/compiler@1.5.3:
-    resolution: {integrity: sha512-k04X/7nlMklU0HQUScxbCTf5n8/Vr+0U0bawb9QWulWxd6qJf3FmBrNATgTYiltjB4pc5HBqmmttAfFi7m4lLg==}
+    resolution: {integrity: sha512-/HSFkJ+Yv+WUWSq0QVsIlhBKam5VUpGV+s8MvPguC/krHmw4Ww9TIgmfJSvV8/BN0sHJB7pCgf7yInae1zb+TQ==}
 
   /@astrojs/language-server@1.0.0:
     resolution: {integrity: sha512-oEw7AwJmzjgy6HC9f5IdrphZ1GVgfV/+7xQuyf52cpTiRWd/tJISK3MsKP0cDkVlfodmNABNFnAaAWuLZEiiiA==}
     hasBin: true
     dependencies:
-      '@astrojs/compiler': 1.5.0
+      '@astrojs/compiler': 1.5.3
       '@jridgewell/trace-mapping': 0.3.18
       '@vscode/emmet-helper': 2.8.8
       events: 3.3.0
@@ -15194,7 +15194,7 @@ packages:
     resolution: {integrity: sha512-dPzop0gKZyVGpTDQmfy+e7FKXC9JT3mlpfYA2diOVz+Ui+QR1U4G/s+OesKl2Hib2JJOtAYJs/l+ovgT0ljlFA==}
     engines: {node: ^14.15.0 || >=16.0.0, pnpm: '>=7.14.0'}
     dependencies:
-      '@astrojs/compiler': 1.5.0
+      '@astrojs/compiler': 1.5.3
       prettier: 2.8.8
       sass-formatter: 0.7.6
     dev: true
@@ -15203,7 +15203,7 @@ packages:
     resolution: {integrity: sha512-lJ/mG/Lz/ccSwNtwqpFS126mtMVzFVyYv0ddTF9wqwrEG4seECjKDAyw/oGv915rAcJi8jr89990nqfpmG+qdg==}
     engines: {node: ^14.15.0 || >=16.0.0, pnpm: '>=7.14.0'}
     dependencies:
-      '@astrojs/compiler': 1.5.0
+      '@astrojs/compiler': 1.5.3
       prettier: 2.8.8
       sass-formatter: 0.7.6
       synckit: 0.8.5