[css-properties-values-api] Allow custom properties to be used for initial-value inside @property

[ianthedev]

If I define a custom property explicitly with the @property at-rule by using a straightfoward color value for initial-value, it works. Working example below:

@property --my-color1 {
    syntax: "<color>";
    initial-value: magenta;
    inherits: false;
}

But if I use a previously defined custom property for initial-value, it does not work. Not-working example below:

:root {
    --color-primary: magenta;
}

@property --my-color1 {
    syntax: "<color>";
    initial-value: var(--color-primary);
    inherits: false;
}

Please allow the not-working example to work. It kinda defeats the purpose of custom properties if we still have to write their values after defining them (inside @property, in this case).

The reason for involving @property in this case is to animate CSS gradient, as illustrated in this Stack Overflow answer. Such an animation/transition normally wouldn't work without @property.

[jedrichards]

Furthermore, you cannot even use one @property variable as an input to another, even if defined with @property

@property --foo {
  inherits: true;
  initial-value: red;
  syntax: '<color>';
}

@property --bar {
  inherits: true;
  initial-value: var(--foo); // ❌ Invalid
  syntax: '<color>';
}

So it becomes quite tricky to build up a set of variables (say for a design system) that may reference each other, without duplicating information in :root