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

@LeaVerou I didn't fully grasp this example before.
Having the ability to encode transforms for the values passed to the shorthand seems really handy and powerful but I am unsure if it is needed.

```css
@mixin --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));   
  }
 }
}
```

I think you can achieve the same result with this :

```css
@property --some-shorthand-padding {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --some-shorthand-color {
  syntax: "<color>";
  inherits: false;
  initial-value: black;
}

@property --some-shorthand {
 syntax: "a"
  "b";
 constituent-properties: --some-shorthand-padding --some-shorthand-color;
 values: purple-version / 20px purple;
  yellow-version / 30px yellow;
}

/* internal "API" */
.some-element {
 padding: calc(10px + var(--some-shorthand-padding, 0);
 color: var(--some-shorthand-color, black);
 border: 1px solid var(--some-shorthand-color, transparent);
}

/* user writes */
.some-element {
 --some-shorthand: yellow-version;
}
```

```css
/* equivalent to */
.some-element {
 padding: calc(10px + var(--some-shorthand-padding, 0);
 color: var(--some-shorthand-color, black);
 border: 1px solid var(--some-shorthand-color, transparent);
}

/* user writes */
.some-element {
 --some-shorthand-padding: 30px;
 --some-shorthand-color: yellow;
}
```

I have no idea how handy this is in practice and I would need to cook up some more realistic examples to be able to judge this.

But I think it is really nice that creators of components can have complex internals and expose something as simple as : 

```css
.some-element {
 --some-shorthand: yellow-version;
}
```

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