[css-properties-values-api] Need to resolve computation/animation/substitution order for typed properties

[shans]

This currently works:

.foo {
  width: var(--a);
  transition: width 1s;
}

.foo:hover {
  width: var(--b);
}

It works because custom property substitution happens before computation or animation:

Inheritance
CP Substitution
Computation
Transitions/Animations

However, once we have typed properties then this will fail using the above order:

.foo {
  width: var(--a);
  transition: --a 1s;
  --a: 100px;
}

.foo:hover {
  --a: 200px;
}

By the time the animation kicks off, animation has already happened.

The solution is probably to add some additional steps:

Inheritance
CP Computation
CP Animation
CP Substitution
Computation
Transitions/Animations

[shans]

Actually, need to do substitution into transition/animation properties before animation so that e.g.

animate: var(--props) var(--dur); 

works.

[shans]

Resolved: animation generation is separate to animation interpolation, which means this isn't actually an issue.