refactor(@angular-devkit/build-angular): remove WOFF handling from inline-fonts processor

alan-agius4 · filipesilva · commit e82eef924eb1 · 2021-07-30T14:27:07.000+01:00
BREAKING CHANGE:

We remove inlining of Google fonts in WOFF format since IE 11 is no longer supported. Other supported browsers use WOFF2.
diff --git a/packages/angular_devkit/build_angular/src/browser/index.ts b/packages/angular_devkit/build_angular/src/browser/index.ts
@@ -631,7 +631,6 @@ export function buildWebpackBrowser(
                 if (options.index) {
                   spinner.start('Generating index html...');
 
-                  const WOFFSupportNeeded = !buildBrowserFeatures.isFeatureSupported('woff2');
                   const entrypoints = generateEntryPoints({
                     scripts: options.scripts ?? [],
                     styles: options.styles ?? [],
@@ -642,7 +641,6 @@ export function buildWebpackBrowser(
                     entrypoints,
                     deployUrl: options.deployUrl,
                     sri: options.subresourceIntegrity,
-                    WOFFSupportNeeded,
                     optimization: normalizedOptimization,
                     crossOrigin: options.crossOrigin,
                     postTransform: transforms.indexHtml,
diff --git a/packages/angular_devkit/build_angular/src/browser/specs/font-optimization_spec.ts b/packages/angular_devkit/build_angular/src/browser/specs/font-optimization_spec.ts
@@ -40,24 +40,13 @@ describe('Browser Builder font optimization', () => {
     expect(html).toContain(`font-family: 'Roboto'`);
   });
 
-  it('should not add woff when IE support is not needed', async () => {
+  it('should not add woff', async () => {
     const { files } = await browserBuild(architect, host, target, overrides);
     const html = await files['index.html'];
     expect(html).toContain(`format('woff2');`);
     expect(html).not.toContain(`format('woff');`);
   });
 
-  it('should add woff when IE support is needed', async () => {
-    host.writeMultipleFiles({
-      '.browserslistrc': 'IE 11',
-    });
-
-    const { files } = await browserBuild(architect, host, target, overrides);
-    const html = await files['index.html'];
-    expect(html).toContain(`format('woff2');`);
-    expect(html).toContain(`format('woff');`);
-  });
-
   it('should remove comments and line breaks when styles optimization is true', async () => {
     const { files } = await browserBuild(architect, host, target, {
       optimization: {
diff --git a/packages/angular_devkit/build_angular/src/dev-server/index.ts b/packages/angular_devkit/build_angular/src/dev-server/index.ts
@@ -328,7 +328,6 @@ export function serveWebpackBrowser(
             sri: browserOptions.subresourceIntegrity,
             postTransform: transforms.indexHtml,
             optimization: normalizeOptimization(browserOptions.optimization),
-            WOFFSupportNeeded: !buildBrowserFeatures.isFeatureSupported('woff2'),
             crossOrigin: browserOptions.crossOrigin,
             lang: locale,
           }),
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
@@ -36,7 +36,6 @@ export interface IndexHtmlGeneratorOptions {
   postTransform?: IndexHtmlTransform;
   crossOrigin?: CrossOriginValue;
   optimization?: NormalizedOptimizationOptions;
-  WOFFSupportNeeded: boolean;
 }
 
 export type IndexHtmlTransform = (content: string) => Promise<string>;
@@ -126,7 +125,6 @@ function augmentIndexHtmlPlugin(generator: IndexHtmlGenerator): IndexHtmlGenerat
 function inlineFontsPlugin({ options }: IndexHtmlGenerator): IndexHtmlGeneratorPlugin {
   const inlineFontsProcessor = new InlineFontsProcessor({
     minify: options.optimization?.styles.minify,
-    WOFFSupportNeeded: options.WOFFSupportNeeded,
   });
 
   return async (html) => inlineFontsProcessor.process(html);
diff --git a/packages/angular_devkit/build_angular/src/utils/index-file/inline-fonts.ts b/packages/angular_devkit/build_angular/src/utils/index-file/inline-fonts.ts
@@ -20,28 +20,19 @@ const cacheFontsPath: string | undefined = cachingDisabled
   : findCachePath('angular-build-fonts');
 const packageVersion = require('../../../package.json').version;
 
-const enum UserAgent {
-  Chrome = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.121 Safari/537.36',
-  IE = 'Mozilla/5.0 (Windows NT 10.0; Trident/7.0; rv:11. 0) like Gecko',
-}
-
 interface FontProviderDetails {
   preconnectUrl: string;
-  seperateRequestForWOFF: boolean;
 }
 
 export interface InlineFontsOptions {
   minify?: boolean;
-  WOFFSupportNeeded: boolean;
 }
 
 const SUPPORTED_PROVIDERS: Record<string, FontProviderDetails> = {
   'fonts.googleapis.com': {
-    seperateRequestForWOFF: true,
     preconnectUrl: 'https://fonts.gstatic.com',
   },
   'use.typekit.net': {
-    seperateRequestForWOFF: false,
     preconnectUrl: 'https://use.typekit.net',
   },
 };
@@ -160,8 +151,8 @@ export class InlineFontsProcessor {
     return transformedContent;
   }
 
-  private async getResponse(url: URL, userAgent: UserAgent): Promise<string> {
-    const key = `${packageVersion}|${url}|${userAgent}`;
+  private async getResponse(url: URL): Promise<string> {
+    const key = `${packageVersion}|${url}`;
 
     if (cacheFontsPath) {
       const entry = await cacache.get.info(cacheFontsPath, key);
@@ -186,7 +177,8 @@ export class InlineFontsProcessor {
             agent,
             rejectUnauthorized: false,
             headers: {
-              'user-agent': userAgent,
+              'user-agent':
+                'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.121 Safari/537.36',
             },
           },
           (res) => {
@@ -226,13 +218,7 @@ export class InlineFontsProcessor {
       return undefined;
     }
 
-    // The order IE -> Chrome is important as otherwise Chrome will load woff1.
-    let cssContent = '';
-    if (this.options.WOFFSupportNeeded && provider.seperateRequestForWOFF) {
-      cssContent += await this.getResponse(url, UserAgent.IE);
-    }
-
-    cssContent += await this.getResponse(url, UserAgent.Chrome);
+    let cssContent = await this.getResponse(url);
 
     if (this.options.minify) {
       cssContent = cssContent
diff --git a/packages/angular_devkit/build_angular/src/utils/index-file/inline-fonts_spec.ts b/packages/angular_devkit/build_angular/src/utils/index-file/inline-fonts_spec.ts
@@ -20,7 +20,6 @@ describe('InlineFontsProcessor', () => {
 
     it('works with // protocol', async () => {
       const inlineFontsProcessor = new InlineFontsProcessor({
-        WOFFSupportNeeded: false,
         minify: false,
       });
 
@@ -31,7 +30,6 @@ describe('InlineFontsProcessor', () => {
     it('should inline supported fonts and icons in HTML', async () => {
       const inlineFontsProcessor = new InlineFontsProcessor({
         minify: false,
-        WOFFSupportNeeded: false,
       });
 
       const html = await inlineFontsProcessor.process(`
@@ -56,7 +54,6 @@ describe('InlineFontsProcessor', () => {
     it('should inline multiple fonts from a single request with minification enabled', async () => {
       const inlineFontsProcessor = new InlineFontsProcessor({
         minify: true,
-        WOFFSupportNeeded: false,
       });
 
       const html = await inlineFontsProcessor.process(`
@@ -76,28 +73,15 @@ describe('InlineFontsProcessor', () => {
 
     it('works with http protocol', async () => {
       const inlineFontsProcessor = new InlineFontsProcessor({
-        WOFFSupportNeeded: false,
         minify: false,
       });
 
       const html = await inlineFontsProcessor.process(content.replace('https://', 'http://'));
       expect(html).toContain(`format('woff2');`);
     });
 
-    it('should include WOFF1 definitions when `WOFF1SupportNeeded` is true', async () => {
-      const inlineFontsProcessor = new InlineFontsProcessor({
-        WOFFSupportNeeded: true,
-        minify: false,
-      });
-
-      const html = await inlineFontsProcessor.process(content);
-      expect(html).toContain(`format('woff2');`);
-      expect(html).toContain(`format('woff');`);
-    });
-
     it('should remove comments and line breaks when `minifyInlinedCSS` is true', async () => {
       const inlineFontsProcessor = new InlineFontsProcessor({
-        WOFFSupportNeeded: false,
         minify: true,
       });
 
@@ -108,7 +92,6 @@ describe('InlineFontsProcessor', () => {
 
     it('should add preconnect hint', async () => {
       const inlineFontsProcessor = new InlineFontsProcessor({
-        WOFFSupportNeeded: true,
         minify: false,
       });
 
@@ -128,21 +111,8 @@ describe('InlineFontsProcessor', () => {
     <body></body>
   </html>`;
 
-    it('should include WOFF1 definitions when `WOFF1SupportNeeded` is true', async () => {
-      const inlineFontsProcessor = new InlineFontsProcessor({
-        WOFFSupportNeeded: true,
-        minify: false,
-      });
-
-      const html = await inlineFontsProcessor.process(content);
-      expect(html).not.toContain('href="https://use.typekit.net/plm1izr.css"');
-      expect(html).toContain(`format("woff2")`);
-      expect(html).toContain(`format("woff")`);
-    });
-
     it('should add preconnect hint', async () => {
       const inlineFontsProcessor = new InlineFontsProcessor({
-        WOFFSupportNeeded: true,
         minify: false,
       });
 
