Feat: Add Numeric CSS Property Requires Unit Diagnostic

Overview

This PR introduces a new extended template diagnostic to Angular's compiler: NumericCssPropertyRequiresUnit. It warns developers when a numeric value is bound to a CSS property that requires a unit (e.g., [style.width]="500"), which would have no effect in the browser. The diagnostic suggests using a unit suffix (e.g., [style.width.px]="500" or [style.width]="'500px'").

Motivation

Binding numeric values to CSS properties without units is a common source of confusion and bugs. Browsers ignore such values, leading to unexpected UI behavior. This diagnostic helps developers catch these mistakes early and provides actionable suggestions.

Example

<!-- Triggers warning -->
<div [style.width]="500"></div>

<!-- Correct usage -->
<div [style.width.px]="500"></div>
<div [style.width]="'500px'"></div>

Diagnostic Message

Binding a number to the CSS property 'width' will have no effect. CSS requires units for length values. E.g Use '[style.width.px]="500"' or '[style.width]="'500px'"' instead.

Impact

• Developer Experience: Improves DX by catching subtle template bugs.
• Backward Compatibility: No breaking changes. Only adds a warning for incorrect usage.
• Extensibility: Easily extendable to more CSS properties if needed.

[Related Issue]
#61381