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

@tabatkins Thanks for all the feedback! I agree, and either of those sounds good to me also. I'm still thinking about the pros and cons of each.

With that model in mind, would CSS lists always work use a semicolon delimiter rather than another symbol?

Also, would this be valid syntax, not including the `spread()` at the top-level but rather in the `random-item()` function itself, where the list is wrapped in parentheses without any function:

```css
.foo {
  --some-items: (1; 2; 3);
  --some-prop: random-item(--x; spread(var(--some-items));
}
```

If this wouldn't be considered valid syntax, it may be helpful to include some other function like `list()` as well to denote creating a list that doesn't need immediate spreading, randomizing, or nth-ing, thereby making the list more reusable.

That way, all of these would be valid:

```css
.foo {
  --some-items: list(1; 2; 3);

  /* spreading into `nth()` */
  --first-item: nth(spread(--some-items); 1);

  /* spreading into `random-item()` */
  --random-item: random-item(--x; spread(--some-items));
}
```

I think it could be useful for `spread()` to take in variables without needing to use `var()` (e.g. `spread(--a; --b; 1; 2)` vs. `spread(var(--a); var(--b); 1; 2)`), though I think either is perfectly acceptable if you or the CSSWG think otherwise.

I do wonder in regard to the delimiter if it would help to be able to spread into other properties using a different delimiter. For example:

```css
:root {
  --colors: red, green, blue;
}
div {
  --overlay-color: rgb(0 0 0 / 75%);
  --overlay: linear-gradient(rgb(0 0 0 / 75%), rgb(0 0 0 / 75%));
  background: var(--overlay), linear-gradient(var(--colors)); /* requires comma delimiter */
  color: random-item(--x per-element; spread(--colors)); /* requires semicolon delimiter */
}
```

Similar to how `random()` uses a `by` keyword, I wonder if `spread()` could be extended to use something similar like `spread(--colors; black; using ,)` and `spread(--colors; black; using ;)` respectively, where the default would be `;` but could be manually set to another delimiter when needed for values that might use a different delimiter like `,` or `/`.

Maybe that's a possibility to consider later though. For starters, I think either of your proposed examples more than meets the use case I was aiming for with this proposal. Thanks!

-- 
GitHub Notification of comment by brandonmcconnell
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8391#issuecomment-1414372954 using your GitHub account


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

Received on Thursday, 2 February 2023 21:07:15 UTC