Description
🐞 Bug report
Command (mark with an x)
- new
- build
- serve
- test
- e2e
- generate
- add
- update
- lint
- xi18n
- run
- config
- help
- version
- doc
Is this a regression?
No.
Description
With ViewEncapsulation.Emulated, using the following pattern will not generate proper CSS by Angular: .selector :host-context(), so preceding the :host-context() selector doesn't work. The output will instead have the preceding selector only in the first selector (of the two generated in the selector list).
If it shouldn't be supported to precede :host or, especially, :host-context() by another selector, than this should be documented somewhere. :host itself doesn't produce any problems (despite using the same internal function) as it does not add a selector list but only a single selector. So the problem is that if a selector list is generated, the preceding selectors aren't copied for the other selectors in the list, which should be done.
Real-world use case
The minimal reproduction isn't a use case itself, but rather using SCSS @at-root with & or the current implementation of cdk-high-contrast mixin (in Angular 9 Release Candidate) within a :host-context() will create broken CSS output.
The following example use case might help to understand my motivation and that this isn't only a hypothetical problem: I want to set a special border in high contrast mode and all these styles depend on a parent .foo class:
:host-context(.foo) {
// Some styles
@include cdk-high-contrast() {
border: 2px white solid;
}
}which will generate CSS output (to be parsed by Angular's View Encapsulation emulation) as follows:
:host-context(.foo) {
// Some styles
}
.cdk-high-contrast-active :host-context(.foo) {
border: 2px white solid;
}After transformed by Angular, this will have the following, final CSS, with the missing preceding .cdk-high-contrast-active in the second selector:
.foo[_nghost-nxr-c0], .foo [_nghost-nxr-c0] {
// Some styles
}
.cdk-high-contrast-active .foo[_nghost-nxr-c0], .foo [_nghost-nxr-c0] {
border: 2px white solid
}By the way, I'm aware of the issue in the current approach of the cdk-high-contrast mixin, discussed in #18147. So, the behaviour of this mixin might change, but the problem with using @at-root together with & and :host-context() stays nevertheless.
🔬 Minimal Reproduction
Having the following, simplified (output) HTML structure:
<html class="cdk-high-contrast-active">
<body>
<app-component><span>Some content</span></app-component>
</body>
</html>The cdk-high-contrast-actice class can be added manually or by using the HighContrastModeDetector service.
AppComponent will need the following style files:
.cdk-high-contrast-active :host-context() span {
color: green;
}🔥 Exception or Error
Neither an exception nor an error is thrown.
🌍 Your Environment
Angular CLI: 9.0.0-rc.5
Node: 12.6.0
OS: win32 x64
Angular: 9.0.0-rc.5
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, language-service, localize, material
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.900.0-rc.5
@angular-devkit/build-angular 0.900.0-rc.5
@angular-devkit/build-optimizer 0.900.0-rc.5
@angular-devkit/build-webpack 0.900.0-rc.5
@angular-devkit/core 9.0.0-rc.5
@angular-devkit/schematics 9.0.0-rc.5
@ngtools/webpack 9.0.0-rc.5
@schematics/angular 9.0.0-rc.5
@schematics/update 0.900.0-rc.5
rxjs 6.5.3
typescript 3.7.3
webpack 4.41.2
Anything else relevant?
Nope.