@property css definition , can we incorporate this in the css output

[3dyonic]

Hi,
i wonder, if i want to implement the new "@Property" css definitions in the css output, what would be the best approach.

@Property --property-name {
syntax: "";
inherits: false;
initial-value: #c0ffee;
}

[ArnaudWeyts]

I've done some experimenting around this in a codebase with a lot of design system tokens, but came to the conclusion that converting them to @property won't really be an improvement for us. We define tokens as immutable, but the biggest benefit of using @property is that your token becomes easier to animate using a mutation. Another caveat is that the initial-value property can't reference other css variables and must be a computed value. So tokens relying on other tokens don't really work either, something that does work with regular css variable definitions. Finally, the last caveat is that you need to define @property on a root level, so you can't use the selector option that f.e. css/variables provides (which can be used for better scoping like f.e. theming).

Here's a small codepen that kind of highlights this issue: https://codepen.io/ArnaudWeyts/pen/xbxXozM?editors=1100