fix(ivy): take styles extracted from template into account in JIT mode (

angular#34017)

Prior to this commit, all styles extracted from Component's template (defined using <style> tags) were ignored by JIT compiler, so only `styles` array values defined in @component decorator were used. This change updates JIT compiler to take styles extracted from the template into account. It also ensures correct order where `styles` array values are applied first and template styles are applied second.

PR Close angular#34017

packages/compiler-cli/test/ngtsc/ngtsc_spec.ts

@@ -5155,13 +5155,16 @@ export const Foo = Foo__PRE_R3__;
         @Component({
           selector: 'test',
           template: '<style>h1 {font-size: larger}</style>',
+          styles: ['h2 {width: 10px}']
         })
         export class TestCmp {}
       `);
 
         env.driveMain();
         const jsContents = env.getContents('test.js');
-        expect(jsContents).toContain('styles: ["h1[_ngcontent-%COMP%] {font-size: larger}"]');
+        expect(jsContents)
+            .toContain(
+                'styles: ["h2[_ngcontent-%COMP%] {width: 10px}", "h1[_ngcontent-%COMP%] {font-size: larger}"]');
       });
 
       it('should process inline <link> tags', () => {

packages/compiler/src/jit_compiler_facade.ts

@@ -142,7 +142,7 @@ export class CompilerFacadeImpl implements CompilerFacade {
       selector: facade.selector || this.elementSchemaRegistry.getDefaultComponentElementName(),
       template,
       wrapDirectivesAndPipesInClosure: false,
-      styles: facade.styles || [],
+      styles: [...facade.styles, ...template.styles],
       encapsulation: facade.encapsulation as any,
       interpolation: interpolationConfig,
       changeDetection: facade.changeDetection,

packages/core/test/acceptance/styling_spec.ts

@@ -2410,6 +2410,33 @@ describe('styling', () => {
           .toEqual('url("https://i.imgur.com/4AiXzf8.jpg")');
     });
   });
+
+  isBrowser && it('should process <style> tag contents extracted from template', () => {
+    @Component({
+      template: `
+        <style>
+          div { width: 10px; }
+        </style>
+        <div></div>
+      `,
+      styles: [
+        'div { width: 100px; }',
+      ]
+    })
+    class MyComp {
+    }
+
+    TestBed.configureTestingModule({
+      declarations: [MyComp],
+    });
+
+    const fixture = TestBed.createComponent(MyComp);
+    fixture.detectChanges();
+
+    // `styles` array values are applied first, styles from <style> tags second.
+    const div = fixture.nativeElement.querySelector('div');
+    expect(getComputedStyle(div).width).toBe('10px');
+  });
 });
 
 function assertStyleCounters(countForSet: number, countForRemove: number) {