diff --git a/.changeset/giant-crews-tell.md b/.changeset/giant-crews-tell.md
new file mode 100644
index 0000000000..c4fe8b89f7
--- /dev/null
+++ b/.changeset/giant-crews-tell.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix bug when using `define:vars` with a `style` object
diff --git a/packages/astro/package.json b/packages/astro/package.json
index 6e4ccdd2d4..821d635095 100644
--- a/packages/astro/package.json
+++ b/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",
diff --git a/packages/astro/src/runtime/server/render/util.ts b/packages/astro/src/runtime/server/render/util.ts
index 182700976c..6c5080367d 100644
--- a/packages/astro/src/runtime/server/render/util.ts
+++ b/packages/astro/src/runtime/server/render/util.ts
@@ -90,8 +90,13 @@ 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}="${toAttributeString(toStyleString(value), shouldEscape)}"`);
+ 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
diff --git a/packages/astro/test/astro-directives.test.js b/packages/astro/test/astro-directives.test.js
index 9afbbbe973..9b90d59bf6 100644
--- a/packages/astro/test/astro-directives.test.js
+++ b/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);
diff --git a/packages/astro/test/fixtures/astro-directives/src/pages/define-vars.astro b/packages/astro/test/fixtures/astro-directives/src/pages/define-vars.astro
index 47ec64fb78..108a120355 100644
--- a/packages/astro/test/fixtures/astro-directives/src/pages/define-vars.astro
+++ b/packages/astro/test/fixtures/astro-directives/src/pages/define-vars.astro
@@ -36,7 +36,7 @@ let undef: undefined;
-
+