From d746de59f360a7fb659cdf2c2a5df8822cda944c Mon Sep 17 00:00:00 2001
From: Jan Krems <jankrems@google.com>
Date: Fri, 15 Nov 2024 14:03:18 -0800
Subject: [PATCH] fix(@angular-devkit/build-angular): bring back style tags in
 browser builder

---
 .../behavior/stylesheet_autoprefixer_spec.ts  | 55 +++++++++++++++++++
 .../src/builders/browser/specs/styles_spec.ts | 31 +++++++++++
 packages/ngtools/webpack/src/ivy/host.ts      |  2 +-
 3 files changed, 87 insertions(+), 1 deletion(-)

diff --git a/packages/angular/build/src/builders/application/tests/behavior/stylesheet_autoprefixer_spec.ts b/packages/angular/build/src/builders/application/tests/behavior/stylesheet_autoprefixer_spec.ts
index 16e5f8b88e60..41ae225e2d3d 100644
--- a/packages/angular/build/src/builders/application/tests/behavior/stylesheet_autoprefixer_spec.ts
+++ b/packages/angular/build/src/builders/application/tests/behavior/stylesheet_autoprefixer_spec.ts
@@ -200,5 +200,60 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
 
       harness.expectFile('dist/browser/main.js').content.toMatch(/{\\n\s*hyphens:\s*none;\\n\s*}/);
     });
+
+    it('should add prefixes for listed browsers in inline template styles', async () => {
+      await harness.writeFile(
+        '.browserslistrc',
+        `
+          Safari 15.4
+          Edge 104
+          Firefox 91
+         `,
+      );
+
+      await harness.modifyFile('src/app/app.component.ts', (content) => {
+        return content.replace('styleUrls', 'styles').replace('./app.component.css', '');
+      });
+      await harness.modifyFile('src/app/app.component.html', (content) => {
+        return `<style>aside { hyphens: none; }</style>\n${content}`;
+      });
+
+      harness.useTarget('build', {
+        ...BASE_OPTIONS,
+      });
+
+      const { result } = await harness.executeOnce();
+      expect(result?.success).toBeTrue();
+
+      harness
+        .expectFile('dist/browser/main.js')
+        // div[_ngcontent-%COMP%] {\n  -webkit-hyphens: none;\n  hyphens: none;\n}\n
+        .content.toMatch(/{\\n\s*-webkit-hyphens:\s*none;\\n\s*hyphens:\s*none;\\n\s*}/);
+    });
+
+    it('should not add prefixes if not required by browsers in inline template styles', async () => {
+      await harness.writeFile(
+        '.browserslistrc',
+        `
+          Edge 110
+         `,
+      );
+
+      await harness.modifyFile('src/app/app.component.ts', (content) => {
+        return content.replace('styleUrls', 'styles').replace('./app.component.css', '');
+      });
+      await harness.modifyFile('src/app/app.component.html', (content) => {
+        return `<style>aside { hyphens: none; }</style>\n${content}`;
+      });
+
+      harness.useTarget('build', {
+        ...BASE_OPTIONS,
+      });
+
+      const { result } = await harness.executeOnce();
+      expect(result?.success).toBeTrue();
+
+      harness.expectFile('dist/browser/main.js').content.toMatch(/{\\n\s*hyphens:\s*none;\\n\s*}/);
+    });
   });
 });
diff --git a/packages/angular_devkit/build_angular/src/builders/browser/specs/styles_spec.ts b/packages/angular_devkit/build_angular/src/builders/browser/specs/styles_spec.ts
index b2e79124c40c..61b1cba0d132 100644
--- a/packages/angular_devkit/build_angular/src/builders/browser/specs/styles_spec.ts
+++ b/packages/angular_devkit/build_angular/src/builders/browser/specs/styles_spec.ts
@@ -140,6 +140,37 @@ describe('Browser Builder styles', () => {
     expect(await files['main.js']).toContain('-webkit-mask-composite');
   });
 
+  it('supports autoprefixer with inline template styles in AOT mode', async () => {
+    host.writeMultipleFiles({
+      './src/app/app.component.html': `
+        <style>div { mask-composite: add; }</style>
+        <div>{{ title }}</div>
+      `,
+      './src/app/app.component.ts': `
+        import { Component } from '@angular/core';
+
+        @Component({
+          selector: 'app-root',
+          standalone: false,
+          templateUrl: './app.component.html',
+          styles: 'div { font-weight: 500; }',
+        })
+        export class AppComponent {
+          title = 'app';
+        }
+      `,
+      '.browserslistrc': `
+        Safari 15.4
+        Edge 104
+        Firefox 91
+      `,
+    });
+
+    const { files } = await browserBuild(architect, host, target, { aot: true });
+
+    expect(await files['main.js']).toContain('-webkit-mask-composite');
+  });
+
   extensionsWithImportSupport.forEach((ext) => {
     it(`supports imports in ${ext} files`, async () => {
       host.writeMultipleFiles({
diff --git a/packages/ngtools/webpack/src/ivy/host.ts b/packages/ngtools/webpack/src/ivy/host.ts
index 29bee3e947a7..32ce28fab565 100644
--- a/packages/ngtools/webpack/src/ivy/host.ts
+++ b/packages/ngtools/webpack/src/ivy/host.ts
@@ -38,7 +38,7 @@ export function augmentHostWithResources(
 
       resourceLoader.setAffectedResources(filePath, [filePath]);
 
-      return content;
+      return Promise.resolve(content);
     } else {
       return resourceLoader.get(filePath);
     }