From d718c8ec0dbe8def3604ca01e2dfe531c052d694 Mon Sep 17 00:00:00 2001
From: Alan Agius <17563226+alan-agius4@users.noreply.github.com>
Date: Mon, 14 Apr 2025 06:58:03 +0000
Subject: [PATCH] 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: https://github.com/angular/angular/issues/58996
---
 .../src/tools/esbuild/angular/component-stylesheets.ts | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/packages/angular/build/src/tools/esbuild/angular/component-stylesheets.ts b/packages/angular/build/src/tools/esbuild/angular/component-stylesheets.ts
index ce9cca6c7529..3b8d12ec1461 100644
--- a/packages/angular/build/src/tools/esbuild/angular/component-stylesheets.ts
+++ b/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) {