fix(ivy): merge static style rendering across elements, directives and components (#27661)

PR Close #27661

packages/compiler/src/core.ts

@@ -379,13 +379,9 @@ export const enum RenderFlags {
   Update = 0b10
 }
 
-export const enum InitialStylingFlags {
-  VALUES_MODE = 0b1,
-}
-
 // Pasted from render3/interfaces/node.ts
 /**
- * A set of marker values to be used in the attributes arrays. Those markers indicate that some
+ * A set of marker values to be used in the attributes arrays. These markers indicate that some
  * items are not regular attributes and the processing should be adapted accordingly.
  */
 export const enum AttributeMarker {
@@ -396,11 +392,48 @@ export const enum AttributeMarker {
    */
   NamespaceURI = 0,
 
+  /**
+   * Signals class declaration.
+   *
+   * Each value following `Classes` designates a class name to include on the element.
+   * ## Example:
+   *
+   * Given:
+   * ```
+   * <div class="foo bar baz">...<d/vi>
+   * ```
+   *
+   * the generated code is:
+   * ```
+   * var _c1 = [AttributeMarker.Classes, 'foo', 'bar', 'baz'];
+   * ```
+   */
+  Classes = 1,
+
+  /**
+   * Signals style declaration.
+   *
+   * Each pair of values following `Styles` designates a style name and value to include on the
+   * element.
+   * ## Example:
+   *
+   * Given:
+   * ```
+   * <div style="width:100px; height:200px; color:red">...</div>
+   * ```
+   *
+   * the generated code is:
+   * ```
+   * var _c1 = [AttributeMarker.Styles, 'width', '100px', 'height'. '200px', 'color', 'red'];
+   * ```
+   */
+  Styles = 2,
+
   /**
    * This marker indicates that the following attribute names were extracted from bindings (ex.:
    * [foo]="exp") and / or event handlers (ex. (bar)="doSth()").
    * Taking the above bindings and outputs as an example an attributes array could look as follows:
    * ['class', 'fade in', AttributeMarker.SelectOnly, 'foo', 'bar']
    */
-  SelectOnly = 1
-}
+  SelectOnly = 3,
+}