[css-values-5] Add spread() to CSS #8391
Description
Proposal
It would help to add support for a new spread() in CSS that would work identically to var() except that it would spread any chained values contained in the variable as if they had each been used individually.
Syntax
The syntax would be something like this, expressed in JS/TS:
function spread(variable: string, currentDelimiter = ',', newDelimiter = currentDelimiter) {
return variable.split(currentDelimiter).join(newDelimiter);
}It could then be used in CSS like this:
* {
--multiple-items: 1, 2, 3, 4, 5;
--single-item: 6;
some-prop: random-item(var(--ident); spread(--multiple-items); var(--multiple-items));
}Using spread(), the random value in the example above would have an equal chance of being any of the six values—
123456
Without spread(), the random value generated would only be one of two options—
1, 2, 3, 4, 56
Alternative syntax
To keep this feature in line with others in CSS, I took a more functional approach using spread(), however, if we wanted to follow the trend of other languages, the traditional ... spread syntax could be employed, which would look like this:
* {
--multiple-items: 1, 2, 3, 4, 5;
--single-item: 6;
some-prop: random-item(var(--ident); ...var(--multiple-items); var(--multiple-items));
}