Re: [csswg-drafts] [css-variables-2] Custom shorthands with `@property` (#7879)

> The logic for expanding it into longhands

The core of this proposal is a simple system of "slots".

- 3 properties (3 times `"anything"`)
- 2nd property takes 3 values

```
syntax: "<color>"
 "<text-decoration-line> <text-decoration-style> <text-decoration-color>"
 "<ident>";
```

Equivalent to :

```
syntax: "a"
 "b b b"
 "c";
```

If this system is in any way ambiguous it can not be implemented.
So it is correct that `|`, `?`, `*` are also problematic.

`|` would be ok with more rules.

- yes : `<color> | [ red | blue ]`
- no : `<color> | [ red | [ blue 2px ] ]`

Avoiding the syntax definitions entirely and using `"a" "b b b" "c"` literally might be better? Authors already know this format from grid.

This does not actually remove any type information because the properties and order are known.

```css
@property --some-shorthand {
 syntax: "a"
  "b b b"
  "c";
 constituent-properties: color text-decoration display;
 values: ...;
}
```

- `a` : `<'color'>`
- `b` 1 : `<'text-decoration-line'> | <'text-decoration-style'> | <'text-decoration-color'>`
- `b` 2 : `<'text-decoration-line'> | <'text-decoration-style'> | <'text-decoration-color'>`
- `b` 3 : `<'text-decoration-line'> | <'text-decoration-style'> | <'text-decoration-color'>`
- `c` : `<'display'>`

Users can not deviate from the template defined with `syntax` but the result is unambiguous and enables the core feature.

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


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

Received on Saturday, 15 October 2022 07:52:02 UTC