Feature request: Add ordered shorthand expansion data to CSS properties

[lifeiscontent]

Summary

It would be very helpful if CSS shorthand properties included a shorthandFor (or similar) field that lists their constituent longhand properties in CSS specification order.

Current State

Currently, shorthand properties like margin have:

• syntax: <'margin-top'>{1,4} - shows the pattern but not the full ordered expansion
• logicalPropertyGroup: Groups related properties but in alphabetical order

For example, properties in the margin logicalPropertyGroup are listed alphabetically:

margin-block-end, margin-block-start, margin-bottom, margin-inline-end, 
margin-inline-start, margin-left, margin-right, margin-top

Proposed Enhancement

Add a shorthandFor array (or similar) that lists longhands in CSS specification order:

{
  "name": "margin",
  "syntax": "<'margin-top'>{1,4}",
  "shorthandFor": [
    "margin-top",
    "margin-right",
    "margin-bottom",
    "margin-left"
  ],
  ...
}

Other examples:

{
  "name": "border-radius",
  "shorthandFor": [
    "border-top-left-radius",
    "border-top-right-radius",
    "border-bottom-right-radius",
    "border-bottom-left-radius"
  ]
}

{
  "name": "gap",
  "shorthandFor": ["row-gap", "column-gap"]
}

{
  "name": "inset",
  "shorthandFor": ["top", "right", "bottom", "left"]
}

Use Case

CSS-in-JS libraries and CSS tooling often need to expand shorthand properties to their longhands. The expansion order matters because CSS shorthands like margin: 10px 20px 30px 40px map values positionally (top, right, bottom, left).

Currently, tools must hard-code this order since it's only defined in CSS spec prose, not in machine-readable data. Having this in webref would provide an authoritative, maintained source.

Affected Properties

Common shorthands that would benefit:

• margin, padding, inset, scroll-margin, scroll-padding
• border-width, border-style, border-color
• border-radius
• gap (row-gap, column-gap)
• overflow (overflow-x, overflow-y)
• flex, flex-flow
• grid, grid-template, grid-area, grid-row, grid-column
• animation, transition
• background, font, list-style, text-decoration, etc.

Thank you for considering this enhancement!