[css-houdini-drafts] [css-properties-values-api] Allow custom properties to be used for initial-value inside @property (#1140)

ianthedev has just created a new issue for https://github.com/w3c/css-houdini-drafts:

== [css-properties-values-api] Allow custom properties to be used for initial-value inside @property ==
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:

```CSS
@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:

```CSS

: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](https://stackoverflow.com/a/63848864). Such an animation/transition normally wouldn't work without `@property`.

Please view or discuss this issue at https://github.com/w3c/css-houdini-drafts/issues/1140 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Saturday, 22 March 2025 03:14:48 UTC