The @property rule is an alternative way to register a custom property without JavaScript.
Waiting for a script to register a property may not be desirable in all cases. Depending on (async) circumstances, registering a property in JS can cause a full style recalculation of the document, depending on when it happens. With @property, the registration can be part of the CSS stylesheet, the same way, for example, @keyframes can.
Explainers: https://github.com/w3c/css-houdini-drafts/issues/137