[csswg-drafts] [css-values] "inherits: declaration" @property syntax (#13188)

jamesnw has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-values] "inherits: declaration" @property syntax ==
While exploring `sibling-index()`, I observed that by not registering a custom property with a `sibling-index()` value, you can inherit a declaration that is computed in the context where it is used. This is because it can not be computed before it is inherited, and so the declaration is inherited, and not a value.

```css
parent {
 --index: sibling-index();
}
child {
    /* The 10th child of the 4th parent has a hue of 100, not of 40. */
 color: oklch(.5 .2 calc(var(--index) * 10));
}
```

You can register a property with `syntax: "*"` to keep this behavior, but only if the property can't be computed when declared. There isn't a way to opt in to this behavior when the property can be computed.

My proposal is adding a `declaration` keyword for `inherits` in an `@property` at-rule. This would signal that the property should not be computed before it is inherited, and expose this behavior for declarations that could be computed before inheritance. 

An alternative change could be specifying `syntax: "<declaration>"`, but this could interfere with other use cases of properties, like color interpolation.

In addition to making it possible to register properties without changing behavior, it would be a useful pattern. For instance, you could use it to inherit a set of color functions that are computed based on custom properties or attributes where they are used.

```css
@property --darkenText{
 syntax: "<color>";
 inherits: declaration;
 initial-value: oklch(from var(--foregroundColor) calc(l - .1) c h);
}
a{
 --foregroundColor: hotpink;
 color: var(--foregroundColor);
}
a:hover {
 /* computes as `oklch(from hotpink calc(l - .1) c h)` */
 color: var(--darkenText);
}
```

Conceptually, this feels like passing a callback function in JavaScript. There's likely overlap in use cases with `@function`s as well as [`inherit()`](https://github.com/w3c/csswg-drafts/issues/2864). 

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


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

Received on Friday, 5 December 2025 15:01:27 UTC