fix(@angular/build): prevent nested CSS in components

The Angular encapsulation currently does not support CSS nesting syntax, which can lead to run-time errors or unexpected behavior when such styles are used in component stylesheets. This change ensures that nested CSS rules flattened to maintain compatibility with the compiler.

For more context, see: angular/angular#58996

Author: alan-agius4

packages/angular/build/src/tools/esbuild/angular/component-stylesheets.ts

@@ -74,6 +74,11 @@ export class ComponentStylesheetBundler {
           buildOptions.entryPoints = [entry];
         }
 
+        // Angular encapsulation does not support nesting
+        // See: https://github.com/angular/angular/issues/58996
+        buildOptions.supported ??= {};
+        buildOptions.supported['nesting'] = false;
+
         return buildOptions;
       });
     });
@@ -124,6 +129,11 @@ export class ComponentStylesheetBundler {
           buildOptions.entryPoints = [`${namespace};${entry}`];
         }
 
+        // Angular encapsulation does not support nesting
+        // See: https://github.com/angular/angular/issues/58996
+        buildOptions.supported ??= {};
+        buildOptions.supported['nesting'] = false;
+
         buildOptions.plugins.push({
           name: 'angular-component-styles',
           setup(build) {