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

…ute (withastro#6268)

* fix(withastro#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.