From 01917733a10190631c38e8c4747d523639c9bee8 Mon Sep 17 00:00:00 2001 From: Olivier Combe Date: Mon, 19 Nov 2018 18:48:14 +0100 Subject: [PATCH] fix(ivy): set encapsulation to `None` when there is no style (#27175) PR Close #27175 --- .../compliance/r3_compiler_compliance_spec.ts | 66 ++++++++++++------- .../r3_view_compiler_binding_spec.ts | 3 +- .../r3_view_compiler_directives_spec.ts | 20 ++++-- .../r3_view_compiler_listener_spec.ts | 3 +- .../r3_view_compiler_styling_spec.ts | 17 +++-- .../compiler/src/render3/view/compiler.ts | 9 ++- 6 files changed, 81 insertions(+), 37 deletions(-) diff --git a/packages/compiler-cli/test/compliance/r3_compiler_compliance_spec.ts b/packages/compiler-cli/test/compliance/r3_compiler_compliance_spec.ts index 9c0df84d5c..7c5137f91c 100644 --- a/packages/compiler-cli/test/compliance/r3_compiler_compliance_spec.ts +++ b/packages/compiler-cli/test/compliance/r3_compiler_compliance_spec.ts @@ -427,7 +427,8 @@ describe('compiler compliance', () => { $r3$.ɵelementClassProp(0, 0, ctx.error); $r3$.ɵelementStylingApply(0); } - } + }, + encapsulation: 2 }); `; @@ -474,7 +475,8 @@ describe('compiler compliance', () => { if (rf & 1) { $r3$.ɵtext(0, "child-view"); } - } + }, + encapsulation: 2 });`; // SomeDirective definition should be: @@ -502,7 +504,8 @@ describe('compiler compliance', () => { $r3$.ɵtext(1, "!"); } }, - directives: [ChildComponent, SomeDirective] + directives: [ChildComponent, SomeDirective], + encapsulation: 2 }); `; @@ -591,7 +594,8 @@ describe('compiler compliance', () => { }, consts: 0, vars: 0, - template: function MyComponent_Template(rf, ctx) {} + template: function MyComponent_Template(rf, ctx) {}, + encapsulation: 2 });`; const result = compile(files, angularFiles); @@ -660,7 +664,8 @@ describe('compiler compliance', () => { $r3$.ɵelementEnd(); } }, - directives:[IfDirective] + directives:[IfDirective], + encapsulation: 2 });`; const result = compile(files, angularFiles); @@ -723,7 +728,8 @@ describe('compiler compliance', () => { $r3$.ɵelementProperty(0, "names", $r3$.ɵbind($r3$.ɵpureFunction1(1, $e0_ff$, ctx.customName))); } }, - directives: [MyComp] + directives: [MyComp], + encapsulation: 2 }); `; @@ -806,7 +812,8 @@ describe('compiler compliance', () => { $r3$.ɵbind($r3$.ɵpureFunctionV(1, $e0_ff$, [ctx.n0, ctx.n1, ctx.n2, ctx.n3, ctx.n4, ctx.n5, ctx.n6, ctx.n7, ctx.n8]))); } }, - directives: [MyComp] + directives: [MyComp], + encapsulation: 2 }); `; @@ -867,7 +874,8 @@ describe('compiler compliance', () => { $r3$.ɵelementProperty(0, "config", $r3$.ɵbind($r3$.ɵpureFunction1(1, $e0_ff$, ctx.name))); } }, - directives: [ObjectComp] + directives: [ObjectComp], + encapsulation: 2 }); `; @@ -936,7 +944,8 @@ describe('compiler compliance', () => { $r3$.ɵbind($r3$.ɵpureFunction2(5, $e0_ff_2$, ctx.name, $r3$.ɵpureFunction1(3, $e0_ff_1$, $r3$.ɵpureFunction1(1, $e0_ff$, ctx.duration))))); } }, - directives: [NestedComp] + directives: [NestedComp], + encapsulation: 2 }); `; @@ -991,7 +1000,8 @@ describe('compiler compliance', () => { $r3$.ɵprojection(1); $r3$.ɵelementEnd(); } - } + }, + encapsulation: 2 });`; const ComplexComponentDefinition = ` @@ -1016,7 +1026,8 @@ describe('compiler compliance', () => { $r3$.ɵprojection(3, 2); $r3$.ɵelementEnd(); } - } + }, + encapsulation: 2 }); `; @@ -1088,7 +1099,8 @@ describe('compiler compliance', () => { $r3$.ɵelement(1, "div", $e0_attrs$); } }, - directives: function () { return [SomeDirective]; } + directives: function () { return [SomeDirective]; }, + encapsulation: 2 });`; const result = compile(files, angularFiles); @@ -1267,7 +1279,8 @@ describe('compiler compliance', () => { $r3$.ɵprojection(1); $r3$.ɵelementEnd(); } - } + }, + encapsulation: 2 });`; const result = compile(files, angularFiles); @@ -1468,7 +1481,8 @@ describe('compiler compliance', () => { $r3$.ɵtextBinding(4, $r3$.ɵinterpolation1("", $r3$.ɵpipeBindV(5, 8, $r3$.ɵpureFunction1(15, $c0$, ctx.name)), "")); } }, - pipes: [MyPurePipe, MyPipe] + pipes: [MyPurePipe, MyPipe], + encapsulation: 2 });`; const result = compile(files, angularFiles); @@ -1536,7 +1550,8 @@ describe('compiler compliance', () => { )); } }, - pipes: [MyPipe] + pipes: [MyPipe], + encapsulation: 2 });`; const result = compile(files, angularFiles); @@ -1579,7 +1594,8 @@ describe('compiler compliance', () => { const $user$ = $r3$.ɵreference(1); $r3$.ɵtextBinding(2, $r3$.ɵinterpolation1("Hello ", $user$.value, "!")); } - } + }, + encapsulation: 2 }); `; @@ -1675,7 +1691,8 @@ describe('compiler compliance', () => { $r3$.ɵtextBinding(2, $r3$.ɵinterpolation1(" ", $foo$, " ")); } }, - directives:[IfDirective] + directives:[IfDirective], + encapsulation: 2 });`; const result = compile(files, angularFiles); @@ -1809,7 +1826,8 @@ describe('compiler compliance', () => { features: [$r3$.ɵNgOnChangesFeature], consts: 0, vars: 0, - template: function LifecycleComp_Template(rf, ctx) {} + template: function LifecycleComp_Template(rf, ctx) {}, + encapsulation: 2 });`; const SimpleLayoutDefinition = ` @@ -1829,7 +1847,8 @@ describe('compiler compliance', () => { $r3$.ɵelementProperty(1, "name", $r3$.ɵbind(ctx.name2)); } }, - directives: [LifecycleComp] + directives: [LifecycleComp], + encapsulation: 2 });`; const result = compile(files, angularFiles); @@ -1957,7 +1976,8 @@ describe('compiler compliance', () => { } if (rf & 2) { $r3$.ɵelementProperty(1,"forOf",$r3$.ɵbind(ctx.items)); } }, - directives: function() { return [ForOfDirective]; } + directives: function() { return [ForOfDirective]; }, + encapsulation: 2 }); `; @@ -2036,7 +2056,8 @@ describe('compiler compliance', () => { $r3$.ɵelementProperty(1, "forOf", $r3$.ɵbind(ctx.items)); } }, - directives: function() { return [ForOfDirective]; } + directives: function() { return [ForOfDirective]; }, + encapsulation: 2 }); `; @@ -2135,7 +2156,8 @@ describe('compiler compliance', () => { $r3$.ɵelementProperty(1, "forOf", $r3$.ɵbind(ctx.items)); } }, - directives: function () { return [ForOfDirective]; } + directives: function () { return [ForOfDirective]; }, + encapsulation: 2 });`; const result = compile(files, angularFiles); diff --git a/packages/compiler-cli/test/compliance/r3_view_compiler_binding_spec.ts b/packages/compiler-cli/test/compliance/r3_view_compiler_binding_spec.ts index cc75f4127b..b658871864 100644 --- a/packages/compiler-cli/test/compliance/r3_view_compiler_binding_spec.ts +++ b/packages/compiler-cli/test/compliance/r3_view_compiler_binding_spec.ts @@ -194,7 +194,8 @@ describe('compiler compliance: bindings', () => { hostVars: 3, consts: 0, vars: 0, - template: function HostBindingComp_Template(rf, ctx) {} + template: function HostBindingComp_Template(rf, ctx) {}, + encapsulation: 2 }); `; diff --git a/packages/compiler-cli/test/compliance/r3_view_compiler_directives_spec.ts b/packages/compiler-cli/test/compliance/r3_view_compiler_directives_spec.ts index fc1c021bf1..5118dfdbd1 100644 --- a/packages/compiler-cli/test/compliance/r3_view_compiler_directives_spec.ts +++ b/packages/compiler-cli/test/compliance/r3_view_compiler_directives_spec.ts @@ -48,7 +48,8 @@ describe('compiler compliance: directives', () => { if (rf & 1) { $r3$.ɵelement(0, "div"); } - } + }, + encapsulation: 2 }); `; @@ -93,7 +94,8 @@ describe('compiler compliance: directives', () => { if (rf & 1) { $r3$.ɵelement(0, "div"); } - } + }, + encapsulation: 2 }); `; @@ -141,7 +143,8 @@ describe('compiler compliance: directives', () => { } }, … - directives: [SomeDirective] + directives: [SomeDirective], + encapsulation: 2 }); `; @@ -189,7 +192,8 @@ describe('compiler compliance: directives', () => { } }, … - directives: [SomeDirective] + directives: [SomeDirective], + encapsulation: 2 }); `; @@ -233,7 +237,8 @@ describe('compiler compliance: directives', () => { } }, … - directives: [SomeDirective] + directives: [SomeDirective], + encapsulation: 2 }); `; @@ -283,7 +288,8 @@ describe('compiler compliance: directives', () => { } }, … - directives: [SomeDirective] + directives: [SomeDirective], + encapsulation: 2 }); `; @@ -294,4 +300,4 @@ describe('compiler compliance: directives', () => { }); }); -}); \ No newline at end of file +}); diff --git a/packages/compiler-cli/test/compliance/r3_view_compiler_listener_spec.ts b/packages/compiler-cli/test/compliance/r3_view_compiler_listener_spec.ts index 6882162713..f053ce6c11 100644 --- a/packages/compiler-cli/test/compliance/r3_view_compiler_listener_spec.ts +++ b/packages/compiler-cli/test/compliance/r3_view_compiler_listener_spec.ts @@ -217,7 +217,8 @@ describe('compiler compliance: listen()', () => { $r3$.ɵelementEnd(); $r3$.ɵelement(2, "input", null, $e2_refs$); } - } + }, + encapsulation: 2 }); `; diff --git a/packages/compiler-cli/test/compliance/r3_view_compiler_styling_spec.ts b/packages/compiler-cli/test/compliance/r3_view_compiler_styling_spec.ts index 548fb6feec..21aaf89712 100644 --- a/packages/compiler-cli/test/compliance/r3_view_compiler_styling_spec.ts +++ b/packages/compiler-cli/test/compliance/r3_view_compiler_styling_spec.ts @@ -138,6 +138,7 @@ describe('compiler compliance: styling', () => { vars: 0, template: function MyComponent_Template(rf, $ctx$) { }, + encapsulation: 2, data: { animations: [{name: 'foo123'}, {name: 'trigger123'}] } @@ -179,6 +180,7 @@ describe('compiler compliance: styling', () => { vars: 0, template: function MyComponent_Template(rf, $ctx$) { }, + encapsulation: 2, data: { animations: [] } @@ -227,7 +229,8 @@ describe('compiler compliance: styling', () => { if (rf & 2) { $r3$.ɵelementAttribute(0, "@foo", $r3$.ɵbind(ctx.exp)); } - } + }, + encapsulation: 2 }); `; @@ -327,7 +330,8 @@ describe('compiler compliance: styling', () => { $r3$.ɵelementStylingApply(0); $r3$.ɵelementAttribute(0, "style", $r3$.ɵbind("border-width: 10px"), $r3$.ɵsanitizeStyle); } - } + }, + encapsulation: 2 }); `; @@ -382,7 +386,8 @@ describe('compiler compliance: styling', () => { $r3$.ɵelementStyleProp(0, 0, ctx.myImage); $r3$.ɵelementStylingApply(0); } - } + }, + encapsulation: 2 }); `; @@ -523,7 +528,8 @@ describe('compiler compliance: styling', () => { $r3$.ɵelementStylingApply(0); $r3$.ɵelementAttribute(0, "class", $r3$.ɵbind("banana")); } - } + }, + encapsulation: 2 }); `; @@ -576,7 +582,8 @@ describe('compiler compliance: styling', () => { $r3$.ɵelementAttribute(0, "class", $r3$.ɵbind("round")); $r3$.ɵelementAttribute(0, "style", $r3$.ɵbind("height:100px"), $r3$.ɵsanitizeStyle); } - } + }, + encapsulation: 2 }); `; diff --git a/packages/compiler/src/render3/view/compiler.ts b/packages/compiler/src/render3/view/compiler.ts index 285167b14d..fc85fa22cd 100644 --- a/packages/compiler/src/render3/view/compiler.ts +++ b/packages/compiler/src/render3/view/compiler.ts @@ -286,6 +286,10 @@ export function compileComponentFromMetadata( definitionMap.set('pipes', pipesExpr); } + if (meta.encapsulation === null) { + meta.encapsulation = core.ViewEncapsulation.Emulated; + } + // e.g. `styles: [str1, str2]` if (meta.styles && meta.styles.length) { const styleValues = meta.encapsulation == core.ViewEncapsulation.Emulated ? @@ -293,10 +297,13 @@ export function compileComponentFromMetadata( meta.styles; const strings = styleValues.map(str => o.literal(str)); definitionMap.set('styles', o.literalArr(strings)); + } else if (meta.encapsulation === core.ViewEncapsulation.Emulated) { + // If there is no style, don't generate css selectors on elements + meta.encapsulation = core.ViewEncapsulation.None; } // Only set view encapsulation if it's not the default value - if (meta.encapsulation !== null && meta.encapsulation !== core.ViewEncapsulation.Emulated) { + if (meta.encapsulation !== core.ViewEncapsulation.Emulated) { definitionMap.set('encapsulation', o.literal(meta.encapsulation)); }