cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ivy): set encapsulation to None when there is no style (#27175)

Browse Source 
PR Close #27175
This commit is contained in:
Olivier Combe
2018-11-19 18:48:14 +01:00
committed by Misko Hevery
parent 859da3af50
commit 01917733a1
6 changed files with 81 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
packages/compiler-cli/test/compliance/r3_compiler_compliance_spec.ts
View File

@ -427,7 +427,8 @@ describe('compiler compliance', () => {
$r3$.ɵelementClassProp(0, 0, ctx.error); $r3$.ɵelementClassProp(0, 0, ctx.error);
$r3$.ɵelementStylingApply(0); $r3$.ɵelementStylingApply(0);
} }
} },
encapsulation: 2
}); });
`; `;
@ -474,7 +475,8 @@ describe('compiler compliance', () => {
if (rf & 1) { if (rf & 1) {
$r3$.ɵtext(0, "child-view"); $r3$.ɵtext(0, "child-view");
} }
} },
encapsulation: 2
});`; });`;
// SomeDirective definition should be: // SomeDirective definition should be:
@ -502,7 +504,8 @@ describe('compiler compliance', () => {
$r3$.ɵtext(1, "!"); $r3$.ɵtext(1, "!");
} }
}, },
directives: [ChildComponent, SomeDirective] directives: [ChildComponent, SomeDirective],
encapsulation: 2
}); });
`; `;
@ -591,7 +594,8 @@ describe('compiler compliance', () => {
}, },
consts: 0, consts: 0,
vars: 0, vars: 0,
template: function MyComponent_Template(rf, ctx) {} template: function MyComponent_Template(rf, ctx) {},
encapsulation: 2
});`; });`;
const result = compile(files, angularFiles); const result = compile(files, angularFiles);
@ -660,7 +664,8 @@ describe('compiler compliance', () => {
$r3$.ɵelementEnd(); $r3$.ɵelementEnd();
} }
}, },
directives:[IfDirective] directives:[IfDirective],
encapsulation: 2
});`; });`;
const result = compile(files, angularFiles); 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))); $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]))); $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))); $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))))); $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$.ɵprojection(1);
$r3$.ɵelementEnd(); $r3$.ɵelementEnd();
} }
} },
encapsulation: 2
});`; });`;
const ComplexComponentDefinition = ` const ComplexComponentDefinition = `
@ -1016,7 +1026,8 @@ describe('compiler compliance', () => {
$r3$.ɵprojection(3, 2); $r3$.ɵprojection(3, 2);
$r3$.ɵelementEnd(); $r3$.ɵelementEnd();
} }
} },
encapsulation: 2
}); });
`; `;
@ -1088,7 +1099,8 @@ describe('compiler compliance', () => {
$r3$.ɵelement(1, "div", $e0_attrs$); $r3$.ɵelement(1, "div", $e0_attrs$);
} }
}, },
directives: function () { return [SomeDirective]; } directives: function () { return [SomeDirective]; },
encapsulation: 2
});`; });`;
const result = compile(files, angularFiles); const result = compile(files, angularFiles);
@ -1267,7 +1279,8 @@ describe('compiler compliance', () => {
$r3$.ɵprojection(1); $r3$.ɵprojection(1);
$r3$.ɵelementEnd(); $r3$.ɵelementEnd();
} }
} },
encapsulation: 2
});`; });`;
const result = compile(files, angularFiles); 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)), "")); $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); const result = compile(files, angularFiles);
@ -1536,7 +1550,8 @@ describe('compiler compliance', () => {
)); ));
} }
}, },
pipes: [MyPipe] pipes: [MyPipe],
encapsulation: 2
});`; });`;
const result = compile(files, angularFiles); const result = compile(files, angularFiles);
@ -1579,7 +1594,8 @@ describe('compiler compliance', () => {
const $user$ = $r3$.ɵreference(1); const $user$ = $r3$.ɵreference(1);
$r3$.ɵtextBinding(2, $r3$.ɵinterpolation1("Hello ", $user$.value, "!")); $r3$.ɵtextBinding(2, $r3$.ɵinterpolation1("Hello ", $user$.value, "!"));
} }
} },
encapsulation: 2
}); });
`; `;
@ -1675,7 +1691,8 @@ describe('compiler compliance', () => {
$r3$.ɵtextBinding(2, $r3$.ɵinterpolation1(" ", $foo$, " ")); $r3$.ɵtextBinding(2, $r3$.ɵinterpolation1(" ", $foo$, " "));
} }
}, },
directives:[IfDirective] directives:[IfDirective],
encapsulation: 2
});`; });`;
const result = compile(files, angularFiles); const result = compile(files, angularFiles);
@ -1809,7 +1826,8 @@ describe('compiler compliance', () => {
features: [$r3$.ɵNgOnChangesFeature], features: [$r3$.ɵNgOnChangesFeature],
consts: 0, consts: 0,
vars: 0, vars: 0,
template: function LifecycleComp_Template(rf, ctx) {} template: function LifecycleComp_Template(rf, ctx) {},
encapsulation: 2
});`; });`;
const SimpleLayoutDefinition = ` const SimpleLayoutDefinition = `
@ -1829,7 +1847,8 @@ describe('compiler compliance', () => {
$r3$.ɵelementProperty(1, "name", $r3$.ɵbind(ctx.name2)); $r3$.ɵelementProperty(1, "name", $r3$.ɵbind(ctx.name2));
} }
}, },
directives: [LifecycleComp] directives: [LifecycleComp],
encapsulation: 2
});`; });`;
const result = compile(files, angularFiles); const result = compile(files, angularFiles);
@ -1957,7 +1976,8 @@ describe('compiler compliance', () => {
} }
if (rf & 2) { $r3$.ɵelementProperty(1,"forOf",$r3$.ɵbind(ctx.items)); } 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)); $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)); $r3$.ɵelementProperty(1, "forOf", $r3$.ɵbind(ctx.items));
} }
}, },
directives: function () { return [ForOfDirective]; } directives: function () { return [ForOfDirective]; },
encapsulation: 2
});`; });`;
const result = compile(files, angularFiles); const result = compile(files, angularFiles);

