[csswg-drafts] [css-values] Add `spread()` to CSS (#8391)

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

== [css-values] Add `spread()` to CSS ==
### 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:

```ts
function spread(variable: string, currentDelimiter = ',', newDelimiter = currentDelimiter) {
  return variable.split(currentDelimiter).join(newDelimiter);
}
```

It could then be used in CSS like this:

```css
* {
  --multiple-items: 1, 2, 3, 4, 5;
  --single-item: 6;
  some-prop: random-item(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—
* `1`
* `2`
* `3`
* `4`
* `5`
* `6`

Without `spread()`, the random value generated would only be one of two options—
* `1, 2, 3, 4, 5`
* `6`

### 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:

```css
* {
  --multiple-items: 1, 2, 3, 4, 5;
  --single-item: 6;
  some-prop: random-item(...var(--multiple-items), var(--multiple-items));
}
```

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


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

Received on Wednesday, 1 February 2023 21:21:19 UTC