[css-properties-values-api] Mass property registration

[LeaVerou]

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.

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 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:

@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 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.

@tabatkins said they think it is feasible.

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

@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.

[tabatkins]

The first one (multiple comma-separated names in the registration) we should definitely do, no question. Such an obvious improvement.

The second (wildcard registration) is something I support if it's feasible on implementations. No need to get fancy with the API, it'll just be a new name form; an <ident-token> followed by a "*" <delim-token>.

Your idea of combining them if multiple apply is interesting, but new to the API; currently each definition is independent, and will override each other if they collide names. I'd assumed we'd use longest-prefix-match semantics, so in your example --int-foo-1 would use the @property --int-foo-* block, but not the @property --int-* one.

[tabatkins]

Oh, but:

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.

It shouldn't be expanded into multiple rules. We can either make the .name property an array now, hoping the compat is fine, or keep it a string that might be comma-delimited.

[SebastianZ]

make the .name property an array now, hoping the compat is fine, or keep it a string that might be comma-delimited.

Then it should probably also be renamed to names to indicate that it can hold multiple property names, if there are no compat issues.

Sebastian

[bramus]

Got sent a similar request via Twitter: https://twitter.com/LukyVJ/status/1627624292484542467

With @property shipping in browsers other than Chrome soon, and more people using it, I predict more similar requests in the near future.