diff --git a/packages/compiler-cli/test/compliance/r3_view_compiler_styling_spec.ts b/packages/compiler-cli/test/compliance/r3_view_compiler_styling_spec.ts
index 48e64988c6..a66a90230e 100644
--- a/packages/compiler-cli/test/compliance/r3_view_compiler_styling_spec.ts
+++ b/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');
+    });
+
+  });
 });
diff --git a/packages/compiler/src/render3/view/template.ts b/packages/compiler/src/render3/view/template.ts
index 999b7fee7f..68a4445f28 100644
--- a/packages/compiler/src/render3/view/template.ts
+++ b/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[] = [];
-        let value: AST;
-        if (mapBasedClassInput) {
-          value = mapBasedClassInput.value.visit(this._valueConverter);
-        } else if (mapBasedStyleInput) {
-          params.push(o.NULL_EXPR);
-        }
-
-        if (mapBasedStyleInput) {
-          value = mapBasedStyleInput.value.visit(this._valueConverter);
-        }
-
         this.updateInstruction(stylingInput.sourceSpan, R3.elementStylingMap, () => {
-          params.push(this.convertPropertyBinding(implicit, value, true));
-          return [indexLiteral, ...params];
+          const params: o.Expression[] = [indexLiteral];
+
+          if (mapBasedClassInput) {
+            const mapBasedClassValue = mapBasedClassInput.value.visit(this._valueConverter);
+            params.push(this.convertPropertyBinding(implicit, mapBasedClassValue, true));
+          } else if (mapBasedStyleInput) {
+            params.push(o.NULL_EXPR);
+          }
+
+          if (mapBasedStyleInput) {
+            const mapBasedStyleValue = mapBasedStyleInput.value.visit(this._valueConverter);
+            params.push(this.convertPropertyBinding(implicit, mapBasedStyleValue, true));
+          }
+
+          return params;
         });
       }