diff options
| -rw-r--r-- | .changeset/tall-countries-speak.md | 7 | ||||
| -rw-r--r-- | packages/astro/src/runtime/server/render/util.ts | 9 |
2 files changed, 15 insertions, 1 deletions
diff --git a/.changeset/tall-countries-speak.md b/.changeset/tall-countries-speak.md new file mode 100644 index 000000000..42b72cb5f --- /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 a95ef16f8..1e6ce35a6 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. |