fix(ivy): fix generated code for style bindings with units (#26397)

PR Close #26397

packages/compiler-cli/test/compliance/r3_view_compiler_styling_spec.ts

@@ -383,6 +383,47 @@ describe('compiler compliance: styling', () => {
          const result = compile(files, angularFiles);
          expectEmit(result.source, template, 'Incorrect template');
        });
+
+    it('should support [style.foo.suffix] style bindings with a suffix', () => {
+
+      const files = {
+        app: {
+          'spec.ts': `
+             import {Component, NgModule} from '@angular/core';
+
+             @Component({
+               selector: 'my-component',
+               template: \`<div [style.font-size.px]="12">\`
+             })
+             export class MyComponent {
+             }
+
+             @NgModule({declarations: [MyComponent]})
+             export class MyModule {}
+         `
+        }
+      };
+
+      const template = `
+          const $e0_styles$= ["font-size"];
+          …
+          template:  function MyComponent_Template(rf, ctx) {
+            if (rf & 1) {
+              $r3$.ɵelementStart(0, "div");
+              $r3$.ɵelementStyling(null, _c0);
+              $r3$.ɵelementEnd();
+            }
+            if (rf & 2) {
+              $r3$.ɵelementStyleProp(0, 0, 12, "px");
+              $r3$.ɵelementStylingApply(0);
+            }
+          }
+     `;
+
+      const result = compile(files, angularFiles);
+      expectEmit(result.source, template, 'Incorrect template');
+
+    });
   });
 
   describe('[class]', () => {

packages/compiler/src/render3/view/template.ts

@@ -613,19 +613,18 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
         let i = mapBasedStyleInput ? 1 : 0;
         for (i; i < styleInputs.length; i++) {
           const input = styleInputs[i];
-          const params: any[] = [];
-          const sanitizationRef = resolveSanitizationFn(input, input.securityContext);
-          if (sanitizationRef) params.push(sanitizationRef);
-
           const key = input.name;
           const styleIndex: number = stylesIndexMap[key] !;
           const value = input.value.visit(this._valueConverter);
-          this.updateInstruction(input.sourceSpan, R3.elementStyleProp, () => {
-            return [
-              indexLiteral, o.literal(styleIndex),
-              this.convertPropertyBinding(implicit, value, true), ...params
+          const params: o.Expression[] = [
+            indexLiteral, o.literal(styleIndex), this.convertPropertyBinding(implicit, value, true)
           ];
-          });
+
+          if (input.unit != null) {
+            params.push(o.literal(input.unit));
+          }
+
+          this.updateInstruction(input.sourceSpan, R3.elementStyleProp, params);
         }
 
         lastInputCommand = styleInputs[styleInputs.length - 1];

packages/core/src/render3/instructions.ts

@@ -1687,8 +1687,6 @@ export function elementStylingApply<T>(index: number): void {
  *        specifically for element styling--the index must be the next index after the element
  *        index.)
  * @param styleIndex Index of the style property on this element. (Monotonically increasing.)
- * @param styleName Name of property. Because it is going to DOM this is not subject to
- *        renaming as part of minification.
  * @param value New value to write (null to remove).
  * @param suffix Optional suffix. Used with scalar values to add unit such as `px`.
  *        Note that when a suffix is provided then the underlying sanitizer will