fix(ivy): ensure pipes indices are referenced in styling bindings (#26755)

PR Close #26755

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

@@ -660,5 +660,62 @@ describe('compiler compliance: styling', () => {
          const result = compile(files, angularFiles);
          expectEmit(result.source, template, 'Incorrect template');
        });
+
+    it('should properly offset multiple style pipe references for styling bindings', () => {
+      const files = {
+        app: {
+          'spec.ts': `
+                import {Component, NgModule} from '@angular/core';
+
+                @Component({
+                  selector: 'my-component',
+                  template: \`
+                    <div [class]="{}"
+                         [class.foo]="fooExp | pipe:2000"
+                         [style]="myStyleExp | pipe:1000"
+                         [style.bar]="barExp | pipe:3000"
+                         [style.baz]="bazExp | pipe:4000">
+                         {{ item }}</div>\`
+                })
+                export class MyComponent {
+                  myStyleExp = {};
+                  fooExp = 'foo';
+                  barExp = 'bar';
+                  bazExp = 'baz';
+                  items = [1,2,3];
+                }
+
+                @NgModule({declarations: [MyComponent]})
+                export class MyModule {}
+            `
+        }
+      };
+
+      const template = `
+          template: function MyComponent_Template(rf, $ctx$) {
+            if (rf & 1) {
+              $r3$.ɵelementStart(0, "div");
+              $r3$.ɵelementStyling($e0_styling$, $e1_styling$, $r3$.ɵdefaultStyleSanitizer);
+              $r3$.ɵpipe(1, "pipe");
+              $r3$.ɵpipe(2, "pipe");
+              $r3$.ɵpipe(3, "pipe");
+              $r3$.ɵpipe(4, "pipe");
+              $r3$.ɵtext(5);
+              $r3$.ɵelementEnd();
+            }
+            if (rf & 2) {
+              $r3$.ɵelementStylingMap(0, $e2_styling$, $r3$.ɵpipeBind2(1, 1, $ctx$.myStyleExp, 1000));
+              $r3$.ɵelementStyleProp(0, 0, $r3$.ɵpipeBind2(2, 4, $ctx$.barExp, 3000));
+              $r3$.ɵelementStyleProp(0, 1, $r3$.ɵpipeBind2(3, 7, $ctx$.bazExp, 4000));
+              $r3$.ɵelementClassProp(0, 0, $r3$.ɵpipeBind2(4, 10, $ctx$.fooExp, 2000));
+              $r3$.ɵelementStylingApply(0);
+              $r3$.ɵtextBinding(5, $r3$.ɵinterpolation1(" ", $ctx$.item, ""));
+            }
+          }
+          `;
+
+      const result = compile(files, angularFiles);
+      expectEmit(result.source, template, 'Incorrect template');
+    });
   });
 });

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

@@ -675,15 +675,18 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
           const key = input.name;
           const styleIndex: number = stylesIndexMap[key] !;
           const value = input.value.visit(this._valueConverter);
+          this.updateInstruction(input.sourceSpan, R3.elementStyleProp, () => {
             const params: o.Expression[] = [
-            indexLiteral, o.literal(styleIndex), this.convertPropertyBinding(implicit, value, true)
+              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);
+            return params;
+          });
         }
 
         lastInputCommand = styleInputs[styleInputs.length - 1];
@@ -701,10 +704,8 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
           const classIndex: number = classesIndexMap[key] !;
           const value = input.value.visit(this._valueConverter);
           this.updateInstruction(input.sourceSpan, R3.elementClassProp, () => {
-            return [
+            const valueLiteral = this.convertPropertyBinding(implicit, value, true);
-              indexLiteral, o.literal(classIndex),
+            return [indexLiteral, o.literal(classIndex), valueLiteral];
-              this.convertPropertyBinding(implicit, value, true), ...params
-            ];
           });
         }