fix(ivy): ensure [style] and [class] bindings are placed in the same instruction (#26126)

PR Close #26126

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

@@ -539,4 +539,46 @@ describe('compiler compliance: styling', () => {
          expectEmit(result.source, template, 'Incorrect template');
        });
   });
+
+  describe('[style] mixed with [class]', () => {
+    it('should combine [style] and [class] bindings into a single instruction', () => {
+      const files = {
+        app: {
+          'spec.ts': `
+                import {Component, NgModule} from '@angular/core';
+
+                @Component({
+                  selector: 'my-component',
+                  template: \`<div [style]="myStyleExp" [class]="myClassExp"></div>\`
+                })
+                export class MyComponent {
+                  myStyleExp = [{color:'red'}, {color:'blue', duration:1000}]
+                  myClassExp = 'foo bar apple';
+                }
+
+                @NgModule({declarations: [MyComponent]})
+                export class MyModule {}
+            `
+        }
+      };
+
+      const template = `
+          template: function MyComponent_Template(rf, $ctx$) {
+            if (rf & 1) {
+              $r3$.ɵelementStart(0, "div");
+              $r3$.ɵelementStyling(null, null, $r3$.ɵdefaultStyleSanitizer);
+              $r3$.ɵelementEnd();
+            }
+            if (rf & 2) {
+              $r3$.ɵelementStylingMap(0, $ctx$.myClassExp, $ctx$.myStyleExp);
+              $r3$.ɵelementStylingApply(0);
+            }
+          }
+          `;
+
+      const result = compile(files, angularFiles);
+      expectEmit(result.source, template, 'Incorrect template');
+    });
+
+  });
 });

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

@@ -549,21 +549,22 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
 
       const stylingInput = mapBasedStyleInput || mapBasedClassInput;
       if (stylingInput) {
-        const params: o.Expression[] = [];
+        this.updateInstruction(stylingInput.sourceSpan, R3.elementStylingMap, () => {
-        let value: AST;
+          const params: o.Expression[] = [indexLiteral];
+
           if (mapBasedClassInput) {
-          value = mapBasedClassInput.value.visit(this._valueConverter);
+            const mapBasedClassValue = mapBasedClassInput.value.visit(this._valueConverter);
+            params.push(this.convertPropertyBinding(implicit, mapBasedClassValue, true));
           } else if (mapBasedStyleInput) {
             params.push(o.NULL_EXPR);
           }
 
           if (mapBasedStyleInput) {
-          value = mapBasedStyleInput.value.visit(this._valueConverter);
+            const mapBasedStyleValue = mapBasedStyleInput.value.visit(this._valueConverter);
+            params.push(this.convertPropertyBinding(implicit, mapBasedStyleValue, true));
           }
 
-        this.updateInstruction(stylingInput.sourceSpan, R3.elementStylingMap, () => {
+          return params;
-          params.push(this.convertPropertyBinding(implicit, value, true));
-          return [indexLiteral, ...params];
         });
       }