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

I really like the idea of emulating mixins by being able to define custom shorthands. I also really like being able to define values for these shorthands that expand to completely separate values in the longhands, though maybe that can be left to conditionals?

However, defining the syntax of the shorthand like this could be problematic as it can create disambiguation issues that are not present in the individual shorthands. E.g. consider property `a` with a syntax `<length>{0,4}` and property `b` with a syntax `<length>{0,4}`. If we define:

```css
@property --some-shorthand {
 syntax: "<length>{0,4}" "<length>{0,4}";
 constituent-properties: a, b;
}
```

Then what is `--some-shorthand: 1px 2px 3px 4px` setting?

It is also quite a burden on authors to have to match CSS property syntax. What if they don't need the entire possible range of syntaxes? It is also an impossible feat: even if they matched it when they wrote the rule, what happens when the syntax changes? 

Additionally, most CSS properties have much more complex syntaxes that what can be defined with the `syntax` descriptor, and it's not ideal if this mechanism had to exclude them. Even after `syntax` evolves more, I doubt it will ever be able to cover the entire range of microsyntaxes we have in CSS, even our actual grammar syntax doesn't cover it and sometimes we have to use prose! 

I think instead we should have syntax that somehow destructures the shorthand value into *constituent custom properties* that we then feed into CSS properties (and maybe even rules!) in the definition, without the author having the burden of duplicating existing CSS property syntax. Something like (super handwavy sketch):

```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);

  &:hover { 
   color: lighter(var(--some-shorthand-color, black));   
  }
 }
}
```

-- 
GitHub Notification of comment by LeaVerou
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7879#issuecomment-1279368756 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 19:15:41 UTC