Backwards compatible fix for --camelCase css vars in style attrib…

…ute (#6268)

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

* chore: add changeset

.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.

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.