docs
docs copied to clipboard
withastro
Gotcha: component style custom properties are transformed from camel case to kebab case
(Copied text so it's easier to keep an eye on from a distance)
toonddd — 09/12/2022 Astro automatically transforms component style object custom properties from camel case to kebab case.
What is the original reason/benefit for doing so?
From my current perspective it looks unnecessary and even confusing, added complexity.
nate (he/him) — 09/12/2022 Ah this is a good point! Nobody has ever brought this up as a pain point before, so I think we're stuck with it for v1.0, but it could certainly be a breaking change in the future! CSS custom properties are usually --kebab-case but there's no technical reason they can't be --camelCase
Would love to make this my first Astro contribution! Are we wanting to add this as a 'Gotcha'/good-to-know part of the docs?
If so, I can put something together for it. Please assign to me! Thanks!
On a roll today with the contributions, @WintrCodes! 🚀
Sure, let's start by thinking of this as one of those "gotchas" for the Troubleshooting page! Depending on what you come up with, there may end up being a different fit, but I think thinking of it as troubleshooting advice makes a lot of sense to start.
Here's a first draft!
Gotcha: --camelCase transformed to --kebab-case
If you attempt to override CSS variables by including them in your HTML using style object custom properties, do note that anything written in --camelCase will be transformed to --kebab-case. See the example below.
<body style={{ '--cssVariable': 'brown' }} >
<div style="--anotherVar: blue">
<h1>Astro</h1>
</div>
</body>
<style>
h1 {
color: var(--css-variable);
background-color: var(--another-var);
}
</style>
In this example, style={{ '--cssVariable': 'brown' }} will be transformed to style="--css-variable:brown", however style="--anotherVar: blue" does not get transformed.