Which @angular/* package(s) are the source of the bug?

compiler

Is this a regression?

No

Description

Encapsulated styles using CSS class selectors with umlauts don't work properly in production mode. The compiler inserts the ngcontent placeholder after the umlaut and breaks the selector.

It works in development mode.
It works when using no encapsulation or Shadow DOM.

The bug does not occur for all words, some examples:

• ❌ .über {} => .\fc[_ngcontent-fji-c1] ber[_ngcontent-fji-c1] {}
• ❌ .prüfung {} => .pr\fc[_ngcontent-fji-c1] fung[_ngcontent-fji-c1] {}
• ✅ .zufällig {} => .zuf\e4llig[_ngcontent-fji-c1] {}

Please provide a link to a minimal reproduction of the bug

Repo: https://github.com/rothsandro/repro.ng-css-umlauts
Deployed: https://leafy-starburst-2edda1.netlify.app/

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 15.0.4
Node: 16.13.0
Package Manager: npm 8.1.0
OS: darwin arm64

Angular: 15.0.4
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1500.4
@angular-devkit/build-angular   15.0.4
@angular-devkit/core            15.0.4
@angular-devkit/schematics      15.0.4
@schematics/angular             15.0.4
rxjs                            7.5.7
typescript                      4.8.4

Anything else?

No response