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/core/src/sanitization/sanitization.ts

@@ -13,7 +13,7 @@ import {renderStringify} from '../render3/util/misc_utils';
 import {BypassType, allowSanitizationBypass} from './bypass';
 import {_sanitizeHtml as _sanitizeHtml} from './html_sanitizer';
 import {Sanitizer, SecurityContext} from './security';
-import {StyleSanitizeFn, _sanitizeStyle as _sanitizeStyle} from './style_sanitizer';
+import {StyleSanitizeFn, StyleSanitizeMode, _sanitizeStyle as _sanitizeStyle} from './style_sanitizer';
 import {_sanitizeUrl as _sanitizeUrl} from './url_sanitizer';
 
 
@@ -183,15 +183,22 @@ export function ɵɵsanitizeUrlOrResourceUrl(unsafeUrl: any, tag: string, prop:
  *
  * @publicApi
  */
-export const ɵɵdefaultStyleSanitizer = (function(prop: string, value?: string): string | boolean {
-  if (value === undefined) {
-    return prop === 'background-image' || prop === 'background' || prop === 'border-image' ||
-        prop === 'filter' || prop === 'list-style' || prop === 'list-style-image' ||
-        prop === 'clip-path';
-  }
+export const ɵɵdefaultStyleSanitizer =
+    (function(prop: string, value: string|null, mode?: StyleSanitizeMode): string | boolean | null {
+      mode = mode || StyleSanitizeMode.ValidateAndSanitize;
+      let doSanitizeValue = true;
+      if (mode & StyleSanitizeMode.ValidateProperty) {
+        doSanitizeValue = prop === 'background-image' || prop === 'background' ||
+            prop === 'border-image' || prop === 'filter' || prop === 'list-style' ||
+            prop === 'list-style-image' || prop === 'clip-path';
+      }
 
-  return ɵɵsanitizeStyle(value);
-} as StyleSanitizeFn);
+      if (mode & StyleSanitizeMode.SanitizeOnly) {
+        return doSanitizeValue ? ɵɵsanitizeStyle(value) : value;
+      } else {
+        return doSanitizeValue;
+      }
+    } as StyleSanitizeFn);
 
 export function validateAgainstEventProperties(name: string) {
   if (name.toLowerCase().startsWith('on')) {

packages/core/src/sanitization/style_sanitizer.ts

@@ -103,6 +103,30 @@ export function _sanitizeStyle(value: string): string {
 }
 
 
+/**
+ * A series of flags to instruct a style sanitizer to either validate
+ * or sanitize a value.
+ *
+ * Because sanitization is dependent on the style property (i.e. style
+ * sanitization for `width` is much different than for `background-image`)
+ * the sanitization function (e.g. `StyleSanitizerFn`) needs to check a
+ * property value first before it actually sanitizes any values.
+ *
+ * This enum exist to allow a style sanitization function to either only
+ * do validation (check the property to see whether a value will be
+ * sanitized or not) or to sanitize the value (or both).
+ *
+ * @publicApi
+ */
+export const enum StyleSanitizeMode {
+  /** Just check to see if the property is required to be sanitized or not */
+  ValidateProperty = 0b01,
+  /** Skip checking the property; just sanitize the value */
+  SanitizeOnly = 0b10,
+  /** Check the property and (if true) then sanitize the value */
+  ValidateAndSanitize = 0b11,
+}
+
 /**
  * Used to intercept and sanitize style values before they are written to the renderer.
  *
@@ -111,9 +135,5 @@ export function _sanitizeStyle(value: string): string {
  * If a value is provided then the sanitized version of that will be returned.
  */
 export interface StyleSanitizeFn {
-  /** This mode is designed to instruct whether the property will be used for sanitization
-   * at a later point */
-  (prop: string): boolean;
-  /** This mode is designed to sanitize the provided value */
-  (prop: string, value: string): string;
+  (prop: string, value: string|null, mode?: StyleSanitizeMode): any;
 }