ALIAS: legacy -webkit- aliases of supported properties resolve as in Chrome (44 aliases)

[thejackshelton]

ALIAS (coverage-rank lane 1, size S): legacy -webkit- alias properties now compile as their standard property, exactly as Chrome resolves them.

What changed

• Alias registry, per family (HOTSPOT-SPLIT shape): packages/dragon/src/css/aliases/{box,flex,logical}.ts each own their family's aliases. css/aliases.ts spreads them one line per family, sorted by id. The same shape as animation-kinds/<family>.ts. A later lane (radius, transform, user-select and so on) adds its own file and one line. Each alias file is typed against its family's longhands and shorthands, and aliases.ts throws at load if an alias is claimed twice, is itself a property, or names a non-Dragon property.

• Resolution at parse time: stylesheet.ts parseDeclaration and at-rules/keyframes.ts map the lower-cased name through resolveAlias before anything else. This is what Chrome does: CSSPropertyParser resolves the alias id, so the declaration is the standard declaration. The cascade (order, importance, specificity, logical-group competition), var() substitution, CSS-wide keywords and diagnostics are therefore the standard property's. One visible effect: a refusal message names the standard property (for example flex-basis: …), and its span still points at the authored alias declaration.

• Which aliases: 44 entries from Chrome 145 css_properties.json5 alias_for whose target is a Dragon longhand or shorthand that compiles on native:

  • box: -webkit-box-sizing.
  • flex: -webkit-align-content, -webkit-align-items, -webkit-align-self, -webkit-column-gap, -webkit-flex, -webkit-flex-basis, -webkit-flex-direction, -webkit-flex-flow, -webkit-flex-grow, -webkit-flex-shrink, -webkit-flex-wrap, -webkit-justify-content, -webkit-order.
  • logical: -webkit-margin-{start,end,before,after}, -webkit-padding-{start,end,before,after}, -webkit-border-{start,end,before,after} with their -color, -style and -width longhands, and -webkit-{min-,max-,}logical-{width,height}.

• Left out on purpose:

  • Aliases Chrome parses with UseAliasParsing (css_parsing_utils.cc), whose grammar differs from the standard property's: -webkit-transform (unitless perspective()), -webkit-perspective, -webkit-border-radius (the two-value form), -webkit-background-*, -webkit-mask-* and -webkit-appearance. Their properties are not supported on native anyway.
  • -webkit-transform-origin, -webkit-transition* and -webkit-animation*: their standard properties don't compile on native yet.
  • -webkit-writing-mode: in Chrome it is a surrogate_for, not an alias.
  • Legacy flexbox (display: -webkit-box, -webkit-box-*): that is a separate lane.

  All of these stay DRAGON_UNSUPPORTED_PROPERTY, pinned by test and by the reject fixture.

• docs/ports.json: aliases.ts cites css_parsing_utils.cc (UseAliasParsing), so it is added as a reference use on the existing entry. css_properties.json5 is data, so the ports scan doesn't track it.

Proof

• packages/dragon/test/aliases.test.ts:
  • Every alias parses to exactly the standard declaration: the same longhands, direction tags, pending var() parts and diagnostics. It is checked for typical, multi-token (first baseline, safe center, 2 0 10px), CSS-wide, var() and invalid values, case-insensitively and through escapes.
  • Keyframe blocks resolve aliases too.
  • In the cascade: an alias and its property in the same rule, in both orders, give "last wins" on web, iOS and Android. !important and specificity still decide first. A logical alias competes only with the physical longhand of the element's direction, in both directions. An alias of a shorthand is overridden by a later alias of one of its longhands. The losing declaration is reported at the alias source.
  • A guard checks that every alias appears in an alias fixture.
• registry-claims.test.ts: the alias families are sorted, one file each, and each is a property family. No alias is claimed twice or is a property, and each family file aliases only its own family's properties.
• New fixture group aliases:
  • alias-flex (ltr) covers all 14 non-logical aliases, alone and paired with their property in both orders, plus !important.
  • alias-logical (ltr and rtl) covers all 30 logical aliases, alone and paired with logical and physical properties in both orders.
  • reject-alias-legacy-parsing checks that -webkit-transform: perspective(100) stays refused.
