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

romainmenke has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-variables-2] Custom shorthands with `@property` ==
Currently there is no way to reuse small groups of declarations (keys and values) in multiple styles without creating a style rule for them.

```css
.want-to-reuse {
 color: hotpink;
 padding: 15px;
 display: flex;
}
```

To apply this to multiple components you need to alter your markup.
Or you need to copy/paste the declarations to each style rule.

---------

Mixins are often used to work around this.

```scss
@mixin some-mixin {
 color: hotpink;
 padding: 15px;
 display: flex;
}

selector {
 @include some-mixin;
}
```

Custom properties also help to some extend because they allow values to be re-used.

```css
:root {
 --some-color: purple;
 --some-padding: 20px;
 --some-display: flex;
 
 --fancy-color: hotpink;
 --fancy-padding: 15px;
 --fancy-display: flex;
}
```

----------------

Can custom shorthands be defined through `@property`?

- `syntax` must match the declared constituent properties
- keywords like `initial` work exactly like they work for native shorthands

```css
@property --some-shorthand {
 syntax: "<color> <length> <ident>";
 constituent-properties: color padding display;
 values:
  default / purple 20px flex,
  fancy / hotpink 15px flex;
}

.foo {
 --some-shorthand: fancy;
}
```

Is equivalent to :

```css
.foo {
 color: hotpink;
 padding: 15px;
 display: flex;
}
```

Set values of constituent properties :

```css
.foo {
 --property-name: green 10px block;
}
```

This is somewhat related to https://github.com/w3c/csswg-drafts/issues/7273 as it allows similar patterns when styling elements.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7879 using your GitHub account


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

Received on Thursday, 13 October 2022 13:02:01 UTC