honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

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
Show Stats 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$.ɵ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);

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

@ -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
});
`;

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

@ -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
});
`;

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$.ɵ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,
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
});
`;

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

@ -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));
}