• Profile rows: rows are keyed by longhand features, so an alias reuses its property's proven rows and adds none. Both fixtures compile with profiles enforced with no diagnostics (ios and web, every direction they run in). Run locally against live Chrome (runFixture, profiles enforce): alias-flex, alias-logical and alias-logical-rtl pass.
• Captures and vectors come from regen on CI (regen label). Device lanes run in the landing driver.

Coverage-rank (scripts/coverage-rank.ts from #146, run on this tree and on its base f50b6ad)

• As the script stands: native 37.4% -> 37.9%. Fully-native properties: 98 -> 103. ALIAS reach: 359 -> 6.
  • Most alias rows have no curated samples, so the script probes them with inherit (for example -webkit-box-sizing: inherit). The standard properties' rows don't prove inherit, so those probes still fail.
• With alias rows probed by their standard property's curated samples (a local patch to the script, not committed): native 37.4% -> 40.2%. Fully-native properties: 98 -> 122. ALIAS reach: 359 -> 6.
  • The 6 that remain is -webkit-writing-mode, a surrogate. Suggestion for the PM: point alias rows at their target's samples in coverage-rank-input.json.

Review round 1 (precomputed review of e277afc)

• Medium, fixed: transition-property and the transition shorthand now resolve alias names. longhandsNamed calls resolveAlias, as Chrome does (css_animations.cc CalculateTransitionUpdateForStandardProperty calls ResolveCSSPropertyID, line 2737 at the tag). transition: -webkit-logical-width 1s now lists width, with no "not a CSS property" warning. Test: anim-program.test.ts "a legacy alias in transition-property…". It fails without the fix, with DRAGON_ANIMATION_NO_EFFECT. will-change needs no change: no alias in this PR targets a will-change feature (transform, opacity). @keyframes was already covered.
• Low, fixed: diagnostics now name the alias as written.
  • Parse and keyframe messages end with "(-webkit-margin-before is an alias of margin-block-start)".
  • Profile refusals say "(set by -webkit-box-sizing: inherit)".
  • Unproven-context messages say "-webkit-flex sets flex-basis … instead of -webkit-flex".
  • var() substitution messages name the alias too.
  • Declaration.alias records the name. aliases.test.ts pins are updated to the new wording, and new tests cover the profile and unproven-context messages.
• Low, not done in this PR: registering css_properties.json5 in docs/ports.json. The registry and chrome-ports.test.ts accept only .cc/.cpp/.mm/.h upstreams and scan only for those citations. Widening the scan to .json5 also catches existing citations in keyframes.ts, chrome-deviations-dpr.ts, capture-interpolable.ts and font-face.ts. One of those files, css_value_keywords.json5, has no licence header, so the licence-phrase check can't apply to it. That is a ports-schema change, so it belongs in its own PR. Instead, aliases.ts now records the full path, tag, sha256 and line ranges.
• Low, already true: grid-gap, grid-row-gap and grid-column-gap were already accepted on master, as grid-family shorthands of gap, row-gap and column-gap. aliases.ts now says so.

Verification

• pnpm typecheck: pass.
• vitest run on 11 files, 131 tests: all pass. The files:
  • packages/dragon/test/aliases.test.ts
  • packages/dragon/test/registry-claims.test.ts
  • packages/dragon/test/logical.test.ts
  • packages/dragon/test/keyframes.test.ts
  • packages/parity/test/chrome-ports.test.ts
  • packages/dragon/test/seams.test.ts
  • packages/parity/test/registry-claims.test.ts
  • packages/parity/test/fixture-reader.test.ts
  • packages/dragon/test/platform-free.test.ts
  • packages/dragon/test/ua.test.ts
  • packages/dragon/test/diagnostics.test.ts
• Full pnpm test: not run locally (lane contract). The landing driver runs it.
• Reviewed diff: about 32 KB.

Outside the spec

• docs/ports.json: one reference line on the css_parsing_utils.cc entry.

🤖 Generated with Claude Code

[thejackshelton]

Landing stopped at step merge (pnpm land)

merge-train: merging alias onto d1bab8d657489d7c51b807c41fde9f8fc3bbd1ad failed; conflicts in packages/dragon/src/css/stylesheet.ts

Fix the cause, then hand #172 back to the landing queue with the new clean head.