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