[css-values-5] Caching CSS random() values in custom functions

[tursunova]

The current CSS Values 5 spec defines the caching key for random() based on the property the value is assigned to. However, it does not explicitly define how this works when random() is invoked within a CSS Function (@function).

Without a specific rule, two different functions (e.g., --foo() and --bar() below) used on the same property (e.g., width) might resolve to the same "per-property" cache key, causing them to return the same random value when independence is expected.

@function --foo() returns <number> {
    result: random(--rand property, 1, 1000);
}
@function --bar() returns <number> {
    result: random(--rand property, 1, 1000);
}

...
width: --foo();
width: --bar();
...

Proposal:

if property or auto is specified, use the concatenation of function name and the local identifier (the specific property within the function where the value is computed: result, a local variable, or a default argument) when caching random() values in @function.

This means for the example above, the random caching key will consist of "--rand", "--foo result", ... for the first random() value and "--rand", "--bar result", ... for the second.

Another example with random() used in function locals:

@function --foo(--x <number>) {
    --x: random(--rand property, 1, 1000);  /* We will use "--foo --x" as property name for caching here  */
    result: var(--x);
}
@function --bar(--x <number>) {
    --x: random(--rand property, 1, 1000); /* We will use "--bar --x" as property name for caching here  */
    result: var(--x);
}

And example with random in default argument values:

@function --foo(--x <number>: random(--rand property, 1, 1000)) { /* We will use "--foo --x" as property name for caching here  */
    result: var(--x);
}
@function --bar(--x <number>: random(--rand property, 1, 1000)) { /* We will use "--bar --x" as property name for caching here  */
    result: var(--x);
}

...
width: --foo();
width: --bar();
...

Note, the function name is needed only when we compute values in @function, in cases like:

@function --f() {
     result: random(--rand property, 1, 1000);
}
@function --g() {
     result: random(--rand property, 1, 1000);
}

...
width: --foo();
width: --bar();
...

We will use property that the function is being applied to, i.e. width in the example above, for caching random() values.

cc: @tabatkins