Custom css variables in theme.json have different keys in 5.9

[Clorith]

Description

This is a migration of the reported issue from https://core.trac.wordpress.org/ticket/54953 :

Noticed that custom css variables generated by theme.json can have different output in WP5.9 compared to how they were in 5.8. Seems like 5.9 adds an extra - when numbers are included in the key.

{
  "settings": {
    "custom": {
      "m16": "1rem"
    }
  }
}

The example above will in 5.8 create a variable called: --wp--custom--m16 but in 5.9 it will be --wp--custom--m-16.
I'm not sure if the change was a bug fix or unintended change. We have a plugin that allows themes to change som style using custom variables and this bug makes it hard to support both 5.8 and 5.9

Step-by-step reproduction instructions

Screenshots, screen recording, code snippet

No response

Environment info

• WordPress 5.9

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[Mamaduka]

Thanks for reporting the issue.

If I remember correctly, these changes were required to get parity between JS/PHP kebab case - #36875.

[skorasaurus]

Thanks for reporting; this was an intentional change as reported at #31629 and fixed in #35751

[Clorith]

So this is an intentional change that isn't going to change back then, am I reading that right? As this is a breaking change in styling behavior between 5.8 and 5.9 in terms of theme.json compatibility, we need to be very clear if that's the case.

[Clorith]

Following up here, isn't would it not make sense to use them theme.json versioning to denote changes in behavior like this as well? (I'm thinking out loud trying to find solutions here).

I know it generally relates to available features, but I would say that different behavior of how the defined values are treated also falls within the realm of what could be considered versioned behavior 🤔

[annezazu]

To follow back up here on next steps, working with @oandregal to get an update to https://make.wordpress.org/core/2022/01/08/updates-for-settings-styles-and-theme-json/ in light of this change. There will be a comment noting the change and the post itself will be updated, since this is an intentional change.

As for thinking about versioning, I'm afraid I can't speak to how viable that might be as an option. Appreciate you thinking through ways forward though <3

[oandregal]

Yeah, this is a bug in 5.8 that we fixed in 5.9. Here's a potential text to add in the devnote:

Fix for CSS Custom Property names that contain numbers

In 5.9 we fixed a bug by which the frontend and the editors would render different CSS Custom Properties. Take this example:

{
    "settings": {
        "color": {
            "palette": [
                {
                    "slug": "white2black",
                    "color": "value",
                    "name": "White to Black"
                }
            ]
        },
        "custom": {
            "white2black": "value"
        }
    }
}

The expected result is that the engine generates the following properties (note how white2black is converted into white-2-black):

body {
  --wp--preset--color--white-2-black: "value";
  --wp--custom--white-2-black: "value";
}

In 5.8 the code generated for the frontend had a bug by which it wouldn't explode the numbers.

[annezazu]

^ I added this into the dev note and added a changelog to note the update. Thank you!

[oandregal]

I don't seem to be able to close the track ticket https://core.trac.wordpress.org/ticket/54953 Sharing here in case anyone is able to.