[css-cascade] skip individual shorthand values #733
Description
Shorthand properties continue to roll in, such as flex, grid-*, and soon possibly place-*. However, their convenience is limited by the annoying side effect of reseting all of the longhand properties they represent. This sometimes happens within a rule, but most often occurs between multiple rules.
.example {
flex-basis: fit-content;
flex: 2 2; /* ☠ RIP flex-basis ☠*/
margin-left: 50px;
margin: 10px 0 0; /* ☠ RIP margin-left ☠ */
}Therefore, for simple shorthands, I propose a skip token be created which allows authors to prevent the resetting of specific values within a shorthand declaration. I would propose the skip token be an asterisk (*) because it already symbolically represents a wildcard.
.example {
flex: 2 2 *; /* → flex-grow: 2; flex-shrink: 2; */
grid-area: * / * / * / auto; /* → grid-column-end: auto; */
margin: 10px * 0; /* → margin-top: 10px; margin-bottom: 0; */
}