fix(@angular-devkit/build-angular): bring back style tags in browser …

…builder (cherry picked from commit d746de5)
angular · Nov 18, 2024 · ea5ae68 · ea5ae68
1 parent 9e6ab1b
commit ea5ae68
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 1 deletion.
diff --git a/...ges/angular/build/src/builders/application/tests/behavior/stylesheet_autoprefixer_spec.ts b/...ges/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
@@ -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
@@ -38,7 +38,7 @@ export function augmentHostWithResources(
 
       resourceLoader.setAffectedResources(filePath, [filePath]);
 
-      return content;
+      return Promise.resolve(content);
     } else {
       return resourceLoader.get(filePath);
     }