refactor(@angular/build): use new encapsulate style helper for HMR

The `@angular/compiler` package now has an updated `encapsulateStyle` helper
that allows directly providing the component identifier as an argument.
This avoids needing to perform an additional regular expression replace
with the internal marker text.
Also, the component identifier validity check has been updated to support
unicode characters in the event they happen to be used for the application
identifier.

Author: clydin

packages/angular/build/src/tools/vite/middlewares/assets-middleware.ts

@@ -12,8 +12,6 @@ import type { Connect, ViteDevServer } from 'vite';
 import { loadEsmModule } from '../../../utils/load-esm';
 import { AngularMemoryOutputFiles, pathnameWithoutBasePath } from '../utils';
 
-const COMPONENT_REGEX = /%COMP%/g;
-
 export function createAngularAssetsMiddleware(
   server: ViteDevServer,
   assets: Map<string, string>,
@@ -90,12 +88,13 @@ export function createAngularAssetsMiddleware(
             // Shim the stylesheet if a component ID is provided
             if (componentId.length > 0) {
               // Validate component ID
-              if (/[_.-A-Za-z0-9]+-c\d{9}$/.test(componentId)) {
+              if (/^[_.\-\p{Letter}\d]+-c\d{9}$/u.test(componentId)) {
                 loadEsmModule<typeof import('@angular/compiler')>('@angular/compiler')
                   .then((compilerModule) => {
-                    const encapsulatedData = compilerModule
-                      .encapsulateStyle(new TextDecoder().decode(data))
-                      .replaceAll(COMPONENT_REGEX, componentId);
+                    const encapsulatedData = compilerModule.encapsulateStyle(
+                      new TextDecoder().decode(data),
+                      componentId,
+                    );
 
                     res.setHeader('Content-Type', 'text/css');
                     res.setHeader('Cache-Control', 'no-cache');