perf(core): set encapsulation to None for empty component styles (#57130)

P4 · AndrewKushnir · commit 97fb86d3310a · 2024-10-08T09:30:01.000-07:00
Make it so that encapsulation for empty styles, styles containing only whitespace and comments, etc. is handled the same way as with no styles at all. Components without styles already have view encapsulation set to `None` to avoid generating unnecessary attributes for style scoping, like `_ngcontent-ng-c1` (#27175) If the component has an empty external styles file instead, the compiler would generate a component definition without the `styles` field, but still using the default encapsulation. This can result in runtime overhead if the developer forgets to delete the empty styles file generated automatically for new components by Angular CLI. Closes #16602 PR Close #57130
diff --git a/packages/compiler/src/render3/view/compiler.ts b/packages/compiler/src/render3/view/compiler.ts
@@ -290,7 +290,6 @@ export function compileComponentFromMetadata(
   let hasStyles = !!meta.externalStyles?.length;
   // e.g. `styles: [str1, str2]`
   if (meta.styles && meta.styles.length) {
-    hasStyles = true;
     const styleValues =
       meta.encapsulation == core.ViewEncapsulation.Emulated
         ? compileStyles(meta.styles, CONTENT_ATTR, HOST_ATTR)
@@ -303,6 +302,7 @@ export function compileComponentFromMetadata(
     }, [] as o.Expression[]);
 
     if (styleNodes.length > 0) {
+      hasStyles = true;
       definitionMap.set('styles', o.literalArr(styleNodes));
     }
   }
diff --git a/packages/core/test/acceptance/bootstrap_spec.ts b/packages/core/test/acceptance/bootstrap_spec.ts
@@ -92,7 +92,8 @@ describe('bootstrap', () => {
     ) {
       @Component({
         selector: options.selector || 'my-app',
-        styles: [''],
+        // styles must be non-empty to trigger `ViewEncapsulation.Emulated`
+        styles: 'span {color:red}',
         template: '<span>a    b</span>',
         encapsulation: options.encapsulation,
         preserveWhitespaces: options.preserveWhitespaces,
diff --git a/packages/core/test/acceptance/component_spec.ts b/packages/core/test/acceptance/component_spec.ts
@@ -145,8 +145,8 @@ describe('component', () => {
     @Component({
       selector: 'encapsulated',
       encapsulation: ViewEncapsulation.Emulated,
-      // styles array must contain a value (even empty) to trigger `ViewEncapsulation.Emulated`
-      styles: [``],
+      // styles must be non-empty to trigger `ViewEncapsulation.Emulated`
+      styles: `:host {display: block}`,
       template: `foo<leaf></leaf>`,
     })
     class EncapsulatedComponent {}
@@ -182,9 +182,9 @@ describe('component', () => {
     });
 
     it('should encapsulate host and children with different attributes', () => {
-      // styles array must contain a value (even empty) to trigger `ViewEncapsulation.Emulated`
+      // styles must be non-empty to trigger `ViewEncapsulation.Emulated`
       TestBed.overrideComponent(LeafComponent, {
-        set: {encapsulation: ViewEncapsulation.Emulated, styles: [``]},
+        set: {encapsulation: ViewEncapsulation.Emulated, styles: [`span {color:red}`]},
       });
       const fixture = TestBed.createComponent(EncapsulatedComponent);
       fixture.detectChanges();
@@ -198,6 +198,28 @@ describe('component', () => {
         }=""><span ${match[1].replace('_nghost', '_ngcontent')}="">bar</span></leaf></div>`,
       );
     });
+
+    it('should be off for a component with no styles', () => {
+      TestBed.overrideComponent(EncapsulatedComponent, {
+        set: {styles: undefined},
+      });
+      const fixture = TestBed.createComponent(EncapsulatedComponent);
+      fixture.detectChanges();
+      const html = fixture.nativeElement.outerHTML;
+      expect(html).not.toContain('<encapsulated _nghost-');
+      expect(html).not.toContain('<leaf _ngcontent-');
+    });
+
+    it('should be off for a component with empty styles', () => {
+      TestBed.overrideComponent(EncapsulatedComponent, {
+        set: {styles: [`  `, '', '/*comment*/']},
+      });
+      const fixture = TestBed.createComponent(EncapsulatedComponent);
+      fixture.detectChanges();
+      const html = fixture.nativeElement.outerHTML;
+      expect(html).not.toContain('<encapsulated _nghost-');
+      expect(html).not.toContain('<leaf _ngcontent-');
+    });
   });
 
   describe('view destruction', () => {

Original file line number	Diff line number	Diff line change
`@@ -290,7 +290,6 @@ export function compileComponentFromMetadata(`
`290`	`290`	`let hasStyles = !!meta.externalStyles?.length;`
`291`	`291`	// e.g. `styles: [str1, str2]`
`292`	`292`	`if (meta.styles && meta.styles.length) {`
`293`		`- hasStyles = true;`
`294`	`293`	`const styleValues =`
`295`	`294`	`meta.encapsulation == core.ViewEncapsulation.Emulated`
`296`	`295`	`? compileStyles(meta.styles, CONTENT_ATTR, HOST_ATTR)`
`@@ -303,6 +302,7 @@ export function compileComponentFromMetadata(`
`303`	`302`	`}, [] as o.Expression[]);`
`304`	`303`
`305`	`304`	`if (styleNodes.length > 0) {`
	`305`	`+ hasStyles = true;`
`306`	`306`	`definitionMap.set('styles', o.literalArr(styleNodes));`
`307`	`307`	`}`
`308`	`308`	`}`