[css-properties-values-api] Transitions and custom properties

Tab Atkins, Matt Rakow, and I worked through some use cases for mixing
transitions and custom properties together, with an aim to identify the
order in which transitions and the apply hook should be invoked.

tl;dr: transitions should operate *before* the apply hook.

Here are the use cases we looked at:

(1) I want to transition my number-like custom property directly.
(e.g. I have a --lighten property that modifies the output background-color
by a percentage. I want to transition the amount by which things are
lightened):

.foo {
  --lighten: 5%;
  background-color: red;
  transition: --lighten 1s;
}

.foo:hover {
  --lighten: 25%;
}

If the transition runs first, then this just works: the transition creates
intermediate values for --lighten, which are subsequently used to modify
the background-color in apply().

If the transition runs after apply, though, then --lighten isn't updated
until after it's written the background-color and we don't see a
transition. Indeed, we'd have to transition background-color to see an
effect, and that's *weird*.

(2) I want to transition my property but have the effect of a custom
property still apply:

.foo {
  --lighten: 5%;
  background-color: red;
  transition: background-color 1s;
}

.foo:hover {
  background-color: green;
}

If the transition runs first, then background-color gets updated before
apply hooks are run. Because --lighten has registered background-color as
an input, it gets invoked and fixes up the background-color as required.

If the apply hook runs first, then it will apply to the background-color
which will then be transitioned. This works fine, but only as long as the
apply hook is a linear transformation.

(Actually, there might be a use case for explicitly wanting a linear
transition between the output of a non-linear transformation, rather than
transitioning in the linear space and applying the non-linearity at each
point. I'd like to hear from anyone who can think of one).

(3) I want to invent transition behavior between two names (effectively, I
want to generate custom aliases):

.foo {
  --color: chartrurple;
  transition: --color 1s;
}

.foo:hover {
  --color: beiglemousse;
}

If the transition runs first, this won't work. There's no way to transition
between these names directly.

If the apply hook runs first, this won't work. It's not --color that would
need to transition, but whatever property this actually applies to. As
mentioned above, that would be weird.

Fortunately, we know that we want to introduce a custom computation phase
in a future level of the specification, and that would be an *excellent*
way to implement aliases.

(4) I want my custom property to generate transitioning behavior without
explicit requests from the author - e.g. this would transition over a
period of time *in the absence of any transition: value being set*:

.foo {
  --lighten: 5%;
}

.foo:hover {
  --lighten: 25%;
}

Please don't do that :) It's effectively a form of working against author
intent.

--------

Any other use cases or suggestions welcome, but at the moment it's looking
like transition followed by apply is the right way to go.

Cheers,
    -Shane