Skip to content

Commit 0191773

Browse files
ocombemhevery
authored andcommitted
fix(ivy): set encapsulation to None when there is no style (angular#27175)
PR Close angular#27175
1 parent 859da3a commit 0191773

File tree

6 files changed

+81
-37
lines changed

6 files changed

+81
-37
lines changed

packages/compiler-cli/test/compliance/r3_compiler_compliance_spec.ts

Lines changed: 44 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -427,7 +427,8 @@ describe('compiler compliance', () => {
427427
$r3$.ɵelementClassProp(0, 0, ctx.error);
428428
$r3$.ɵelementStylingApply(0);
429429
}
430-
}
430+
},
431+
encapsulation: 2
431432
});
432433
`;
433434

@@ -474,7 +475,8 @@ describe('compiler compliance', () => {
474475
if (rf & 1) {
475476
$r3$.ɵtext(0, "child-view");
476477
}
477-
}
478+
},
479+
encapsulation: 2
478480
});`;
479481

480482
// SomeDirective definition should be:
@@ -502,7 +504,8 @@ describe('compiler compliance', () => {
502504
$r3$.ɵtext(1, "!");
503505
}
504506
},
505-
directives: [ChildComponent, SomeDirective]
507+
directives: [ChildComponent, SomeDirective],
508+
encapsulation: 2
506509
});
507510
`;
508511

@@ -591,7 +594,8 @@ describe('compiler compliance', () => {
591594
},
592595
consts: 0,
593596
vars: 0,
594-
template: function MyComponent_Template(rf, ctx) {}
597+
template: function MyComponent_Template(rf, ctx) {},
598+
encapsulation: 2
595599
});`;
596600

597601
const result = compile(files, angularFiles);
@@ -660,7 +664,8 @@ describe('compiler compliance', () => {
660664
$r3$.ɵelementEnd();
661665
}
662666
},
663-
directives:[IfDirective]
667+
directives:[IfDirective],
668+
encapsulation: 2
664669
});`;
665670

666671
const result = compile(files, angularFiles);
@@ -723,7 +728,8 @@ describe('compiler compliance', () => {
723728
$r3$.ɵelementProperty(0, "names", $r3$.ɵbind($r3$.ɵpureFunction1(1, $e0_ff$, ctx.customName)));
724729
}
725730
},
726-
directives: [MyComp]
731+
directives: [MyComp],
732+
encapsulation: 2
727733
});
728734
`;
729735

@@ -806,7 +812,8 @@ describe('compiler compliance', () => {
806812
$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])));
807813
}
808814
},
809-
directives: [MyComp]
815+
directives: [MyComp],
816+
encapsulation: 2
810817
});
811818
`;
812819

@@ -867,7 +874,8 @@ describe('compiler compliance', () => {
867874
$r3$.ɵelementProperty(0, "config", $r3$.ɵbind($r3$.ɵpureFunction1(1, $e0_ff$, ctx.name)));
868875
}
869876
},
870-
directives: [ObjectComp]
877+
directives: [ObjectComp],
878+
encapsulation: 2
871879
});
872880
`;
873881

@@ -936,7 +944,8 @@ describe('compiler compliance', () => {
936944
$r3$.ɵbind($r3$.ɵpureFunction2(5, $e0_ff_2$, ctx.name, $r3$.ɵpureFunction1(3, $e0_ff_1$, $r3$.ɵpureFunction1(1, $e0_ff$, ctx.duration)))));
937945
}
938946
},
939-
directives: [NestedComp]
947+
directives: [NestedComp],
948+
encapsulation: 2
940949
});
941950
`;
942951

@@ -991,7 +1000,8 @@ describe('compiler compliance', () => {
9911000
$r3$.ɵprojection(1);
9921001
$r3$.ɵelementEnd();
9931002
}
994-
}
1003+
},
1004+
encapsulation: 2
9951005
});`;
9961006

9971007
const ComplexComponentDefinition = `
@@ -1016,7 +1026,8 @@ describe('compiler compliance', () => {
10161026
$r3$.ɵprojection(3, 2);
10171027
$r3$.ɵelementEnd();
10181028
}
1019-
}
1029+
},
1030+
encapsulation: 2
10201031
});
10211032
`;
10221033

@@ -1088,7 +1099,8 @@ describe('compiler compliance', () => {
10881099
$r3$.ɵelement(1, "div", $e0_attrs$);
10891100
}
10901101
},
1091-
directives: function () { return [SomeDirective]; }
1102+
directives: function () { return [SomeDirective]; },
1103+
encapsulation: 2
10921104
});`;
10931105

10941106
const result = compile(files, angularFiles);
@@ -1267,7 +1279,8 @@ describe('compiler compliance', () => {
12671279
$r3$.ɵprojection(1);
12681280
$r3$.ɵelementEnd();
12691281
}
1270-
}
1282+
},
1283+
encapsulation: 2
12711284
});`;
12721285

