michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Backwards compatible fix for --camelCase css vars in style attribute (#6268)

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

* chore: add changeset
This commit is contained in:
Nate Moore 2023-02-17 11:04:08 -06:00 committed by GitHub
parent bb18010137
commit 933c651fb1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
.changeset/tall-countries-speak.md Normal file
View file

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

9
packages/astro/src/runtime/server/render/util.ts
View file

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