fix(@angular-devkit/build-angular): ensure preload hints for external stylesheets are marked as styles

clydin · alan-agius4 · commit f42f10135c1e · 2023-06-26T18:15:18.000+02:00
When a preload hint is added for a stylesheet that is referenced via an `@import` that has an URL that
does not contain a file extension, an `as` attribute is now correctly added to the hint to ensure that
the stylesheet is loaded properly. This case can happen when a font service URL is imported within a
initial stylesheet.
diff --git a/packages/angular_devkit/build_angular/src/builders/application/tests/behavior/index-preload-hints_spec.ts b/packages/angular_devkit/build_angular/src/builders/application/tests/behavior/index-preload-hints_spec.ts
@@ -30,7 +30,7 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
       harness
         .expectFile('dist/index.html')
         .content.toContain(
-          '<link rel="preload" href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@300;400;500;700&display=swap">',
+          '<link rel="preload" href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@300;400;500;700&display=swap" as="style">',
         );
     });
   });
diff --git a/packages/angular_devkit/build_angular/src/tools/esbuild/index-html-generator.ts b/packages/angular_devkit/build_angular/src/tools/esbuild/index-html-generator.ts
@@ -45,7 +45,9 @@ export function generateIndexHtml(
       if (value.type === 'script') {
         hints.push({ url: key, mode: 'modulepreload' as const });
       } else if (value.type === 'style') {
-        hints.push({ url: key, mode: 'preload' as const });
+        // Provide an "as" value of "style" to ensure external URLs which may not have a
+        // file extension are treated as stylesheets.
+        hints.push({ url: key, mode: 'preload' as const, as: 'style' });
       }
     }
   }
diff --git a/packages/angular_devkit/build_angular/src/utils/index-file/augment-index-html.ts b/packages/angular_devkit/build_angular/src/utils/index-file/augment-index-html.ts
@@ -39,7 +39,7 @@ export interface AugmentIndexHtmlOptions {
   entrypoints: Entrypoint[];
   /** Used to set the document default locale */
   lang?: string;
-  hints?: { url: string; mode: string }[];
+  hints?: { url: string; mode: string; as?: string }[];
 }
 
 export interface FileInfo {
@@ -152,6 +152,11 @@ export async function augmentIndexHtml(
           case '.css':
             attrs.push('as="style"');
             break;
+          default:
+            if (hint.as) {
+              attrs.push(`as="${hint.as}"`);
+            }
+            break;
         }
       }
 
diff --git a/packages/angular_devkit/build_angular/src/utils/index-file/augment-index-html_spec.ts b/packages/angular_devkit/build_angular/src/utils/index-file/augment-index-html_spec.ts
@@ -375,6 +375,29 @@ describe('augment-index-html', () => {
       `);
   });
 
+  it(`should add prefetch/preload hints with as=style when specified with a URL and an 'as' option`, async () => {
+    const { content, warnings } = await augmentIndexHtml({
+      ...indexGeneratorOptions,
+      hints: [
+        { mode: 'prefetch', url: 'https://example.com/x?a=1', as: 'style' },
+        { mode: 'preload', url: 'http://example.com/y?b=2', as: 'style' },
+      ],
+    });
+
+    expect(warnings).toHaveSize(0);
+    expect(content).toEqual(oneLineHtml`
+        <html>
+          <head>
+            <base href="/">
+            <link rel="prefetch" href="https://example.com/x?a=1" as="style">
+            <link rel="preload" href="http://example.com/y?b=2" as="style">
+          </head>
+          <body>
+          </body>
+        </html>
+      `);
+  });
+
   it('should add `.mjs` script tags', async () => {
     const { content } = await augmentIndexHtml({
       ...indexGeneratorOptions,
diff --git a/packages/angular_devkit/build_angular/src/utils/index-file/index-html-generator.ts b/packages/angular_devkit/build_angular/src/utils/index-file/index-html-generator.ts
@@ -28,7 +28,7 @@ export interface IndexHtmlGeneratorProcessOptions {
   baseHref: string | undefined;
   outputPath: string;
   files: FileInfo[];
-  hints?: { url: string; mode: HintMode }[];
+  hints?: { url: string; mode: HintMode; as?: string }[];
 }
 
 export interface IndexHtmlGeneratorOptions {

Original file line number	Diff line number	Diff line change
`@@ -45,7 +45,9 @@ export function generateIndexHtml(`
`45`	`45`	`if (value.type === 'script') {`
`46`	`46`	`hints.push({ url: key, mode: 'modulepreload' as const });`
`47`	`47`	`} else if (value.type === 'style') {`
`48`		`- hints.push({ url: key, mode: 'preload' as const });`
	`48`	`+ // Provide an "as" value of "style" to ensure external URLs which may not have a`
	`49`	`+ // file extension are treated as stylesheets.`
	`50`	`+ hints.push({ url: key, mode: 'preload' as const, as: 'style' });`
`49`	`51`	`}`
`50`	`52`	`}`
`51`	`53`	`}`
Original file line number	Diff line number	Diff line change
`@@ -39,7 +39,7 @@ export interface AugmentIndexHtmlOptions {`
`39`	`39`	`entrypoints: Entrypoint[];`
`40`	`40`	`/** Used to set the document default locale */`
`41`	`41`	`lang?: string;`
`42`		`- hints?: { url: string; mode: string }[];`
	`42`	`+ hints?: { url: string; mode: string; as?: string }[];`
`43`	`43`	`}`
`44`	`44`
`45`	`45`	`export interface FileInfo {`
`@@ -152,6 +152,11 @@ export async function augmentIndexHtml(`
`152`	`152`	`case '.css':`
`153`	`153`	`attrs.push('as="style"');`
`154`	`154`	`break;`
	`155`	`+ default:`
	`156`	`+ if (hint.as) {`
	`157`	+ attrs.push(`as="${hint.as}"`);
	`158`	`+ }`
	`159`	`+ break;`
`155`	`160`	`}`
`156`	`161`	`}`
`157`	`162`
Original file line number	Diff line number	Diff line change
`@@ -28,7 +28,7 @@ export interface IndexHtmlGeneratorProcessOptions {`
`28`	`28`	`baseHref: string \| undefined;`
`29`	`29`	`outputPath: string;`
`30`	`30`	`files: FileInfo[];`
`31`		`- hints?: { url: string; mode: HintMode }[];`
	`31`	`+ hints?: { url: string; mode: HintMode; as?: string }[];`
`32`	`32`	`}`
`33`	`33`
`34`	`34`	`export interface IndexHtmlGeneratorOptions {`