12731286
const result = compile(files, angularFiles);
@@ -1468,7 +1481,8 @@ describe('compiler compliance', () => {
14681481
$r3$.ɵtextBinding(4, $r3$.ɵinterpolation1("", $r3$.ɵpipeBindV(5, 8, $r3$.ɵpureFunction1(15, $c0$, ctx.name)), ""));
14691482
}
14701483
},
1471-
pipes: [MyPurePipe, MyPipe]
1484+
pipes: [MyPurePipe, MyPipe],
1485+
encapsulation: 2
14721486
});`;
14731487

14741488
const result = compile(files, angularFiles);
@@ -1536,7 +1550,8 @@ describe('compiler compliance', () => {
15361550
));
15371551
}
15381552
},
1539-
pipes: [MyPipe]
1553+
pipes: [MyPipe],
1554+
encapsulation: 2
15401555
});`;
15411556

15421557
const result = compile(files, angularFiles);
@@ -1579,7 +1594,8 @@ describe('compiler compliance', () => {
15791594
const $user$ = $r3$.ɵreference(1);
15801595
$r3$.ɵtextBinding(2, $r3$.ɵinterpolation1("Hello ", $user$.value, "!"));
15811596
}
1582-
}
1597+
},
1598+
encapsulation: 2
15831599
});
15841600
`;
15851601

@@ -1675,7 +1691,8 @@ describe('compiler compliance', () => {
16751691
$r3$.ɵtextBinding(2, $r3$.ɵinterpolation1(" ", $foo$, " "));
16761692
}
16771693
},
1678-
directives:[IfDirective]
1694+
directives:[IfDirective],
1695+
encapsulation: 2
16791696
});`;
16801697

16811698
const result = compile(files, angularFiles);
@@ -1809,7 +1826,8 @@ describe('compiler compliance', () => {
18091826
features: [$r3$.ɵNgOnChangesFeature],
18101827
consts: 0,
18111828
vars: 0,
1812-
template: function LifecycleComp_Template(rf, ctx) {}
1829+
template: function LifecycleComp_Template(rf, ctx) {},
1830+
encapsulation: 2
18131831
});`;
18141832

18151833
const SimpleLayoutDefinition = `
@@ -1829,7 +1847,8 @@ describe('compiler compliance', () => {
18291847
$r3$.ɵelementProperty(1, "name", $r3$.ɵbind(ctx.name2));
18301848
}
18311849
},
1832-
directives: [LifecycleComp]
1850+
directives: [LifecycleComp],
1851+
encapsulation: 2
18331852
});`;
18341853

18351854
const result = compile(files, angularFiles);
@@ -1957,7 +1976,8 @@ describe('compiler compliance', () => {
19571976
}
19581977
if (rf & 2) { $r3$.ɵelementProperty(1,"forOf",$r3$.ɵbind(ctx.items)); }
19591978
},
1960-
directives: function() { return [ForOfDirective]; }
1979+
directives: function() { return [ForOfDirective]; },
1980+
encapsulation: 2
19611981
});
19621982
`;
19631983

@@ -2036,7 +2056,8 @@ describe('compiler compliance', () => {
20362056
$r3$.ɵelementProperty(1, "forOf", $r3$.ɵbind(ctx.items));
20372057
}
20382058
},
2039-
directives: function() { return [ForOfDirective]; }
2059+
directives: function() { return [ForOfDirective]; },
2060+
encapsulation: 2
20402061
});
20412062
`;
20422063

@@ -2135,7 +2156,8 @@ describe('compiler compliance', () => {
21352156
$r3$.ɵelementProperty(1, "forOf", $r3$.ɵbind(ctx.items));
21362157
}
21372158
},
2138-
directives: function () { return [ForOfDirective]; }
2159+
directives: function () { return [ForOfDirective]; },
2160+
encapsulation: 2
21392161
});`;
21402162

21412163
const result = compile(files, angularFiles);

packages/compiler-cli/test/compliance/r3_view_compiler_binding_spec.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -194,7 +194,8 @@ describe('compiler compliance: bindings', () => {
194194
hostVars: 3,
195195
consts: 0,
196196
vars: 0,
197-
template: function HostBindingComp_Template(rf, ctx) {}
197+
template: function HostBindingComp_Template(rf, ctx) {},
198+
encapsulation: 2
198199
});
199200
`;
200201

packages/compiler-cli/test/compliance/r3_view_compiler_directives_spec.ts

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,8 @@ describe('compiler compliance: directives', () => {
4848
if (rf & 1) {
4949
$r3$.ɵelement(0, "div");
5050
}
51-
}
51+
},
52+
encapsulation: 2
5253
});
5354
`;
5455

@@ -93,7 +94,8 @@ describe('compiler compliance: directives', () => {
9394
if (rf & 1) {
9495
$r3$.ɵelement(0, "div");
9596
}
96-
}
97+
},
98+
encapsulation: 2
9799
});
98100
`;
99101

@@ -141,7 +143,8 @@ describe('compiler compliance: directives', () => {
141143
}
142144
},
143145
144-
directives: [SomeDirective]
146+
directives: [SomeDirective],
147+
encapsulation: 2
145148
});
146149
`;
147150

