Feature request: Add CSS property priority/specificity tier data

[lifeiscontent]

Summary

It would be helpful to have data indicating the specificity "tier" or priority level of CSS properties, distinguishing between:

• Shorthands of shorthands (e.g., all, background)
• Shorthands of longhands (e.g., margin, padding, border-width)
• Longhand properties (e.g., margin-top, padding-left)

Use Case

CSS-in-JS libraries like StyleX use property priority tiers to determine the order in which CSS rules should be output. This ensures that more specific properties override less specific ones correctly.

For example, when both are specified:

margin: 10px;      /* shorthand - lower priority */
margin-top: 20px;  /* longhand - higher priority */

The longhand should "win" regardless of source order, which requires outputting them in the correct priority order.

Current State

There's no indication of whether a property is a shorthand, a shorthand-of-shorthands, or a longhand.

Proposed Enhancement

Add a propertyType or specificity field:

{
  "name": "margin",
  "propertyType": "shorthand",
  "shorthandFor": ["margin-top", "margin-right", "margin-bottom", "margin-left"],
  ...
}

{
  "name": "margin-top",
  "propertyType": "longhand",
  "shorthandOf": ["margin"],
  ...
}

{
  "name": "background",
  "propertyType": "shorthand-of-shorthands",
  "shorthandFor": ["background-color", "background-image", ...],
  ...
}

Or a simpler tier indicator:

{
  "name": "all",
  "priorityTier": 1,  // lowest priority - shorthands of shorthands
  ...
}
{
  "name": "margin",
  "priorityTier": 2,  // shorthands of longhands
  ...
}
{
  "name": "margin-top",
  "priorityTier": 3,  // longhands
  ...
}

This relates to the shorthand expansion request in #1766 but focuses on priority ordering rather than value expansion.