@turntrout/subfont 1.5.0 → 1.6.0

package/lib/subsetFonts.js

@@ -7,6 +7,7 @@ const compileQuery = require('assetgraph/lib/compileQuery');
 const findCustomPropertyDefinitions = require('./findCustomPropertyDefinitions');
 const extractReferencedCustomPropertyNames = require('./extractReferencedCustomPropertyNames');
 const injectSubsetDefinitions = require('./injectSubsetDefinitions');
+const { makePhaseTracker } = require('./progress');
 const cssFontParser = require('css-font-parser');
 const cssListHelpers = require('css-list-helpers');
 const unquote = require('./unquote');
@@ -66,6 +67,16 @@ function escapeJsStringLiteral(str) {
     .replace(/</g, '\\x3c');
 }
 
+function countUniqueFontUrls(htmlOrSvgAssetTextsWithProps) {
+  const urls = new Set();
+  for (const item of htmlOrSvgAssetTextsWithProps) {
+    for (const fu of item.fontUsages) {
+      if (fu.fontUrl) urls.add(fu.fontUrl);
+    }
+  }
+  return urls.size;
+}
+
 function asyncLoadStyleRelationWithFallback(
   htmlOrSvgAsset,
   originalRelation,
@@ -396,18 +407,14 @@ async function subsetFonts(
   const subsetUrl = urltools.ensureTrailingSlash(assetGraph.root + subsetPath);
 
   const timings = {};
+  const trackPhase = makePhaseTracker(console, debug);
 
-  let phaseStart = Date.now();
+  const applySourceMapsPhase = trackPhase('applySourceMaps');
   if (sourceMaps) {
     await assetGraph.applySourceMaps({ type: 'Css' });
   }
-  timings.applySourceMaps = Date.now() - phaseStart;
-  if (debug && console)
-    console.log(
-      `[subfont timing] applySourceMaps: ${timings.applySourceMaps}ms`
-    );
+  timings.applySourceMaps = applySourceMapsPhase.end();
 
-  phaseStart = Date.now();
   // Only run Google Fonts populate if there are actually Google Fonts
   // references in the graph. This avoids ~30s of wasted work on sites
   // that use only self-hosted fonts.
@@ -416,6 +423,7 @@ async function subsetFonts(
       to: { url: { $regex: googleFontsCssUrlRegex } },
     }).length > 0;
 
+  const googlePopulatePhase = trackPhase('populate (google fonts)');
   if (hasGoogleFonts) {
     await assetGraph.populate({
       followRelations: {
@@ -435,11 +443,9 @@ async function subsetFonts(
       },
     });
   }
-  timings['populate (google fonts)'] = Date.now() - phaseStart;
-  if (debug && console)
-    console.log(
-      `[subfont timing] populate (google fonts): ${timings['populate (google fonts)']}ms${hasGoogleFonts ? '' : ' (skipped, no Google Fonts found)'}`
-    );
+  timings['populate (google fonts)'] = googlePopulatePhase.end(
+    hasGoogleFonts ? null : 'skipped, no Google Fonts found'
+  );
 
   const htmlOrSvgAssets = assetGraph.findAssets({
     $or: [
@@ -453,11 +459,9 @@ async function subsetFonts(
     ],
   });
 
-  if (debug && console)
-    console.log(
-      `[subfont timing] Starting collectTextsByPage for ${htmlOrSvgAssets.length} pages`
-    );
-  const collectStart = Date.now();
+  const collectPhase = trackPhase(
+    `collectTextsByPage (${htmlOrSvgAssets.length} pages)`
+  );
   const {
     htmlOrSvgAssetTextsWithProps,
     fontFaceDeclarationsByHtmlOrSvgAsset,
@@ -470,14 +474,10 @@ async function subsetFonts(
     concurrency,
     chromeArgs,
   });
-  timings.collectTextsByPage = Date.now() - collectStart;
+  timings.collectTextsByPage = collectPhase.end();
   timings.collectTextsByPageDetails = subTimings;
-  if (debug && console)
-    console.log(
-      `[subfont timing] collectTextsByPage finished in ${timings.collectTextsByPage}ms`
-    );
 
-  phaseStart = Date.now();
+  const omitFallbacksPhase = trackPhase('omitFallbacks processing');
 
   const potentiallyOrphanedAssets = new Set();
   if (omitFallbacks) {
@@ -498,12 +498,9 @@ async function subsetFonts(
     }
   }
 
-  timings['omitFallbacks processing'] = Date.now() - phaseStart;
-  if (debug && console)
-    console.log(
-      `[subfont timing] omitFallbacks processing: ${timings['omitFallbacks processing']}ms`
-    );
-  phaseStart = Date.now();
+  timings['omitFallbacks processing'] = omitFallbacksPhase.end();
+
+  const codepointPhase = trackPhase('codepoint generation');
 
   if (fontDisplay) {
     for (const htmlOrSvgAssetTextWithProps of htmlOrSvgAssetTextsWithProps) {
@@ -602,12 +599,7 @@ async function subsetFonts(
     }
   }
 
-  timings['codepoint generation'] = Date.now() - phaseStart;
-  if (debug && console)
-    console.log(
-      `[subfont timing] codepoint generation: ${timings['codepoint generation']}ms`
-    );
-  phaseStart = Date.now();
+  timings['codepoint generation'] = codepointPhase.end();
 
   if (onlyInfo) {
     return {
@@ -625,43 +617,38 @@ async function subsetFonts(
     };
   }
 
+  const variationPhase = trackPhase('variation axis usage');
   const { seenAxisValuesByFontUrlAndAxisName } = getVariationAxisUsage(
     htmlOrSvgAssetTextsWithProps,
     parseFontWeightRange,
     parseFontStretchRange
   );
-
-  timings['variation axis usage'] = Date.now() - phaseStart;
-  if (debug && console)
-    console.log(
-      `[subfont timing] variation axis usage: ${timings['variation axis usage']}ms`
-    );
-  phaseStart = Date.now();
+  timings['variation axis usage'] = variationPhase.end();
 
   // Generate subsets:
+  if (console) {
+    const uniqueFontUrls = countUniqueFontUrls(htmlOrSvgAssetTextsWithProps);
+    if (uniqueFontUrls > 0) {
+      console.log(
+        `  Subsetting ${uniqueFontUrls} unique font file${uniqueFontUrls === 1 ? '' : 's'}...`
+      );
+    }
+  }
+  const subsetPhase = trackPhase('getSubsetsForFontUsage');
   await getSubsetsForFontUsage(
     assetGraph,
     htmlOrSvgAssetTextsWithProps,
     formats,
     seenAxisValuesByFontUrlAndAxisName,
     cacheDir,
-    console
+    console,
+    debug
   );
+  timings.getSubsetsForFontUsage = subsetPhase.end();
 
-  timings.getSubsetsForFontUsage = Date.now() - phaseStart;
-  if (debug && console)
-    console.log(
-      `[subfont timing] getSubsetsForFontUsage: ${timings.getSubsetsForFontUsage}ms`
-    );
-  phaseStart = Date.now();
-
+  const warnGlyphsPhase = trackPhase('warnAboutMissingGlyphs');
   await warnAboutMissingGlyphs(htmlOrSvgAssetTextsWithProps, assetGraph);
-  timings.warnAboutMissingGlyphs = Date.now() - phaseStart;
-  if (debug && console)
-    console.log(
-      `[subfont timing] warnAboutMissingGlyphs: ${timings.warnAboutMissingGlyphs}ms`
-    );
-  phaseStart = Date.now();
+  timings.warnAboutMissingGlyphs = warnGlyphsPhase.end();
 
   // Insert subsets:
 
@@ -711,6 +698,9 @@ async function subsetFonts(
     index.get(from).push(relation);
   }
 
+  const insertPhase = trackPhase(
+    `insert subsets loop (${htmlOrSvgAssetTextsWithProps.length} pages)`
+  );
   let numFontUsagesWithSubset = 0;
   for (const {
     htmlOrSvgAsset,
@@ -845,17 +835,13 @@ async function subsetFonts(
     }
   }
 
-  timings['insert subsets loop'] = Date.now() - phaseStart;
-  if (debug && console)
-    console.log(
-      `[subfont timing] insert subsets loop: ${timings['insert subsets loop']}ms`
-    );
-  phaseStart = Date.now();
+  timings['insert subsets loop'] = insertPhase.end();
 
   if (numFontUsagesWithSubset === 0) {
     return { fontInfo: [], timings };
   }
 
+  const lazyFallbackPhase = trackPhase('lazy load fallback CSS');
   const relationsToRemove = new Set();
 
   // Lazy load the original @font-face declarations of self-hosted fonts (unless omitFallbacks)
@@ -956,12 +942,9 @@ async function subsetFonts(
     relationsToRemove.add(fallbackHtmlStyle);
   }
 
-  timings['lazy load fallback CSS'] = Date.now() - phaseStart;
-  if (debug && console)
-    console.log(
-      `[subfont timing] lazy load fallback CSS: ${timings['lazy load fallback CSS']}ms`
-    );
-  phaseStart = Date.now();
+  timings['lazy load fallback CSS'] = lazyFallbackPhase.end();
+
+  const removeFontFacePhase = trackPhase('remove original @font-face');
 
   // Remove the original @font-face blocks, and don't leave behind empty stylesheets:
   const maybeEmptyCssAssets = new Set();
@@ -984,12 +967,9 @@ async function subsetFonts(
     }
   }
 
-  timings['remove original @font-face'] = Date.now() - phaseStart;
-  if (debug && console)
-    console.log(
-      `[subfont timing] remove original @font-face: ${timings['remove original @font-face']}ms`
-    );
-  phaseStart = Date.now();
+  timings['remove original @font-face'] = removeFontFacePhase.end();
+
+  const googleCleanupPhase = trackPhase('Google Fonts + cleanup');
 
   // Async load Google Web Fonts CSS
   const googleFontStylesheets = assetGraph.findAssets({
@@ -1067,12 +1047,9 @@ async function subsetFonts(
     relation.detach();
   }
 
-  timings['Google Fonts + cleanup'] = Date.now() - phaseStart;
-  if (debug && console)
-    console.log(
-      `[subfont timing] Google Fonts + cleanup: ${timings['Google Fonts + cleanup']}ms`
-    );
-  phaseStart = Date.now();
+  timings['Google Fonts + cleanup'] = googleCleanupPhase.end();
+
+  const injectPhase = trackPhase('inject subset font-family into CSS/SVG');
 
   // Use subsets in font-family:
 
@@ -1220,13 +1197,9 @@ async function subsetFonts(
     }
   }
 
-  timings['inject subset font-family'] = Date.now() - phaseStart;
-  if (debug && console)
-    console.log(
-      `[subfont timing] inject subset font-family into CSS/SVG: ${timings['inject subset font-family']}ms`
-    );
-  phaseStart = Date.now();
+  timings['inject subset font-family'] = injectPhase.end();
 
+  const orphanCleanupPhase = trackPhase('source maps + orphan cleanup');
   if (sourceMaps) {
     await assetGraph.serializeSourceMaps(undefined, {
       type: 'Css',
@@ -1254,11 +1227,7 @@ async function subsetFonts(
     }
   }
 
-  timings['source maps + orphan cleanup'] = Date.now() - phaseStart;
-  if (debug && console)
-    console.log(
-      `[subfont timing] source maps + orphan cleanup: ${timings['source maps + orphan cleanup']}ms`
-    );
+  timings['source maps + orphan cleanup'] = orphanCleanupPhase.end();
 
   // Hand out some useful info about the detected subsets:
   return {

package/lib/subsetGeneration.js

@@ -118,9 +118,11 @@ async function getSubsetsForFontUsage(
   formats,
   seenAxisValuesByFontUrlAndAxisName,
   cacheDir = null,
-  console = null
+  console = null,
+  debug = false
 ) {
   const diskCache = cacheDir ? new SubsetDiskCache(cacheDir, console) : null;
+  const cacheStats = diskCache ? { hits: 0, misses: 0 } : null;
 
   // Collect one canonical fontUsage per font URL
   const canonicalFontUsageByUrl = new Map();
@@ -240,8 +242,10 @@ async function getSubsetsForFontUsage(
           const cachedResult = diskCache ? await diskCache.get(cacheKey) : null;
 
           if (cachedResult) {
+            if (cacheStats) cacheStats.hits++;
             subsetPromiseMap.set(promiseId, Promise.resolve(cachedResult));
           } else {
+            if (cacheStats) cacheStats.misses++;
             const subsetCall = subsetFontWithGlyphs(fontBuffer, text, {
               targetFormat,
               glyphIds: featureGlyphIds,
@@ -263,6 +267,7 @@ async function getSubsetsForFontUsage(
                 .catch((err) => {
                   err.asset = err.asset || fontAssetsByUrl.get(fontUrl);
                   assetGraph.warn(err);
+                  return null;
                 })
             );
           }
@@ -278,6 +283,14 @@ async function getSubsetsForFontUsage(
     )
   );
 
+  if (cacheStats && debug && console) {
+    const total = cacheStats.hits + cacheStats.misses;
+    const pct = total > 0 ? Math.round((cacheStats.hits * 100) / total) : 0;
+    console.log(
+      `[subfont timing]   subset disk cache: ${cacheStats.hits} hit${cacheStats.hits === 1 ? '' : 's'}, ${cacheStats.misses} miss${cacheStats.misses === 1 ? '' : 'es'} (${pct}% hit rate)`
+    );
+  }
+
   // Assign subset results to canonical font usages
   for (const [, fontUsage] of canonicalFontUsageByUrl) {
     const info = subsetInfoByFontUrl.get(fontUsage.fontUrl);

package/lib/variationAxes.js

@@ -8,26 +8,11 @@ const standardVariationAxes = new Set(['wght', 'wdth', 'ital', 'slnt', 'opsz']);
 // CSS maps oblique to slnt -14.
 const DEFAULT_OBLIQUE_SLNT = -14;
 
-// When no opsz values are determined from font-size or font-variation-settings,
-// the axis is pinned to its default value rather than preserving the full range,
-// which can significantly bloat variable font subsets.
+// When no opsz values are determined from font-variation-settings, the axis is
+// pinned to its default value rather than preserving the full range, which can
+// significantly bloat variable font subsets.
 const ignoredVariationAxes = new Set();
 
-// Parse a CSS font-size value to a numeric px value.
-// Returns the number if the value is in absolute units (px, pt), NaN otherwise.
-// Relative units (em, rem, %, vw, etc.) cannot be resolved without DOM context.
-const PX_PER_PT = 4 / 3;
-function parseFontSizePx(value) {
-  if (typeof value === 'number') return value;
-  if (typeof value !== 'string') return NaN;
-  const match = value.match(/^([\d.]+)(px|pt)?$/i);
-  if (!match) return NaN;
-  const num = parseFloat(match[1]);
-  if (Number.isNaN(num) || num <= 0) return NaN;
-  const unit = (match[2] || 'px').toLowerCase();
-  return unit === 'pt' ? num * PX_PER_PT : num;
-}
-
 function clamp(value, min, max) {
   return Math.min(Math.max(value, min), max);
 }
@@ -71,7 +56,6 @@ function getVariationAxisUsage(
       fontWeights,
       fontStretches,
       fontVariationSettings,
-      fontSizes,
       props,
     } of fontUsages) {
       if (seenFontUrls.has(fontUrl)) continue;
@@ -113,18 +97,6 @@ function getVariationAxisUsage(
         );
       }
 
-      // Map font-size to the opsz axis. With font-optical-sizing: auto
-      // (the CSS default), browsers set opsz = font-size in px.
-      // Only absolute units (px, pt) can be resolved without DOM context.
-      if (fontSizes) {
-        for (const fontSize of fontSizes) {
-          const px = parseFontSizePx(fontSize);
-          if (!Number.isNaN(px)) {
-            noteUsedValue(fontUrl, 'opsz', px);
-          }
-        }
-      }
-
       for (const fontVariationSettingsValue of fontVariationSettings) {
         for (const [axisName, axisValue] of parseFontVariationSettings(
           fontVariationSettingsValue
@@ -195,7 +167,6 @@ async function getVariationAxisBounds(
 module.exports = {
   standardVariationAxes,
   ignoredVariationAxes,
-  parseFontSizePx,
   renderNumberRange,
   getVariationAxisUsage,
   getVariationAxisBounds,

package/lib/wasmQueue.js

@@ -5,7 +5,10 @@
 let queue = Promise.resolve();
 
 function enqueue(fn) {
-  return (queue = queue.then(fn, fn));
+  return (queue = queue.then(
+    () => fn(),
+    () => fn()
+  ));
 }
 
 module.exports = enqueue;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@turntrout/subfont",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "Automatically subset web fonts to only the characters used on your pages. Fork of Munter/subfont with modern defaults.",
   "engines": {
     "node": ">=18.0.0"
@@ -63,6 +63,7 @@
     "postcss-value-parser": "^4.0.2",
     "pretty-bytes": "^5.1.0",
     "puppeteer-core": "^24.39.1",
+    "sanitize-filename": "^1.6.4",
     "specificity": "^0.4.1",
     "urltools": "^0.4.1",
     "yargs": "^17.7.2"