refactor(core): replace stylePropInterpolateX with styleProp (angular#61639)

crisbeto · thePunderWoman · commit 2aaea80bfe68 · 2025-05-26T09:21:23.000Z
Replaces all of the `stylePropInterpolateX` instructions with the existing `styleProp` with an interpolated value. PR Close angular#61639
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_styling/chaining/break_different_instructions.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_styling/chaining/break_different_instructions.js
@@ -4,9 +4,7 @@ MyComponent.ɵcmp = /*@__PURE__*/ $r3$.ɵɵdefineComponent({
   template: function MyComponent_Template(rf, $ctx$) {
     // ...
     if (rf & 2) {
-      $r3$.ɵɵstylePropInterpolate1("color", "a", ctx.one, "b")("border", "a", ctx.one, "b");
-      $r3$.ɵɵstyleProp("transition", ctx.transition)("width", ctx.width);
-      $r3$.ɵɵstylePropInterpolate1("height", "a", ctx.one, "b")("top", "a", ctx.one, "b");
+      $r3$.ɵɵstyleProp("color", $r3$.ɵɵinterpolate1("a", ctx.one, "b"))("border", $r3$.ɵɵinterpolate1("a", ctx.one, "b"))("transition", ctx.transition)("width", ctx.width)("height", $r3$.ɵɵinterpolate1("a", ctx.one, "b"))("top", $r3$.ɵɵinterpolate1("a", ctx.one, "b"));
       $r3$.ɵɵclassProp("apple", ctx.yesToApple)("orange", ctx.yesToOrange);
     }
   },
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_styling/chaining/break_different_interpolation_instructions.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_styling/chaining/break_different_interpolation_instructions.js
@@ -4,10 +4,7 @@ MyComponent.ɵcmp = /*@__PURE__*/ $r3$.ɵɵdefineComponent({
   template: function MyComponent_Template(rf, $ctx$) {
     // ...
     if (rf & 2) {
-      $r3$.ɵɵstylePropInterpolate1("color", "a", ctx.one, "b")("border", "a", ctx.one, "b");
-      $r3$.ɵɵstylePropInterpolate2("transition", "a", ctx.one, "b", ctx.two, "c");
-      $r3$.ɵɵstylePropInterpolate3("width", "a", ctx.one, "b", ctx.two, "c", ctx.three, "d");
-      $r3$.ɵɵstylePropInterpolate1("height", "a", ctx.one, "b")("top", "a", ctx.one, "b");
+      $r3$.ɵɵstyleProp("color", $r3$.ɵɵinterpolate1("a", ctx.one, "b"))("border", $r3$.ɵɵinterpolate1("a", ctx.one, "b"))("transition", $r3$.ɵɵinterpolate2("a", ctx.one, "b", ctx.two, "c"))("width", $r3$.ɵɵinterpolate3("a", ctx.one, "b", ctx.two, "c", ctx.three, "d"))("height", $r3$.ɵɵinterpolate1("a", ctx.one, "b"))("top", $r3$.ɵɵinterpolate1("a", ctx.one, "b"));
     }
   },
   encapsulation: 2
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_styling/chaining/interpolations_different_arity.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_styling/chaining/interpolations_different_arity.js
@@ -4,9 +4,7 @@ MyComponent.ɵcmp = /*@__PURE__*/ $r3$.ɵɵdefineComponent({
   template: function MyComponent_Template(rf, $ctx$) {
     // ...
     if (rf & 2) {
-      $r3$.ɵɵstylePropInterpolate1("color", "a", ctx.one, "b")("border", "a", ctx.one, "b");
-      $r3$.ɵɵstylePropInterpolate2("transition", "a", ctx.one, "b", ctx.two, "c")("width", "a", ctx.one, "b", ctx.two, "c");
-      $r3$.ɵɵstylePropInterpolate3("height", "a", ctx.one, "b", ctx.two, "c", ctx.three, "d")("top", "a", ctx.one, "b", ctx.two, "c", ctx.three, "d");
+      $r3$.ɵɵstyleProp("color", $r3$.ɵɵinterpolate1("a", ctx.one, "b"))("border", $r3$.ɵɵinterpolate1("a", ctx.one, "b"))("transition", $r3$.ɵɵinterpolate2("a", ctx.one, "b", ctx.two, "c"))("width", $r3$.ɵɵinterpolate2("a", ctx.one, "b", ctx.two, "c"))("height", $r3$.ɵɵinterpolate3("a", ctx.one, "b", ctx.two, "c", ctx.three, "d"))("top", $r3$.ɵɵinterpolate3("a", ctx.one, "b", ctx.two, "c", ctx.three, "d"));
     }
   },
   encapsulation: 2
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_styling/chaining/interpolations_equal_arity.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_styling/chaining/interpolations_equal_arity.js
@@ -4,7 +4,7 @@ MyComponent.ɵcmp = /*@__PURE__*/ $r3$.ɵɵdefineComponent({
   template: function MyComponent_Template(rf, $ctx$) {
     // ...
     if (rf & 2) {
-      $r3$.ɵɵstylePropInterpolate1("color", "a", ctx.one, "b")("border", "a", ctx.one, "b")("transition", "a", ctx.one, "b");
+      $r3$.ɵɵstyleProp("color", $r3$.ɵɵinterpolate1("a", ctx.one, "b"))("border", $r3$.ɵɵinterpolate1("a", ctx.one, "b"))("transition", $r3$.ɵɵinterpolate1("a", ctx.one, "b"));
     }
   },
   encapsulation: 2
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_styling/interpolations/style_binding_important.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_styling/interpolations/style_binding_important.js
@@ -1,5 +1,5 @@
 // ...
 if (rf & 2) {
-  $r3$.ɵɵstylePropInterpolate2("width", "a", ctx.one, "b", ctx.two, "c");
+  $r3$.ɵɵstyleProp("width", $r3$.ɵɵinterpolate2("a", ctx.one, "b", ctx.two, "c"));
 }
 // ...
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_styling/interpolations/style_binding_sanitizer.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_styling/interpolations/style_binding_sanitizer.js
@@ -1,7 +1,5 @@
 // ...
 if (rf & 2) {
-  $r3$.ɵɵstylePropInterpolate1("background", "url(", ctx.myUrl1, ")");
-  $r3$.ɵɵstylePropInterpolate2("border-image", "url(", ctx.myUrl2, ") ", ctx.myRepeat, " auto");
-  $r3$.ɵɵstylePropInterpolate3("box-shadow", "", ctx.myBoxX, " ", ctx.myBoxY, " ", ctx.myBoxWidth, " black");
+  $r3$.ɵɵstyleProp("background", $r3$.ɵɵinterpolate1("url(", ctx.myUrl1, ")"))("border-image", $r3$.ɵɵinterpolate2("url(", ctx.myUrl2, ") ", ctx.myRepeat, " auto"))("box-shadow", $r3$.ɵɵinterpolate3("", ctx.myBoxX, " ", ctx.myBoxY, " ", ctx.myBoxWidth, " black"));
 }
 // ...
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_styling/interpolations/style_binding_suffixed.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_styling/interpolations/style_binding_suffixed.js
@@ -1,5 +1,5 @@
 // ...
 if (rf & 2) {
-  $r3$.ɵɵstylePropInterpolate2("width", "a", ctx.one, "b", ctx.two, "c", "px");
+  $r3$.ɵɵstyleProp("width", $r3$.ɵɵinterpolate2("a", ctx.one, "b", ctx.two, "c"), "px");
 }
 // ...
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_styling/interpolations/style_properties.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_styling/interpolations/style_properties.js
@@ -1,22 +1,22 @@
 // ...
   if (rf & 2) {
-    $r3$.ɵɵstylePropInterpolateV("color", ["a", ctx.one, "b", ctx.two, "c", ctx.three, "d", ctx.four, "e", ctx.five, "f", ctx.six, "g", ctx.seven, "h", ctx.eight, "i", ctx.nine, "j"]);
+    $r3$.ɵɵstyleProp("color", $r3$.ɵɵinterpolateV(["a", ctx.one, "b", ctx.two, "c", ctx.three, "d", ctx.four, "e", ctx.five, "f", ctx.six, "g", ctx.seven, "h", ctx.eight, "i", ctx.nine, "j"]));
     $r3$.ɵɵadvance();
-    $r3$.ɵɵstylePropInterpolate8("color", "a", ctx.one, "b", ctx.two, "c", ctx.three, "d", ctx.four, "e", ctx.five, "f", ctx.six, "g", ctx.seven, "h", ctx.eight, "i");
+    $r3$.ɵɵstyleProp("color", $r3$.ɵɵinterpolate8("a", ctx.one, "b", ctx.two, "c", ctx.three, "d", ctx.four, "e", ctx.five, "f", ctx.six, "g", ctx.seven, "h", ctx.eight, "i"));
     $r3$.ɵɵadvance();
-    $r3$.ɵɵstylePropInterpolate7("color", "a", ctx.one, "b", ctx.two, "c", ctx.three, "d", ctx.four, "e", ctx.five, "f", ctx.six, "g", ctx.seven, "h");
+    $r3$.ɵɵstyleProp("color", $r3$.ɵɵinterpolate7("a", ctx.one, "b", ctx.two, "c", ctx.three, "d", ctx.four, "e", ctx.five, "f", ctx.six, "g", ctx.seven, "h"));
     $r3$.ɵɵadvance();
-    $r3$.ɵɵstylePropInterpolate6("color", "a", ctx.one, "b", ctx.two, "c", ctx.three, "d", ctx.four, "e", ctx.five, "f", ctx.six, "g");
+    $r3$.ɵɵstyleProp("color", $r3$.ɵɵinterpolate6("a", ctx.one, "b", ctx.two, "c", ctx.three, "d", ctx.four, "e", ctx.five, "f", ctx.six, "g"));
     $r3$.ɵɵadvance();
-    $r3$.ɵɵstylePropInterpolate5("color", "a", ctx.one, "b", ctx.two, "c", ctx.three, "d", ctx.four, "e", ctx.five, "f");
+    $r3$.ɵɵstyleProp("color", $r3$.ɵɵinterpolate5("a", ctx.one, "b", ctx.two, "c", ctx.three, "d", ctx.four, "e", ctx.five, "f"));
     $r3$.ɵɵadvance();
-    $r3$.ɵɵstylePropInterpolate4("color", "a", ctx.one, "b", ctx.two, "c", ctx.three, "d", ctx.four, "e");
+    $r3$.ɵɵstyleProp("color", $r3$.ɵɵinterpolate4("a", ctx.one, "b", ctx.two, "c", ctx.three, "d", ctx.four, "e"));
     $r3$.ɵɵadvance();
-    $r3$.ɵɵstylePropInterpolate3("color", "a", ctx.one, "b", ctx.two, "c", ctx.three, "d");
+    $r3$.ɵɵstyleProp("color", $r3$.ɵɵinterpolate3("a", ctx.one, "b", ctx.two, "c", ctx.three, "d"));
     $r3$.ɵɵadvance();
-    $r3$.ɵɵstylePropInterpolate2("color", "a", ctx.one, "b", ctx.two, "c");
+    $r3$.ɵɵstyleProp("color", $r3$.ɵɵinterpolate2("a", ctx.one, "b", ctx.two, "c"));
     $r3$.ɵɵadvance();
-    $r3$.ɵɵstylePropInterpolate1("color", "a", ctx.one, "b");
+    $r3$.ɵɵstyleProp("color", $r3$.ɵɵinterpolate1("a", ctx.one, "b"));
     $r3$.ɵɵadvance();
     $r3$.ɵɵstyleProp("color", ctx.one);
 }
diff --git a/packages/compiler/src/render3/r3_identifiers.ts b/packages/compiler/src/render3/r3_identifiers.ts
@@ -139,43 +139,6 @@ export class Identifiers {
 
   static styleProp: o.ExternalReference = {name: 'ɵɵstyleProp', moduleName: CORE};
 
-  static stylePropInterpolate1: o.ExternalReference = {
-    name: 'ɵɵstylePropInterpolate1',
-    moduleName: CORE,
-  };
-  static stylePropInterpolate2: o.ExternalReference = {
-    name: 'ɵɵstylePropInterpolate2',
-    moduleName: CORE,
-  };
-  static stylePropInterpolate3: o.ExternalReference = {
-    name: 'ɵɵstylePropInterpolate3',
-    moduleName: CORE,
-  };
-  static stylePropInterpolate4: o.ExternalReference = {
-    name: 'ɵɵstylePropInterpolate4',
-    moduleName: CORE,
-  };
-  static stylePropInterpolate5: o.ExternalReference = {
-    name: 'ɵɵstylePropInterpolate5',
-    moduleName: CORE,
-  };
-  static stylePropInterpolate6: o.ExternalReference = {
-    name: 'ɵɵstylePropInterpolate6',
-    moduleName: CORE,
-  };
-  static stylePropInterpolate7: o.ExternalReference = {
-    name: 'ɵɵstylePropInterpolate7',
-    moduleName: CORE,
-  };
-  static stylePropInterpolate8: o.ExternalReference = {
-    name: 'ɵɵstylePropInterpolate8',
-    moduleName: CORE,
-  };
-  static stylePropInterpolateV: o.ExternalReference = {
-    name: 'ɵɵstylePropInterpolateV',
-    moduleName: CORE,
-  };
-
   static interpolate: o.ExternalReference = {
     name: 'ɵɵinterpolate',
     moduleName: CORE,
diff --git a/packages/compiler/src/template/pipeline/src/instruction.ts b/packages/compiler/src/template/pipeline/src/instruction.ts
@@ -565,11 +565,21 @@ export function twoWayProperty(
 
 export function attribute(
   name: string,
-  expression: o.Expression,
+  expression: o.Expression | ir.Interpolation,
   sanitizer: o.Expression | null,
   namespace: string | null,
+  sourceSpan: ParseSourceSpan,
 ): ir.UpdateOp {
-  const args = [o.literal(name), expression];
+  const args: o.Expression[] = [o.literal(name)];
+
+  if (expression instanceof ir.Interpolation) {
+    const interpolationArgs = collateInterpolationArgs(expression.strings, expression.expressions);
+    args.push(
+      callVariadicInstructionExpr(VALUE_INTERPOLATE_CONFIG, [], interpolationArgs, [], sourceSpan),
+    );
+  } else {
+    args.push(expression);
+  }
   if (sanitizer !== null || namespace !== null) {
     args.push(sanitizer ?? o.literal(null));
   }
@@ -581,11 +591,21 @@ export function attribute(
 
 export function styleProp(
   name: string,
-  expression: o.Expression,
+  expression: o.Expression | ir.Interpolation,
   unit: string | null,
   sourceSpan: ParseSourceSpan,
 ): ir.UpdateOp {
-  const args = [o.literal(name), expression];
+  const args: o.Expression[] = [o.literal(name)];
+
+  if (expression instanceof ir.Interpolation) {
+    const interpolationArgs = collateInterpolationArgs(expression.strings, expression.expressions);
+    args.push(
+      callVariadicInstructionExpr(VALUE_INTERPOLATE_CONFIG, [], interpolationArgs, [], sourceSpan),
+    );
+  } else {
+    args.push(expression);
+  }
+
   if (unit !== null) {
     args.push(o.literal(unit));
   }
@@ -669,48 +689,6 @@ export function propertyInterpolate(
   );
 }
 
-export function attributeInterpolate(
-  name: string,
-  strings: string[],
-  expressions: o.Expression[],
-  sanitizer: o.Expression | null,
-  namespace: string | null,
-  sourceSpan: ParseSourceSpan,
-): ir.UpdateOp {
-  const interpolationArgs = collateInterpolationArgs(strings, expressions);
-  const value = callVariadicInstructionExpr(
-    VALUE_INTERPOLATE_CONFIG,
-    [],
-    interpolationArgs,
-    [],
-    sourceSpan,
-  );
-  return attribute(name, value, sanitizer, namespace);
-}
-
-export function stylePropInterpolate(
-  name: string,
-  strings: string[],
-  expressions: o.Expression[],
-  unit: string | null,
-  sourceSpan: ParseSourceSpan,
-): ir.UpdateOp {
-  const interpolationArgs = collateInterpolationArgs(strings, expressions);
-
-  const extraArgs: o.Expression[] = [];
-  if (unit !== null) {
-    extraArgs.push(o.literal(unit));
-  }
-
-  return callVariadicInstruction(
-    STYLE_PROP_INTERPOLATE_CONFIG,
-    [o.literal(name)],
-    interpolationArgs,
-    extraArgs,
-    sourceSpan,
-  );
-}
-
 export function styleMapInterpolate(
   strings: string[],
   expressions: o.Expression[],
@@ -911,30 +889,6 @@ const VALUE_INTERPOLATE_CONFIG: VariadicInstructionConfig = {
   },
 };
 
-/**
- * `InterpolationConfig` for the `stylePropInterpolate` instruction.
- */
-const STYLE_PROP_INTERPOLATE_CONFIG: VariadicInstructionConfig = {
-  constant: [
-    Identifiers.styleProp,
-    Identifiers.stylePropInterpolate1,
-    Identifiers.stylePropInterpolate2,
-    Identifiers.stylePropInterpolate3,
-    Identifiers.stylePropInterpolate4,
-    Identifiers.stylePropInterpolate5,
-    Identifiers.stylePropInterpolate6,
-    Identifiers.stylePropInterpolate7,
-    Identifiers.stylePropInterpolate8,
-  ],
-  variable: Identifiers.stylePropInterpolateV,
-  mapping: (n) => {
-    if (n % 2 === 0) {
-      throw new Error(`Expected odd number of arguments`);
-    }
-    return (n - 1) / 2;
-  },
-};
-
 /**
  * `InterpolationConfig` for the `styleMapInterpolate` instruction.
  */
diff --git a/packages/compiler/src/template/pipeline/src/phases/chaining.ts b/packages/compiler/src/template/pipeline/src/phases/chaining.ts
@@ -26,15 +26,6 @@ const CHAIN_COMPATIBILITY = new Map<o.ExternalReference, o.ExternalReference>([
   [R3.listener, R3.listener],
   [R3.property, R3.property],
   [R3.styleProp, R3.styleProp],
-  [R3.stylePropInterpolate1, R3.stylePropInterpolate1],
-  [R3.stylePropInterpolate2, R3.stylePropInterpolate2],
-  [R3.stylePropInterpolate3, R3.stylePropInterpolate3],
-  [R3.stylePropInterpolate4, R3.stylePropInterpolate4],
-  [R3.stylePropInterpolate5, R3.stylePropInterpolate5],
-  [R3.stylePropInterpolate6, R3.stylePropInterpolate6],
-  [R3.stylePropInterpolate7, R3.stylePropInterpolate7],
-  [R3.stylePropInterpolate8, R3.stylePropInterpolate8],
-  [R3.stylePropInterpolateV, R3.stylePropInterpolateV],
   [R3.syntheticHostListener, R3.syntheticHostListener],
   [R3.syntheticHostProperty, R3.syntheticHostProperty],
   [R3.templateCreate, R3.templateCreate],
diff --git a/packages/compiler/src/template/pipeline/src/phases/collapse_singleton_interpolations.ts b/packages/compiler/src/template/pipeline/src/phases/collapse_singleton_interpolations.ts
@@ -10,8 +10,8 @@ import * as ir from '../../ir';
 import {CompilationJob} from '../compilation';
 
 /**
- * Attribute interpolations of the form `[attr.foo]="{{foo}}""` should be "collapsed" into a plain
- * attribute instruction, instead of an `attributeInterpolate` instruction.
+ * Attribute or style interpolations of the form `[attr.foo]="{{foo}}""` should be "collapsed"
+ * into a plain instruction, instead of an interpolated one.
  *
  * (We cannot do this for singleton property interpolations, because `propertyInterpolate`
  * stringifies its expression.)
@@ -22,12 +22,12 @@ import {CompilationJob} from '../compilation';
 export function collapseSingletonInterpolations(job: CompilationJob): void {
   for (const unit of job.units) {
     for (const op of unit.update) {
-      const eligibleOpKind = op.kind === ir.OpKind.Attribute;
+      const eligibleOpKind = op.kind === ir.OpKind.Attribute || op.kind === ir.OpKind.StyleProp;
       if (
         eligibleOpKind &&
         op.expression instanceof ir.Interpolation &&
         op.expression.strings.length === 2 &&
-        op.expression.strings.every((s: string) => s === '')
+        op.expression.strings.every((s) => s === '')
       ) {
         op.expression = op.expression.expressions[0];
       }
diff --git a/packages/compiler/src/template/pipeline/src/phases/reify.ts b/packages/compiler/src/template/pipeline/src/phases/reify.ts
@@ -509,20 +509,7 @@ function reifyUpdateOperations(_unit: CompilationUnit, ops: ir.OpList<ir.UpdateO
         );
         break;
       case ir.OpKind.StyleProp:
-        if (op.expression instanceof ir.Interpolation) {
-          ir.OpList.replace(
-            op,
-            ng.stylePropInterpolate(
-              op.name,
-              op.expression.strings,
-              op.expression.expressions,
-              op.unit,
-              op.sourceSpan,
-            ),
-          );
-        } else {
-          ir.OpList.replace(op, ng.styleProp(op.name, op.expression, op.unit, op.sourceSpan));
-        }
+        ir.OpList.replace(op, ng.styleProp(op.name, op.expression, op.unit, op.sourceSpan));
         break;
       case ir.OpKind.ClassProp:
         ir.OpList.replace(op, ng.classProp(op.name, op.expression, op.sourceSpan));
@@ -560,21 +547,10 @@ function reifyUpdateOperations(_unit: CompilationUnit, ops: ir.OpList<ir.UpdateO
         );
         break;
       case ir.OpKind.Attribute:
-        if (op.expression instanceof ir.Interpolation) {
-          ir.OpList.replace(
-            op,
-            ng.attributeInterpolate(
-              op.name,
-              op.expression.strings,
-              op.expression.expressions,
-              op.sanitizer,
-              op.namespace,
-              op.sourceSpan,
-            ),
-          );
-        } else {
-          ir.OpList.replace(op, ng.attribute(op.name, op.expression, op.sanitizer, op.namespace));
-        }
+        ir.OpList.replace(
+          op,
+          ng.attribute(op.name, op.expression, op.sanitizer, op.namespace, op.sourceSpan),
+        );
         break;
       case ir.OpKind.DomProperty:
         if (op.expression instanceof ir.Interpolation) {
diff --git a/packages/core/src/core_render3_private_export.ts b/packages/core/src/core_render3_private_export.ts
@@ -198,15 +198,6 @@ export {
   ɵɵstyleMapInterpolate8,
   ɵɵstyleMapInterpolateV,
   ɵɵstyleProp,
-  ɵɵstylePropInterpolate1,
-  ɵɵstylePropInterpolate2,
-  ɵɵstylePropInterpolate3,
-  ɵɵstylePropInterpolate4,
-  ɵɵstylePropInterpolate5,
-  ɵɵstylePropInterpolate6,
-  ɵɵstylePropInterpolate7,
-  ɵɵstylePropInterpolate8,
-  ɵɵstylePropInterpolateV,
   ɵɵsyntheticHostListener,
   ɵɵsyntheticHostProperty,
   ɵɵtemplate,
diff --git a/packages/core/src/render3/index.ts b/packages/core/src/render3/index.ts
@@ -128,15 +128,6 @@ export {
   ɵɵstyleMapInterpolate8,
   ɵɵstyleMapInterpolateV,
   ɵɵstyleProp,
-  ɵɵstylePropInterpolate1,
-  ɵɵstylePropInterpolate2,
-  ɵɵstylePropInterpolate3,
-  ɵɵstylePropInterpolate4,
-  ɵɵstylePropInterpolate5,
-  ɵɵstylePropInterpolate6,
-  ɵɵstylePropInterpolate7,
-  ɵɵstylePropInterpolate8,
-  ɵɵstylePropInterpolateV,
   ɵɵsyntheticHostListener,
   ɵɵsyntheticHostProperty,
   ɵɵtemplate,
diff --git a/packages/core/src/render3/instructions/all.ts b/packages/core/src/render3/instructions/all.ts
@@ -55,7 +55,6 @@ export * from './queries';
 export * from './queries_signals';
 export * from './storage';
 export * from './style_map_interpolation';
-export * from './style_prop_interpolation';
 export * from './styling';
 export * from './template';
 export * from './text';
diff --git a/packages/core/src/render3/instructions/style_prop_interpolation.ts b/packages/core/src/render3/instructions/style_prop_interpolation.ts
diff --git a/packages/core/src/render3/jit/environment.ts b/packages/core/src/render3/jit/environment.ts

Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,7 @@ MyComponent.ɵcmp = /@__PURE__/ $r3$.ɵɵdefineComponent({`
`4`	`4`	`template: function MyComponent_Template(rf, $ctx$) {`
`5`	`5`	`// ...`
`6`	`6`	`if (rf & 2) {`
`7`		`- $r3$.ɵɵstylePropInterpolate1("color", "a", ctx.one, "b")("border", "a", ctx.one, "b")("transition", "a", ctx.one, "b");`
	`7`	`+ $r3$.ɵɵstyleProp("color", $r3$.ɵɵinterpolate1("a", ctx.one, "b"))("border", $r3$.ɵɵinterpolate1("a", ctx.one, "b"))("transition", $r3$.ɵɵinterpolate1("a", ctx.one, "b"));`
`8`	`8`	`}`
`9`	`9`	`},`
`10`	`10`	`encapsulation: 2`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`// ...`
`2`	`2`	`if (rf & 2) {`
`3`		`- $r3$.ɵɵstylePropInterpolate2("width", "a", ctx.one, "b", ctx.two, "c");`
	`3`	`+ $r3$.ɵɵstyleProp("width", $r3$.ɵɵinterpolate2("a", ctx.one, "b", ctx.two, "c"));`
`4`	`4`	`}`
`5`	`5`	`// ...`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,5 @@`
`1`	`1`	`// ...`
`2`	`2`	`if (rf & 2) {`
`3`		`- $r3$.ɵɵstylePropInterpolate1("background", "url(", ctx.myUrl1, ")");`
`4`		`- $r3$.ɵɵstylePropInterpolate2("border-image", "url(", ctx.myUrl2, ") ", ctx.myRepeat, " auto");`
`5`		`- $r3$.ɵɵstylePropInterpolate3("box-shadow", "", ctx.myBoxX, " ", ctx.myBoxY, " ", ctx.myBoxWidth, " black");`
	`3`	`+ $r3$.ɵɵstyleProp("background", $r3$.ɵɵinterpolate1("url(", ctx.myUrl1, ")"))("border-image", $r3$.ɵɵinterpolate2("url(", ctx.myUrl2, ") ", ctx.myRepeat, " auto"))("box-shadow", $r3$.ɵɵinterpolate3("", ctx.myBoxX, " ", ctx.myBoxY, " ", ctx.myBoxWidth, " black"));`
`6`	`4`	`}`
`7`	`5`	`// ...`