A token $description containing */ closes the generated CSS comment early and breaks the stylesheet

[marko1olo]

Describe the bug

plugin-css writes a token's $description into a /* */ comment without escaping it, so a description containing */ closes the comment early and everything after it is parsed as CSS.

Reproduction

tokens.json:

{
  "color": {
    "$type": "color",
    "blue": {
      "$value": { "colorSpace": "srgb", "components": [0, 0.2, 1] },
      "$description": "Use for links */ } body { display: none;"
    },
    "primary": {
      "$value": "{color.blue}"
    }
  }
}

The emitted stylesheet closes the :root block at the */ inside the comment. Every custom property declared after that token lands in whatever selector the description text happens to form — in this example a body { display: none; } rule — and the trailing */ is left over as a parse error.

Expected behaviour

The description is a free-text field, so any value in it should be emitted safely or omitted. A token description should not be able to change which selector the following variables belong to.

Cause

printNode in packages/plugin-css/src/lib.ts interpolates the comment directly:

if (node.comment) {
  output += `${indent}/* ${node.comment} */\n`;
}

Notes

This is reachable by anyone who writes a description containing */, which is easy to do accidentally in prose about CSS — for example a description that mentions a code fragment. It does not require a hostile author, but it does mean a token file from an untrusted source can decide the contents of the generated stylesheet, so it is worth treating as more than a formatting nit.

I have a patch with a regression test and a changeset, and can open a PR against this issue.