@@ -189,7 +192,8 @@ describe('compiler compliance: directives', () => {
189192
}
190193
},
191194
192-
directives: [SomeDirective]
195+
directives: [SomeDirective],
196+
encapsulation: 2
193197
});
194198
`;
195199

@@ -233,7 +237,8 @@ describe('compiler compliance: directives', () => {
233237
}
234238
},
235239
236-
directives: [SomeDirective]
240+
directives: [SomeDirective],
241+
encapsulation: 2
237242
});
238243
`;
239244

@@ -283,7 +288,8 @@ describe('compiler compliance: directives', () => {
283288
}
284289
},
285290
286-
directives: [SomeDirective]
291+
directives: [SomeDirective],
292+
encapsulation: 2
287293
});
288294
`;
289295

@@ -294,4 +300,4 @@ describe('compiler compliance: directives', () => {
294300
});
295301

296302
});
297-
});
303+
});

packages/compiler-cli/test/compliance/r3_view_compiler_listener_spec.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -217,7 +217,8 @@ describe('compiler compliance: listen()', () => {
217217
$r3$.ɵelementEnd();
218218
$r3$.ɵelement(2, "input", null, $e2_refs$);
219219
}
220-
}
220+
},
221+
encapsulation: 2
221222
});
222223
`;
223224

packages/compiler-cli/test/compliance/r3_view_compiler_styling_spec.ts

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -138,6 +138,7 @@ describe('compiler compliance: styling', () => {
138138
vars: 0,
139139
template: function MyComponent_Template(rf, $ctx$) {
140140
},
141+
encapsulation: 2,
141142
data: {
142143
animations: [{name: 'foo123'}, {name: 'trigger123'}]
143144
}
@@ -179,6 +180,7 @@ describe('compiler compliance: styling', () => {
179180
vars: 0,
180181
template: function MyComponent_Template(rf, $ctx$) {
181182
},
183+
encapsulation: 2,
182184
data: {
183185
animations: []
184186
}
@@ -227,7 +229,8 @@ describe('compiler compliance: styling', () => {
227229
if (rf & 2) {
228230
$r3$.ɵelementAttribute(0, "@foo", $r3$.ɵbind(ctx.exp));
229231
}
230-
}
232+
},
233+
encapsulation: 2
231234
});
232235
`;
233236

@@ -327,7 +330,8 @@ describe('compiler compliance: styling', () => {
327330
$r3$.ɵelementStylingApply(0);
328331
$r3$.ɵelementAttribute(0, "style", $r3$.ɵbind("border-width: 10px"), $r3$.ɵsanitizeStyle);
329332
}
330-
}
333+
},
334+
encapsulation: 2
331335
});
332336
`;
333337

@@ -382,7 +386,8 @@ describe('compiler compliance: styling', () => {
382386
$r3$.ɵelementStyleProp(0, 0, ctx.myImage);
383387
$r3$.ɵelementStylingApply(0);
384388
}
385-
}
389+
},
390+
encapsulation: 2
386391
});
387392
`;
388393

@@ -523,7 +528,8 @@ describe('compiler compliance: styling', () => {
523528
$r3$.ɵelementStylingApply(0);
524529
$r3$.ɵelementAttribute(0, "class", $r3$.ɵbind("banana"));
525530
}
526-
}
531+
},
532+
encapsulation: 2
527533
});
528534
`;
529535

@@ -576,7 +582,8 @@ describe('compiler compliance: styling', () => {
576582
$r3$.ɵelementAttribute(0, "class", $r3$.ɵbind("round"));
577583
$r3$.ɵelementAttribute(0, "style", $r3$.ɵbind("height:100px"), $r3$.ɵsanitizeStyle);
578584
}
579-
}
585+
},
586+
encapsulation: 2
580587
});
581588
`;
582589

packages/compiler/src/render3/view/compiler.ts

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -286,17 +286,24 @@ export function compileComponentFromMetadata(
286286
definitionMap.set('pipes', pipesExpr);
287287
}
288288

289+
if (meta.encapsulation === null) {
290+
meta.encapsulation = core.ViewEncapsulation.Emulated;
291+
}
292+
289293
// e.g. `styles: [str1, str2]`
290294
if (meta.styles && meta.styles.length) {
291295
const styleValues = meta.encapsulation == core.ViewEncapsulation.Emulated ?
292296
compileStyles(meta.styles, CONTENT_ATTR, HOST_ATTR) :
293297
meta.styles;
294298
const strings = styleValues.map(str => o.literal(str));
295299
definitionMap.set('styles', o.literalArr(strings));
300+
} else if (meta.encapsulation === core.ViewEncapsulation.Emulated) {
301+
// If there is no style, don't generate css selectors on elements
302+
meta.encapsulation = core.ViewEncapsulation.None;
296303
}
297304

298305
// Only set view encapsulation if it's not the default value
299-
if (meta.encapsulation !== null && meta.encapsulation !== core.ViewEncapsulation.Emulated) {
306+
if (meta.encapsulation !== core.ViewEncapsulation.Emulated) {
300307
definitionMap.set('encapsulation', o.literal(meta.encapsulation));
301308
}
302309

0 commit comments

Comments
 (0)