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

[walbo]

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

[Clorith]

Upstream report to the Gutenberg repo at ​https://github.com/WordPress/gutenberg/issues/39155

Adding to the 5.9.2 milestone for tracking until we have a clear direction here.

[oandregal]

WordPress 5.8 had a bug by which front-end styles and editor styles were different. We fixed this in 5.9. See more details at ​https://github.com/WordPress/gutenberg/issues/39155#issuecomment-1063880553

The plan is to update the devnote for theme.json v2 including this bugfix ​https://make.wordpress.org/core/2022/01/08/updates-for-settings-styles-and-theme-json/

[oandregal]

As reported upstream the devnote has been updated and this is the correct behavior.

[oandregal]

I'm unable to close the issue. I can mark it as "wontfix" or "worksforme" labels but that feels wrong. Sharing in case anyone can close it.

[audrasjb]

Moving to milestone 5.9.3 since we're about to release 5.9.2.

[joyously]

#55602 was marked as a duplicate.