Backwards compatible fix for --camelCase css vars in style attribute

[natemoo-re]

Changes

• Closes Camel case CSS variables transformed to kebab case when used in style object #6264
• Removes a bug in our style logic that would convert --camelCase to --camel-case.
• This is done in a backwards-compatible way to avoid a breaking change.
• This should be removed in v3.

---
const myValue = "red"
---
<!-- input -->
<div style={{ "--myValue": myValue }} />

<!-- output (before) -->
<div style="--my-value:red"></div>

<!-- output (now, this PR) -->
<div style="--my-value:var(--myValue);--myValue:red"></div>

Testing

Tested manually, small enough that we don't have tests

Docs

Related to withastro/docs#1539
/cc @withastro/maintainers-docs for feedback!

[changeset-bot]

🦋 Changeset detected

Latest commit: 94101f2

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[delucis]

LGTM! Really smart way to handle this.

[bluwy]

<div style="--my-value:var(--myValue);--myValue:red"></div>

Looks like the snake case var accesses the camelCase var that is declared later, but I tested this and it still worked fine too 👍 LGTM