From 5de7960f019701e4e26dc6a7809c244ef94b5e30 Mon Sep 17 00:00:00 2001
From: Andrew Kushnir <akushnir@google.com>
Date: Sat, 23 Nov 2019 15:36:00 -0800
Subject: [PATCH] fix(ivy): take styles extracted from template into account in
 JIT mode (#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 #34017
---
 .../compiler-cli/test/ngtsc/ngtsc_spec.ts     |  5 +++-
 packages/compiler/src/jit_compiler_facade.ts  |  2 +-
 packages/core/test/acceptance/styling_spec.ts | 27 +++++++++++++++++++
 3 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/packages/compiler-cli/test/ngtsc/ngtsc_spec.ts b/packages/compiler-cli/test/ngtsc/ngtsc_spec.ts
index d04e2a590c..824ab3d8df 100644
--- a/packages/compiler-cli/test/ngtsc/ngtsc_spec.ts
+++ b/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', () => {
diff --git a/packages/compiler/src/jit_compiler_facade.ts b/packages/compiler/src/jit_compiler_facade.ts
index 877501c14f..acd7502e9b 100644
--- a/packages/compiler/src/jit_compiler_facade.ts
+++ b/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,
diff --git a/packages/core/test/acceptance/styling_spec.ts b/packages/core/test/acceptance/styling_spec.ts
index 286e8fe726..c3e5874557 100644
--- a/packages/core/test/acceptance/styling_spec.ts
+++ b/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) {