How to extend transformGroup?

[IanVS]

I'd like to have my colors in hsl format, but when I add transforms: ['color/hsl'] to my config, it seems to override "transformGroup": "css",.

I don't see a way to import the css transform group from style-dictionary in order to spread it into my transforms array.

I think my best bet is to just avoid transformGroup and reconstruct it manually. Just curious if there's a more elegant approach, or if that's the recommended way.

[TrevorRice]

You should be able to append your custom transform like so:

StyleDictionary.registerTransformGroup({
  name: 'custom/css',
  transforms: StyleDictionary.transformGroup.css.concat([
    "color/hsl"
  ])
});

[jorenbroekema]

For v4 this snippet would be slightly different:

StyleDictionary.registerTransformGroup({
  name: 'custom/css',
  transforms: StyleDictionary.hooks.transformGroups.css.concat([
    "color/hsl"
  ])
});

[IanVS]

Thanks!