From 933c651fb1126b7ad1ff369cd11307c47949d0b6 Mon Sep 17 00:00:00 2001
From: Nate Moore <natemoo-re@users.noreply.github.com>
Date: Fri, 17 Feb 2023 11:04:08 -0600
Subject: [PATCH] Backwards compatible fix for `--camelCase` css vars in
 `style` attribute (#6268)

* fix(#6264): backward-compat fix for camelCase css vars in style

* chore: add changeset
---
 .changeset/tall-countries-speak.md               | 7 +++++++
 packages/astro/src/runtime/server/render/util.ts | 9 ++++++++-
 2 files changed, 15 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/tall-countries-speak.md

diff --git a/.changeset/tall-countries-speak.md b/.changeset/tall-countries-speak.md
new file mode 100644
index 000000000000..42b72cb5f291
--- /dev/null
+++ b/.changeset/tall-countries-speak.md
@@ -0,0 +1,7 @@
+---
+'astro': patch
+---
+
+Do not transform `--camelCase` custom properties to `--camel-case` when they're in a `style` attribute. 
+
+This bug fix is backwards-compatible because we will emit both `--camelCase` and `--camel-case` temporarily. This behavior will be removed in a future version of Astro.
diff --git a/packages/astro/src/runtime/server/render/util.ts b/packages/astro/src/runtime/server/render/util.ts
index a95ef16f8722..1e6ce35a6c58 100644
--- a/packages/astro/src/runtime/server/render/util.ts
+++ b/packages/astro/src/runtime/server/render/util.ts
@@ -27,7 +27,14 @@ const kebab = (k: string) =>
 	k.toLowerCase() === k ? k : k.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
 const toStyleString = (obj: Record<string, any>) =>
 	Object.entries(obj)
-		.map(([k, v]) => `${kebab(k)}:${v}`)
+		.map(([k, v]) => {
+			if (k[0] !== '-' && k[1] !== '-') return `${kebab(k)}:${v}`
+			// TODO: Remove in v3! See #6264
+			// We need to emit --kebab-case AND --camelCase for backwards-compat in v2,
+			// but we should be able to remove this workaround in v3.
+			if (kebab(k) !== k) return `${kebab(k)}:var(${k});${k}:${v}`;
+			return `${k}:${v}`;
+		})
 		.join(';');
 
 // Adds variables to an inline script.