Export tool turns var() into unicode characters

[TeBenachi]

Description

Issue

When template files use variable var(), export tool turns the variable into Unicode characters.

For example, Page template in Twenty Twenty-Two uses
var(--wp--custom--spacing--medium, 6rem) on the line 5.

After exporting, the variable turns into
var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dspacing\u002d\u002dmedium, 6rem).

Step-by-step reproduction instructions

1. Install Twenty Twenty-Two
2. Go to Editor < Templates < Page
3. Click on the 3 dots on the top right corner to open the Tools panel
4. On the Tools panel, click Export to download templates and templates parts files
5. Check the line 5 on Page template file

Environment info

I tested on 5.9-beta4 using Gutenberg v12.2.0 on Firefox / macOS.

[annezazu]

cc @Mamaduka perhaps since you've done work around exporting items: #36619

[Mamaduka]

Thanks for the ping, @annezazu. Assing this issue to myself and will have a look next week.

[chthonic-ds]

I believe this is happening for any instance of --, not just for CSS variables.

For example, wp-block-query--cards becomes wp-block-query\u002d\u002dcards when exported.

[Mamaduka]

Hi, @scruffian

Since you worked on recent export updates, do you remember if this is still an issue?

[scruffian]

We decided that this is the correct behaviour, see #39576

[Mamaduka]

Thank you, @scruffian.

[tcmulder]

I'm confused, does this mean we're unable to use BEM class names for blocks? I have a select box that lets the user select multiple classes to apply to their block, which it saves as an array of class names, and right now my client is getting the "attempt block recovery" warning because classes like carousel--dark get converted to carousel\u002d\u002ddark in the save function but not in the post body.