3
packages/compiler-cli/test/compliance/r3_view_compiler_binding_spec.ts
View File

@ -194,7 +194,8 @@ describe('compiler compliance: bindings', () => {
hostVars: 3, hostVars: 3,
consts: 0, consts: 0,
vars: 0, vars: 0,
template: function HostBindingComp_Template(rf, ctx) {} template: function HostBindingComp_Template(rf, ctx) {},
encapsulation: 2
}); });
`; `;

20
packages/compiler-cli/test/compliance/r3_view_compiler_directives_spec.ts
View File

@ -48,7 +48,8 @@ describe('compiler compliance: directives', () => {
if (rf & 1) { if (rf & 1) {
$r3$.ɵelement(0, "div"); $r3$.ɵelement(0, "div");
} }
} },
encapsulation: 2
}); });
`; `;
@ -93,7 +94,8 @@ describe('compiler compliance: directives', () => {
if (rf & 1) { if (rf & 1) {
$r3$.ɵelement(0, "div"); $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', () => {
}); });
}); });
}); });

3
packages/compiler-cli/test/compliance/r3_view_compiler_listener_spec.ts
View File

@ -217,7 +217,8 @@ describe('compiler compliance: listen()', () => {
$r3$.ɵelementEnd(); $r3$.ɵelementEnd();
$r3$.ɵelement(2, "input", null, $e2_refs$); $r3$.ɵelement(2, "input", null, $e2_refs$);
} }
} },
encapsulation: 2
}); });
`; `;

17
packages/compiler-cli/test/compliance/r3_view_compiler_styling_spec.ts
View File

@ -138,6 +138,7 @@ describe('compiler compliance: styling', () => {
vars: 0, vars: 0,
template: function MyComponent_Template(rf, $ctx$) { template: function MyComponent_Template(rf, $ctx$) {
}, },
encapsulation: 2,
data: { data: {
animations: [{name: 'foo123'}, {name: 'trigger123'}] animations: [{name: 'foo123'}, {name: 'trigger123'}]
} }
@ -179,6 +180,7 @@ describe('compiler compliance: styling', () => {
vars: 0, vars: 0,
template: function MyComponent_Template(rf, $ctx$) { template: function MyComponent_Template(rf, $ctx$) {
}, },
encapsulation: 2,
data: { data: {
animations: [] animations: []
} }
@ -227,7 +229,8 @@ describe('compiler compliance: styling', () => {
if (rf & 2) { if (rf & 2) {
$r3$.ɵelementAttribute(0, "@foo", $r3$.ɵbind(ctx.exp)); $r3$.ɵelementAttribute(0, "@foo", $r3$.ɵbind(ctx.exp));
} }
} },
encapsulation: 2
}); });
`; `;
@ -327,7 +330,8 @@ describe('compiler compliance: styling', () => {
$r3$.ɵelementStylingApply(0); $r3$.ɵelementStylingApply(0);
$r3$.ɵelementAttribute(0, "style", $r3$.ɵbind("border-width: 10px"), $r3$.ɵsanitizeStyle); $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$.ɵelementStyleProp(0, 0, ctx.myImage);
$r3$.ɵelementStylingApply(0); $r3$.ɵelementStylingApply(0);
} }
} },
encapsulation: 2
}); });
`; `;
@ -523,7 +528,8 @@ describe('compiler compliance: styling', () => {
$r3$.ɵelementStylingApply(0); $r3$.ɵelementStylingApply(0);
$r3$.ɵelementAttribute(0, "class", $r3$.ɵbind("banana")); $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, "class", $r3$.ɵbind("round"));
$r3$.ɵelementAttribute(0, "style", $r3$.ɵbind("height:100px"), $r3$.ɵsanitizeStyle); $r3$.ɵelementAttribute(0, "style", $r3$.ɵbind("height:100px"), $r3$.ɵsanitizeStyle);
} }
} },
encapsulation: 2
}); });
`; `;

9
packages/compiler/src/render3/view/compiler.ts
View File

@ -286,6 +286,10 @@ export function compileComponentFromMetadata(
definitionMap.set('pipes', pipesExpr); definitionMap.set('pipes', pipesExpr);
} }
if (meta.encapsulation === null) {
meta.encapsulation = core.ViewEncapsulation.Emulated;
}
// e.g. `styles: [str1, str2]` // e.g. `styles: [str1, str2]`
if (meta.styles && meta.styles.length) { if (meta.styles && meta.styles.length) {
const styleValues = meta.encapsulation == core.ViewEncapsulation.Emulated ? const styleValues = meta.encapsulation == core.ViewEncapsulation.Emulated ?
@ -293,10 +297,13 @@ export function compileComponentFromMetadata(
meta.styles; meta.styles;
const strings = styleValues.map(str => o.literal(str)); const strings = styleValues.map(str => o.literal(str));
definitionMap.set('styles', o.literalArr(strings)); 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 // 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)); definitionMap.set('encapsulation', o.literal(meta.encapsulation));
} }