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

I spent some time thinking about what I, _personally_, would want to see as a syntax, without thinking about any potential technical limitations, and so it would fulfill most of the use cases mentioned here.

Here is what I got:

- - - 

Single branch: `bar` when `isFoo` is truthful, IACVT otherwise.

```css
if(isFoo: bar)
```

the same as 

```css
if(isFoo: bar;)
```

empty (`\s*`) after the semicolon is _not_ considered as an empty, will be treated as IACVT if `isFoo` is falsy.

- - -

Two branches: `bar` when `isFoo` is truthful, `baz` otherwise. Only use a `;` here, do not accept a comma.

```css
if(isFoo: bar; baz)
```

Same, with an explicit `else:` branch:

```css
if(isFoo: bar; else: baz)
```

Same, with an optional semicolon in the end, formatted with newlines:

```css
if(
 isFoo: bar;
 else: baz;
)
```

This is the reason I want to have _only_ a semicolon, without a comma as a delimiter here, as well as not treat the emptiness after the semicolon as an empty value — this notation looks very close to what we have in CSS with declarations and descriptors.

The optional `else:` allows for a more concise form when needed, but also a more explicit one, which could also be used for the empty fallback case:

```css
if(isFoo: bar; else:)
```

Same as 

```css
if(isFoo: bar; else: ;)
```

This will also allow, and work very well in how it would look for multiple conditions:

```css
if(
 isFoo: bar;
 isSomethingElse: baz;
 else: boo;
)
```

- - - 

Note: I, personally, don't have a strong preference for any of these variants; I equally like the `? :` syntax, and the more expressive `else`, but I dislike the comma-semicolon disambiguation, as I think it is very difficult to parse for authors, and an enforced semicolon in case of conditions is very easy to remember, as authors are used to writing the code this way (and an optional omitting of the `else:` is just a nice shortcut).

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


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

Received on Wednesday, 4 September 2024 00:20:15 UTC