Dependency Cycles via Relative Units with unit algebra

[Loirooriol]

#315 was fixed without considering "unit algebra". CSS Values 4 allows dividing by dimensions, so we may have

@property --my-font-size {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
div {
  --my-font-size: calc(10em / 1px);
  font-size: calc(var(--my-font-size) * 1px);
}

That's a dependency cycle! It's not addressed by https://drafts.css-houdini.org/css-properties-values-api/#dependency-cycles, since that only handles registered properties with a syntax of <length> or <length-percentage>.

The example above uses <number>, but other dimensions like <angle> are also affected:

--my-font-size: calc(10em / 1px * 1deg);
font-size: calc(var(--my-font-size) / 1deg * 1px);

CC @tabatkins

[tabatkins]

Hm, indeed. I think the solution is just to remove the "length or length-percentage" condition (replace it with a "not *" condition, probably), so we add those edges any time the relevant values are used.

[Loirooriol]

Actually we need more than that, because https://drafts.css-houdini.org/css-properties-values-api/#dependency-cycles isn't really addressing the problem with lengths:

@property --foo {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
div {
  --foo: 10ex;
  font-weight: calc(var(--foo) / 1px);
}

The ex unit depends on font-weight , but the directed dependency graph is not aware of it, since there is only an edge to font-size, not font-weight.

[Loirooriol]

Following w3c/csswg-drafts#8169 (comment), I guess we should add an edge to every "font-* property (and anything else that affects font selection)".