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

(cherry picked from commit 3d997fe)

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) {