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

I have several doubts about this, shorthands are not as simple as they may seem at first glance.

From my experience of implementing properties, shorthands need 3 parts:
 1. The list of longhands
 2. The logic for expanding it into longhands
 3. The logic for serializing it from the longhands (and for computed values it may be different than for specified values!)

It's not clear to me that these are all covered in a non-ambiguous way.

Taking Lea's example:

```css
@shorthand --some-shorthand {
 /* Read <length> into --some-shorthand-padding 
    and <color> into --some-shorthand-color */
 syntax: padding "<length>", color "<color>";

 @expands-to {
  padding: calc(10px + var(--some-shorthand-padding, 0);
  color: var(--some-shorthand-color, black);
  border: 1px solid var(--some-shorthand-color, transparent);
 }
}
```

Does this define `--some-shorthand-padding` with `syntax: "<length>"` and `--some-shorthand-color` with `syntax: "<color>"`? Or would they need to be defined separately, defaulting to `syntax: "*"` if not?

If the shorthand defines the longhands, then what defines the `initial-value` and `inherit` descriptors of each longhand? If the shorthand doesn't define the longhands, their syntax may allow arbitrary values, making serialization more complex.

Also, I fail to see how the `@expands-to` is related to the shorthand. How is it different than this?

```css
@shorthand --some-shorthand {
 /* Read <length> into --some-shorthand-padding 
    and <color> into --some-shorthand-color */
 syntax: padding "<length>", color "<color>";
}
*, * :>> * {
 padding: calc(10px + var(--some-shorthand-padding, 0);
 color: var(--some-shorthand-color, black);
 border: 1px solid var(--some-shorthand-color, transparent);
}
```

> The only way to make it not ambiguous is by not allowing multipliers in the syntax definitions

And `|` is also problematic. And `?` would be problematic if `syntax` accepted it. Etc.


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


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

Received on Friday, 14 October 2022 21:37:00 UTC