refactor(ivy): enable sanitization support for the new styling algorithm (#30667)

This patch is one of the final patches to refactor the styling algorithm
to be more efficient, performant and less complex.

This patch enables sanitization support for map-based and prop-based
style bindings.

PR Close #30667

packages/compiler/src/render3/r3_identifiers.ts

@@ -80,6 +80,8 @@ export class Identifiers {
 
   static stylingApply: o.ExternalReference = {name: 'ɵɵstylingApply', moduleName: CORE};
 
+  static styleSanitizer: o.ExternalReference = {name: 'ɵɵstyleSanitizer', moduleName: CORE};
+
   static elementHostAttrs: o.ExternalReference = {name: 'ɵɵelementHostAttrs', moduleName: CORE};
 
   static containerCreate: o.ExternalReference = {name: 'ɵɵcontainer', moduleName: CORE};

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

@@ -89,6 +89,7 @@ export class StylingBuilder {
   /** an array of each [class.name] input */
   private _singleClassInputs: BoundStylingEntry[]|null = null;
   private _lastStylingInput: BoundStylingEntry|null = null;
+  private _firstStylingInput: BoundStylingEntry|null = null;
 
   // maps are used instead of hash maps because a Map will
   // retain the ordering of the keys
@@ -181,6 +182,7 @@ export class StylingBuilder {
       registerIntoMap(this._stylesIndex, property);
     }
     this._lastStylingInput = entry;
+    this._firstStylingInput = this._firstStylingInput || entry;
     this.hasBindings = true;
     return entry;
   }
@@ -200,6 +202,7 @@ export class StylingBuilder {
       registerIntoMap(this._classesIndex, property);
     }
     this._lastStylingInput = entry;
+    this._firstStylingInput = this._firstStylingInput || entry;
     this.hasBindings = true;
     return entry;
   }
@@ -453,6 +456,15 @@ export class StylingBuilder {
     };
   }
 
+  private _buildSanitizerFn() {
+    return {
+      sourceSpan: this._firstStylingInput ? this._firstStylingInput.sourceSpan : null,
+      reference: R3.styleSanitizer,
+      allocateBindingSlots: 0,
+      buildParams: () => [o.importExpr(R3.defaultStyleSanitizer)]
+    };
+  }
+
   /**
    * Constructs all instructions which contain the expressions that will be placed
    * into the update block of a template function or a directive hostBindings function.
@@ -460,6 +472,9 @@ export class StylingBuilder {
   buildUpdateLevelInstructions(valueConverter: ValueConverter) {
     const instructions: Instruction[] = [];
     if (this.hasBindings) {
+      if (compilerIsNewStylingInUse() && this._useDefaultSanitizer) {
+        instructions.push(this._buildSanitizerFn());
+      }
       const styleMapInstruction = this.buildStyleMapInstruction(valueConverter);
       if (styleMapInstruction) {
         instructions.push(styleMapInstruction);