Re: [csswg-drafts] [css-values?] What is the MVP for inline conditionals on custom properties? (#10064)

I had a chat with @andruud a few days ago, and he said that this proposed design would be fairly easy to implement.

Grammar:

```
<if()> = if( <container-query>, [<declaration-value>]{1, 2} )
```

- Links:
 - [`<container-query>`](https://drafts.csswg.org/css-contain-3/#typedef-container-query)
 - [`<declaration-value>`](https://drafts.csswg.org/css-syntax-3/#typedef-declaration-value)
- Values can be nested to produce multiple branches
- If a third argument is not provided, it becomes equivalent to an empty token stream

I did not discuss this but a nice DX improvement could be this grammar instead:

```
<if()> = if( 
 [ <container-query>, [<declaration-value>]{2}  ]#{0, },
 <container-query>, [<declaration-value>]{1, 2} 
)
```

which would allow for multiple conditions more easily. Compare:

<table>
<thead>
<tr>
<th>Grammar 1</th>
<th>Grammar 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>

```css
background-color: if(
 style(--variant: success), var(--color-success-60), 
 if(style(--variant: warning), var(--color-warning-60), 
  if(style(--variant: danger), var(--color-danger-60), 
   if(style(--variant: primary), var(--color-primary))
  ),
 )
);
```
</td>
<td>

```css
background-color: if(
 style(--variant: success), var(--color-success-60), 
 style(--variant: warning), var(--color-warning-60),
 style(--variant: danger), var(--color-danger-60), 
 style(--variant: primary), var(--color-primary)
);
```
</td>
</tr>
</tbody>
</table>

Behavior: Any invalid value would make the property IACVT.

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


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

Received on Monday, 10 June 2024 11:22:45 UTC