I have color tokens in the following format, some have hex values and others have rgba values:

{
  "Color": {
    "Slate": {
      "100": {
        "$type": "color",
        "$value": "#111113"
      },
      "200": {
        "$type": "color",
        "$value": "rgba(0, 0, 0, 0.0000)"
      }
    },
    "Neutral": {
      "100": {
        "$type": "color",
        "$value": "{Color.Slate.100}"
      },
      "200": {
        "$type": "color",
        "$value": "{Color.Slate.200}"
      }
    },
    "Background": {
      "100": {
        "$type": "color",
        "$value": "{Color.Neutral.100}"
      },
      "200": {
        "$type": "color",
        "$value": "{Color.Neutral.200}"
      }
    }
  }
}

I am trying to generate CSS output where:

• Tokens with hex values generate two CSS variables, one with the hex value and another with a comma separated rgb value
• Tokens with rgba values are output as is

Based on these requirements, here's the output I expect (note 2 values for all 100's & only 1 value for all 200's):

  --color-slate-100: #111113;
  --color-slate-100-rgb: 17, 17, 19;
  --color-slate-200: rgba(0, 0, 0, 0);

  --color-neutral-100: #111113;
  --color-neutral-100-rgb: 17, 17, 19;
  --color-neutral-200: rgba(0, 0, 0, 0);

  --color-background-100: #111113;
  --color-background-100-rgb: 17, 17, 19;
  --color-background-200: rgba(0, 0, 0, 0);

However this is what I am actually getting:

  /* no slate-100 hex value */
  --color-slate-100-rgb: 17, 17, 19;
  --color-slate-200: rgba(0, 0, 0, 0);

  /* no neutral-100 hex value */
  --color-neutral-100: 17, 17, 19;   /* incorrect: no rgb suffix in variable name */
  --color-neutral-200: rgba(0, 0, 0, 0);

  /* no background-100 hex value */
  --color-background-100: 17, 17, 19;   /* incorrect: no rgb suffix in variable name */
  --color-background-200: rgba(0, 0, 0, 0);

What is the easiest strategy to achieve this?

Here's my attempt so far (see github repo):

I added two transforms that filter tokens of type color and value in hex:

1. The first transform adds the suffix -rgb to the token name
2. The second transform converts the hex value to rr, gg, bb

Here's how I add the two transforms to my css platform, using the transforms property:

platforms: {
  css: {
    transformGroup: "css",
    transforms: [TRANSFORM_NAME_MODIFIER_RGB, TRANSFORM_COLOR_RGB_COMMA_SEPARATED],
    buildPath: "build/css/",
    files: [
      {
        destination: `${theme}.${colorMode}.css`,
        format: "css/variables",
      },
    ],
  },
},

Issues:

1. The 2 custom transforms stop the generation of hex color values provided by the css transformGroup. Only the rgb values are output now. How can I output both values?
2. The rgb transform adds the rgb suffix only to slate-100 and not to neutral-100 and background-100 – probably because the last two have alias values and those obviously don't match the hex color regex.

Is there a good way to structure this code to solve both the issues?