cli: [Bug]: Malformed css var if I have more than one color picker set in a block schema

Please confirm that you have:

• Searched existing issues to see if your issue is a duplicate. (If you’ve found a duplicate issue, feel free to add additional information in a comment on it.)
• Reproduced the issue in the latest CLI version.

In which of these areas are you experiencing a problem?

App

Expected behavior

Properly formatted css vars like so:

:root {
  --shopify-editor-app-c2da8ae9-8078-41a4-9575-ee43973f524f-block-6174823716744025243-setting-title_color: #ffffff;
  --shopify-editor-app-c2da8ae9-8078-41a4-9575-ee43973f524f-block-6174823716744025243-setting-subtitle_color: #ffffff;
}

Actual behavior

Malformed css vars. A missing semicolon makes it so that there is only one field--shopify-editor-app-c2da8ae9-8078-41a4-9575-ee43973f524f-block-6174823716744025243-setting-title_color, with value: #ffffff --shopify-editor-app-c2da8ae9-8078-41a4-9575-ee43973f524f-block-6174823716744025243-setting-subtitle_color: #ffffff;.

:root {
  --shopify-editor-app-c2da8ae9-8078-41a4-9575-ee43973f524f-block-6174823716744025243-setting-title_color: #ffffff --shopify-editor-app-c2da8ae9-8078-41a4-9575-ee43973f524f-block-6174823716744025243-setting-subtitle_color: #ffffff;
}

Stack trace

No response

Reproduction steps

1. Make a theme app extension
2. In the block schema, specify two color picker input settings (e.g. color1, color2)
3. Make a {% style %} that defines one css class per color picker (e.g. heading–color1, heading–color2)
4. Make some UI with text elements that use those css classes (e.g. <h1 class="heading--color1">test</h1>)
5. Inspect element, and follow the generated css vars.

Operating System

Windows 11

Shopify CLI version (check your project’s package.json if you’re not sure)

3.29

Shell

bash

Node version (run node -v if you’re not sure)

v18.12.1

What language and version are you using in your application?

n/a