CleanCss breaks :host-context(selector selector)

[SebastianPodgajny]

🐞 Bug report

Command (mark with an x)

- [ ] new
- [x] build
- [x] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Is this a regression?

Description

CleanCss plugin breaks :host-context(selector selector) (space is important)

angular/angular#23034 (comment)
#10454

🔬 Minimal Reproduction

Use :host-context(something .somethingElse) and run ng build --prod

My current fix is to remove CleanCss plugin with ngx-build-plus

cfg.optimization.minimizer = cfg.optimization.minimizer.reduce((acc, minimizer) => {
  return minimizer.constructor.name === 'CleanCssWebpackPlugin' ? acc : [...acc, minimizer];
}, []);

without this plugin everything works as expected

🔥 Exception or Error

🌍 Your Environment

Angular CLI: 7.3.5
Node: 10.15.1
OS: darwin x64
Angular: 7.2.8
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.13.5
@angular-devkit/build-angular     0.13.5
@angular-devkit/build-optimizer   0.13.5
@angular-devkit/build-webpack     0.13.5
@angular-devkit/core              7.3.5
@angular-devkit/schematics        7.3.5
@angular/cli                      7.3.5
@ngtools/webpack                  7.3.5
@schematics/angular               7.3.5
@schematics/update                0.13.5
rxjs                              6.4.0
typescript                        3.2.4
webpack                           4.29.0

Anything else relevant?

[alan-agius4]

Hi, this looks like a bug in clean-css, hence I'd suggest you open an issue their issue tracker.

As a workaround you should be able to use special comments to make clean-css ignore a block of CSS:

/* clean-css ignore:start */
:host-context(selector selector){
	color: red;
}
/* clean-css ignore:end */

[alan-agius4]

Just opened a issue in their issue tracker: clean-css/clean-css#1062

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}