[css-houdini-drafts] [css-properties-values-api] Mass property registration (#1058)

LeaVerou has just created a new issue for https://github.com/w3c/css-houdini-drafts:

== [css-properties-values-api] Mass property registration ==
Twitter thread: https://twitter.com/James0x57/status/1467601715067342853

It's rather common to register a number of properties with the same descriptors. E.g. most `<integer>`, `<number>` or `<length>` properties are registered to have an initial value of `0` and most properties are registered to have `inherits: true`. So, the multiple `@property` rules can get quite repetitive. For a particularly egregious example of this, look [here](https://github.com/propjockey/css-conways-game-of-life/blob/main/game-of-life.css#L140).

This proposal is about two things:
## `@property` should be able to define multiple properties with the same descriptors by just comma-separating them.

This is such low hanging fruit, that the MDN and web.dev docs on `@property` [originally included it](https://github.com/mdn/content/issues/5830) even though it was never a thing on the CSS side! 

It should also be pretty easy to do, if it's just a parse time shortcut that is expanded into multiple rules for the CSSOM.

We could even define them to cascade, like so:

```css
@property --number, --scale {
 syntax: "<number>";
 initial-value: 0;
 inherits: true;
}

@property --scale {
 initial-value: 1;
}
```

`CSS.registerProperty()` does not need to change, since if you're in JS-land, you can just loop anyway.

## Authors should be able to register entire namespaces of properties by using a wildcard at the end.

Something like this would help condense the [4000 lines of property registrations here](https://github.com/propjockey/css-conways-game-of-life/blob/main/game-of-life.css#L140) to just one. Admittedly, this is not a realistic example of regular CSS, but I've definitely come across more real cases of duplication that could be eliminated this way.

Another use case is utility registered properties like `--int-*`, `--length-*` etc [see tweet by @propjockey](https://twitter.com/James0x57/status/1467646389148688384).

@tabatkins said [he thinks it is feasible](https://twitter.com/tabatkins/status/1467686598649073667).

These would also need to be combinable, to deal with potential conflicts:

```css
@property --int-* {
 syntax: "<number>";
 initial-value: 0;
 inherits: true;
}

@property --int-foo-* {
 initial-value: 1;
}

@property --int-foo-bar {
 initial-value: 2;
}
```

Since `<dashed-ident>` does not permit `*`, I suppose we'd need to define a new token, `<dashed-ident-group>` 
`CSS.registerProperty()` could just accept these tokens under `name`, to minimize API changes, or we could do something more fancy on the JS side.

CSSOM wise this cannot really be expanded at parse time, since the set is infinite. Perhaps there should be some read-only boolean for authors to check if this is a group without having to do `rule.name.endsWith("*")`, but that's a minor point. 

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


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

Received on Monday, 6 December 2021 10:56:19 UTC