refactor(ivy): make styling instructions use the new styling algorithm (#30742)

This commit is the final patch of the ivy styling algorithm refactor.
This patch swaps functionality from the old styling mechanism to the
new refactored code by changing the instruction code the compiler
generates and by pointing the runtime instruction code to the new
styling algorithm.

PR Close #30742

packages/core/src/render3/interfaces/container.ts

@@ -11,7 +11,6 @@ import {ViewRef} from '../../linker/view_ref';
 import {TNode} from './node';
 import {LQueries} from './query';
 import {RComment, RElement} from './renderer';
-import {StylingContext} from './styling';
 import {HOST, LView, NEXT, PARENT, QUERIES, T_HOST} from './view';
 
 
@@ -54,11 +53,8 @@ export interface LContainer extends Array<any> {
    *
    * The host could be an LView if this container is on a component node.
    * In that case, the component LView is its HOST.
-   *
-   * It could also be a styling context if this is a node with a style/class
-   * binding.
    */
-  readonly[HOST]: RElement|RComment|StylingContext|LView;
+  readonly[HOST]: RElement|RComment|LView;
 
   /**
    * This is a type field which allows us to differentiate `LContainer` from `StylingContext` in an

packages/core/src/render3/interfaces/node.ts

@@ -5,13 +5,15 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import {TStylingContext} from '../styling_next/interfaces';
+import {StylingMapArray, TStylingContext} from '../styling_next/interfaces';
+
 import {CssSelector} from './projection';
 import {RNode} from './renderer';
 import {StylingContext} from './styling';
 import {LView, TView} from './view';
 
 
+
 /**
  * TNodeType corresponds to the {@link TNode} `type` property.
  */
@@ -457,10 +459,46 @@ export interface TNode {
    * with functions each time the creation block is called.
    */
   onElementCreationFns: Function[]|null;
-  // TODO (matsko): rename this to `styles` once the old styling impl is gone
-  newStyles: TStylingContext|null;
-  // TODO (matsko): rename this to `classes` once the old styling impl is gone
-  newClasses: TStylingContext|null;
+
+  /**
+   * A collection of all style bindings and/or static style values for an element.
+   *
+   * This field will be populated if and when:
+   *
+   * - There are one or more initial styles on an element (e.g. `<div style="width:200px">`)
+   * - There are one or more style bindings on an element (e.g. `<div [style.width]="w">`)
+   *
+   * If and when there are only initial styles (no bindings) then an instance of `StylingMapArray`
+   * will be used here. Otherwise an instance of `TStylingContext` will be created when there
+   * are one or more style bindings on an element.
+   *
+   * During element creation this value is likely to be populated with an instance of
+   * `StylingMapArray` and only when the bindings are evaluated (which happens during
+   * update mode) then it will be converted to a `TStylingContext` if any style bindings
+   * are encountered. If and when this happens then the existing `StylingMapArray` value
+   * will be placed into the initial styling slot in the newly created `TStylingContext`.
+   */
+  styles: StylingMapArray|TStylingContext|null;
+
+  /**
+   * A collection of all class bindings and/or static class values for an element.
+   *
+   * This field will be populated if and when:
+   *
+   * - There are one or more initial classes on an element (e.g. `<div class="one two three">`)
+   * - There are one or more class bindings on an element (e.g. `<div [class.foo]="f">`)
+   *
+   * If and when there are only initial classes (no bindings) then an instance of `StylingMapArray`
+   * will be used here. Otherwise an instance of `TStylingContext` will be created when there
+   * are one or more class bindings on an element.
+   *
+   * During element creation this value is likely to be populated with an instance of
+   * `StylingMapArray` and only when the bindings are evaluated (which happens during
+   * update mode) then it will be converted to a `TStylingContext` if any class bindings
+   * are encountered. If and when this happens then the existing `StylingMapArray` value
+   * will be placed into the initial styling slot in the newly created `TStylingContext`.
+   */
+  classes: StylingMapArray|TStylingContext|null;
 }
 
 /** Static data for an element  */

packages/core/src/render3/interfaces/view.ts

@@ -20,7 +20,6 @@ import {TElementNode, TNode, TViewNode} from './node';
 import {PlayerHandler} from './player';
 import {LQueries} from './query';
 import {RElement, Renderer3, RendererFactory3} from './renderer';
-import {StylingContext} from './styling';
 
 
 
@@ -71,13 +70,9 @@ export interface OpaqueViewState {
 export interface LView extends Array<any> {
   /**
    * The host node for this LView instance, if this is a component view.
-   *
    * If this is an embedded view, HOST will be null.
-   *
-   * If the component uses host bindings for styling that the `RElement` will be wrapped with
-   * `StylingContext`.
    */
-  [HOST]: RElement|StylingContext|null;
+  [HOST]: RElement|null;
 
   /**
    * The static data for this view. We need a reference to this so we can easily walk up the