@percy/core 1.31.6-beta.5 → 1.31.6-beta.7

package/dist/config.js

@@ -508,6 +508,24 @@ export const configSchema = {
             default: true
           }
         }
+      },
+      fontDomains: {
+        type: 'array',
+        default: [],
+        items: {
+          type: 'string',
+          allOf: [{
+            not: {
+              pattern: '[^/]/'
+            },
+            error: 'must not include a pathname'
+          }, {
+            not: {
+              pattern: '^([a-zA-Z]+:)?//'
+            },
+            error: 'must not include a protocol'
+          }]
+        }
       }
     }
   }
@@ -635,6 +653,9 @@ export const snapshotSchema = {
             },
             scrollToBottom: {
               $ref: '/config/discovery#/properties/scrollToBottom'
+            },
+            fontDomains: {
+              $ref: '/config/discovery#/properties/fontDomains'
             }
           }
         }

package/dist/discovery.js

@@ -492,6 +492,7 @@ export function createDiscoveryQueue(percy) {
           requestHeaders: snapshot.discovery.requestHeaders,
           authorization: snapshot.discovery.authorization,
           userAgent: snapshot.discovery.userAgent,
+          fontDomains: snapshot.discovery.fontDomains,
           captureMockedServiceWorker: snapshot.discovery.captureMockedServiceWorker,
           meta: {
             ...snapshot.meta,

package/dist/network.js

@@ -1,7 +1,7 @@
 import { request as makeRequest } from '@percy/client/utils';
 import logger from '@percy/logger';
 import mime from 'mime-types';
-import { DefaultMap, createResource, hostnameMatches, normalizeURL, waitFor, decodeAndEncodeURLWithLogging } from './utils.js';
+import { DefaultMap, createResource, hostnameMatches, normalizeURL, waitFor, decodeAndEncodeURLWithLogging, handleIncorrectFontMimeType } from './utils.js';
 const MAX_RESOURCE_SIZE = 25 * 1024 ** 2 * 0.63; // 25MB, 0.63 factor for accounting for base64 encoding
 const ALLOWED_STATUSES = [200, 201, 301, 302, 304, 307, 308];
 const ALLOWED_RESOURCES = ['Document', 'Stylesheet', 'Image', 'Media', 'Font', 'Other'];
@@ -38,6 +38,7 @@ export class Network {
     this.userAgent = options.userAgent ??
     // by default, emulate a non-headless browser
     page.session.browser.version.userAgent.replace('Headless', '');
+    this.fontDomains = options.fontDomains || [];
     this.intercept = options.intercept;
     this.meta = options.meta;
     this._initializeNetworkIdleWaitTimeout();
@@ -516,6 +517,7 @@ async function saveResponseResource(network, request, session) {
   let resource = network.intercept.getResource(url);
   if (!resource || !resource.root && !resource.provided && disableCache) {
     try {
+      var _mimeType;
       // Don't rename the below log line as it is used in getting network logs in api
       log.debug(`Processing resource: ${url}`, meta);
       let shouldCapture = response && hostnameMatches(allowedHostnames, url);
@@ -546,11 +548,14 @@ async function saveResponseResource(network, request, session) {
       // ensure the mimetype is correct for text/plain responses
       response.mimeType === 'text/plain' && detectedMime || response.mimeType;
 
+      // Handle Google Fonts MIME type detection and override
+      mimeType = handleIncorrectFontMimeType(urlObj, mimeType, body, network.fontDomains, meta);
+
       // if we detect a font mime, we dont want to override it as different browsers may behave
       // differently for incorrect mimetype in font response, but we want to treat it as a
       // font anyway as font responses from the browser may not be properly encoded,
       // so request them directly.
-      if (mimeType !== null && mimeType !== void 0 && mimeType.includes('font') || detectedMime && detectedMime.includes('font')) {
+      if ((_mimeType = mimeType) !== null && _mimeType !== void 0 && _mimeType.includes('font') || detectedMime && detectedMime.includes('font')) {
         log.debug('- Requesting asset directly', meta);
         body = await makeDirectRequest(network, request, session);
         log.debug('- Got direct response', meta);

package/dist/snapshot.js

@@ -152,7 +152,8 @@ function getSnapshotOptions(options, {
       captureSrcset: config.discovery.captureSrcset,
       userAgent: config.discovery.userAgent,
       retry: config.discovery.retry,
-      scrollToBottom: config.discovery.scrollToBottom
+      scrollToBottom: config.discovery.scrollToBottom,
+      fontDomains: config.discovery.fontDomains
     }
   }, options], (path, prev, next) => {
     var _next, _next2, _next3;

package/dist/utils.js

@@ -26,6 +26,61 @@ export function normalizeURL(url) {
   return `${protocol}//${host}${pathname}${search}`;
 }
 
+/**
+ * Detects font MIME type from file content by checking magic bytes.
+ * Handles string-based signatures (WOFF, OTTO) and binary signatures (TTF).
+ */
+export function detectFontMimeType(buffer) {
+  try {
+    if (!buffer || buffer.length < 4) {
+      return null;
+    }
+
+    // Convert the first 4 bytes into two formats for matching:
+    // 1. A lowercase string for text-based signatures (e.g., 'otto')
+    // 2. A hex string for binary/null-byte signatures (e.g., '00010000')
+    const headerString = buffer.slice(0, 4).toString('binary').toLowerCase();
+    const headerHex = buffer.slice(0, 4).toString('hex');
+    const mimeMap = {
+      woff: 'font/woff',
+      wof2: 'font/woff2',
+      otto: 'font/otf',
+      '00010000': 'font/ttf'
+    };
+
+    // Return the match if it exists in our map for either format
+    return mimeMap[headerString] || mimeMap[headerHex] || null;
+  } catch (error) {
+    // Fail silently and return null if buffer reading fails
+    return null;
+  }
+}
+const KNOWN_PROBLEMATIC_FONT_DOMAINS = ['fonts.gstatic.com'];
+function isKnownFontDomain(hostname, userConfiguredFontDomains = []) {
+  return KNOWN_PROBLEMATIC_FONT_DOMAINS.includes(hostname) || userConfiguredFontDomains.includes(hostname);
+}
+
+// Handles Inncorrect Fonts MIME type detection and override
+// Google Fonts sometimes returns font files with text/html mime type
+// This function detects the actual font format from the file content
+export function handleIncorrectFontMimeType(urlObj, mimeType, body, userConfiguredFontDomains, meta) {
+  // Check if this is a Google Fonts request with incorrect mime type
+  const log = logger('core:utils');
+  let isFontDomain = isKnownFontDomain(urlObj.hostname, userConfiguredFontDomains);
+  if (isFontDomain && mimeType === 'text/html') {
+    const detectedFontMime = detectFontMimeType(body);
+    if (detectedFontMime) {
+      mimeType = detectedFontMime;
+      log.warn(`- Detected Google Font as ${detectedFontMime} from content, overriding mime type`, meta);
+    } else {
+      // Fallback to generic font mime type if we can't detect the specific format
+      mimeType = 'application/font-woff2';
+      log.warn('- Google Font detected but format unclear, treating as font', meta);
+    }
+  }
+  return mimeType;
+}
+
 /* istanbul ignore next: tested, but coverage is stripped */
 // Returns the body for automateScreenshot in structure
 export function percyAutomateRequestHandler(req, percy) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@percy/core",
-  "version": "1.31.6-beta.5",
+  "version": "1.31.6-beta.7",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -43,12 +43,12 @@
     "test:types": "tsd"
   },
   "dependencies": {
-    "@percy/client": "1.31.6-beta.5",
-    "@percy/config": "1.31.6-beta.5",
-    "@percy/dom": "1.31.6-beta.5",
-    "@percy/logger": "1.31.6-beta.5",
-    "@percy/monitoring": "1.31.6-beta.5",
-    "@percy/webdriver-utils": "1.31.6-beta.5",
+    "@percy/client": "1.31.6-beta.7",
+    "@percy/config": "1.31.6-beta.7",
+    "@percy/dom": "1.31.6-beta.7",
+    "@percy/logger": "1.31.6-beta.7",
+    "@percy/monitoring": "1.31.6-beta.7",
+    "@percy/webdriver-utils": "1.31.6-beta.7",
     "content-disposition": "^0.5.4",
     "cross-spawn": "^7.0.3",
     "extract-zip": "^2.0.1",
@@ -61,5 +61,5 @@
     "ws": "^8.17.1",
     "yaml": "^2.4.1"
   },
-  "gitHead": "fbcc28ce81ae902a32a5856c46efa0de6ae19300"
+  "gitHead": "55a4ac55d8a7a41f2d66bc5887ce8631a8e5ffd7"
 }