Issues with transitive transform output

[jeremyfuksa]

Working with this example: https://github.com/amzn/style-dictionary/tree/main/examples/advanced/transitive-transforms

I have copied the config file into my project and changed the hsl to RGB in the examples. I also want to output rgb and rgba syntax in my CSS.

Example JSON

{
    "rds": {
        "color": {
            "dvt": {
                "1": { "value": { "r": "36", "g": "93", "b": "99" } },
                "border": {
                    "divider": {
                        "value": "{rds.color.dvt.1}",
                        "modify": [
                            {
                                "type": "alpha",
                                "amount": "0.12"
                            }
                        ]
                    }
                }
            }
        }
    }
}

Resulting output

:root {
  --rds-border-radius-xs: 2px;
  --rds-border-radius-sm: 4px;
  --rds-border-radius-md: 6px;
  --rds-border-radius-lg: 8px;
  --rds-border-radius-xl: 8px;
  --rds-color-dvt-1: [object Object];
  --rds-color-dvt-border-divider: [object Object];
}

Why is the transform returning an object instead of CSS? This does the same thing without my config file modifications.

[jorenbroekema]

Hey, this is because your dvt-border-divider and your dvt-1 token have a value property of type object. You'll need a transform that combines the object values into a shorthand string value that CSS understands