Syntax request: 'Property lists'

[kellytk]

Selector lists (https://www.w3.org/TR/selectors-4/, 4.1) are helpful to avoid repetition of declarations applicable to multiple elements.

Similarly, property lists would be helpful to avoid repetition of values applicable to multiple properties in the same declaration block.

.old {
  padding-left: 1rem;
  padding-right: 1rem;
}

.new {
  padding-left, padding-right: 1rem;
}

[myakura]

.old {
  padding-left: 1rem;
  padding-right: 1rem;
}

for this particular case, you can use padding-inline: 1rem.

[Loirooriol]

Yeah, this seems mostly useful for related properties, and typically there will be a shorthand. If not, and you want to avoid repeating the value, you can consider variables:

.new {
  --padding: 1rem;
  padding-left: var(--padding);
  padding-right: var(--padding);
}

If later you want to change to 2rem, you only have to update one place.

[SebastianZ]

And you can use padding-block as replacement for padding-top and padding-bottom. There are also variants for margin-* and border-*.

Though note that those *-inline and *-block properties are logical properties. That means, to which physical properties (i.e. *-top, *-right, *-bottom and *-left) they actually map to depends on the reading direction specified by writing-mode, direction and text-orientation.

Sebastian

[romainmenke]

The original syntax matches an old PostCSS plugin : https://github.com/csstools/postcss-commas

It won't work anymore because it hasn't been maintained but if you already use PostCSS you could fork it and bring it back.

[DarkWiiPlayer]

I often find myself writing something along the lines of

something-flex {
   --padding: 1em;
   padding: var(--padding);
   gap: var(--padding);
}

so there's one example where there isn't a convenient but obscure short-hand that could be used.

It would be a lot easier to write this as

something-flex { padding, gap: 1em; }

or something similar to that.