[csswg-drafts] [css-values-5] Caching CSS random() values in custom functions (#13661)

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

== [css-values-5] Caching CSS random() values in custom functions ==
The current [CSS Values 5 spec](https://drafts.csswg.org/css-values-5/#random-cache-key) 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.

```css
@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](https://drafts.csswg.org/css-values-5/#valdef-random-property) or [auto](https://drafts.csswg.org/css-values-5/#valdef-random-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:

```css
@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:

```css
@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:

```css
@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 


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


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

Received on Monday, 16 March 2026 13:13:43 UTC