Format output validation

[jorenbroekema]

From the perspective of CSS , you cannot put a CSS custom property just anywhere.

Example:

:root {
  --my-rgb: #ff0000;
  --my-rgba: rgba(var(--my-rgba), 0.8);
}

Is invalid CSS and will not work.

In instances like these, I think an error should be thrown by style-dictionary when using outputReferences, to prevent a silent error happening in the output CSS where this color is straight up not working. Perhaps in the format a CSS validator can be used to warn users about invalid CSS?

User should then fix this issue by changing the token in the source itself. Alternatively, if in the future resolving references can be turned on conditionally, users could solve these tokens by resolving the reference and creating a transform that converts rgba(hex, alpha) to rgba(r,g,b, alpha) format.

Throwing an error would be a breaking change so probably best to tackle before 4.0.0 release?