subfont 6.8.0 → 6.9.0

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+### v6.9.0 (2022-08-07)
+
+- [Update font-tracer to ^3.3.0 Adds support for tracing ::marker, fixes \#166](https://github.com/Munter/subfont/commit/e46c79bac9cb3e62c70deb357823b7963114863b) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
+- [Move some code into a collectTextsByPage function](https://github.com/Munter/subfont/commit/1dff3819fb80793f23a3cc37f9ff58bafffa4efc) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
+- [Move the missing glyph detection to a function](https://github.com/Munter/subfont/commit/38bf36eba4370ecdbc777cb2457696b9bc7c7d1c) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
+- [Fix typo causing regexp to not be matched correctly](https://github.com/Munter/subfont/commit/05137708b5c48af305f3119deb836b1cd9fed683) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
+- [Remove delayed minification of CSS, seems like it's no longer necessary](https://github.com/Munter/subfont/commit/b98976b24c3a859ffbdd2a43f9f05e5048175f5a) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
+
 ### v6.8.0 (2022-07-28)
 
 - [Update assetgraph to ^7.8.1](https://github.com/Munter/subfont/commit/888a97912f98bd937a53b7bec0f39d50ddc96023) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))

package/lib/subsetFonts.js

@@ -574,62 +574,104 @@ function cssAssetIsEmpty(cssAsset) {
   );
 }
 
-async function subsetFonts(
-  assetGraph,
-  {
-    formats = ['woff2', 'woff'],
-    subsetPath = 'subfont/',
-    omitFallbacks = false,
-    inlineCss,
-    fontDisplay,
-    hrefType = 'rootRelative',
-    onlyInfo,
-    dynamic,
-    console = global.console,
-    text,
-  } = {}
-) {
-  if (!validFontDisplayValues.includes(fontDisplay)) {
-    fontDisplay = undefined;
+function warnAboutMissingGlyphs(htmlOrSvgAssetTextsWithProps, assetGraph) {
+  const missingGlyphsErrors = [];
+
+  for (const {
+    htmlOrSvgAsset,
+    fontUsages,
+    accumulatedFontFaceDeclarations,
+  } of htmlOrSvgAssetTextsWithProps) {
+    for (const fontUsage of fontUsages) {
+      if (fontUsage.subsets) {
+        const characterSet = fontkit.create(
+          Object.values(fontUsage.subsets)[0]
+        ).characterSet;
+
+        let missedAny = false;
+        for (const char of [...fontUsage.pageText]) {
+          // Turns out that browsers don't mind that these are missing:
+          if (char === '\t' || char === '\n') {
+            continue;
+          }
+
+          const codePoint = char.codePointAt(0);
+
+          const isMissing = !characterSet.includes(codePoint);
+
+          if (isMissing) {
+            let location;
+            const charIdx = htmlOrSvgAsset.text.indexOf(char);
+
+            if (charIdx === -1) {
+              location = `${htmlOrSvgAsset.urlOrDescription} (generated content)`;
+            } else {
+              const position = new LinesAndColumns(
+                htmlOrSvgAsset.text
+              ).locationForIndex(charIdx);
+              location = `${htmlOrSvgAsset.urlOrDescription}:${
+                position.line + 1
+              }:${position.column + 1}`;
+            }
+
+            missingGlyphsErrors.push({
+              codePoint,
+              char,
+              htmlOrSvgAsset,
+              fontUsage,
+              location,
+            });
+            missedAny = true;
+          }
+        }
+        if (missedAny) {
+          const fontFaces = accumulatedFontFaceDeclarations.filter((fontFace) =>
+            fontUsage.fontFamilies.has(fontFace['font-family'])
+          );
+          for (const fontFace of fontFaces) {
+            const cssFontFaceSrc = fontFace.relations[0];
+            const fontFaceDeclaration = cssFontFaceSrc.node;
+            if (
+              !fontFaceDeclaration.some((node) => node.prop === 'unicode-range')
+            ) {
+              fontFaceDeclaration.append({
+                prop: 'unicode-range',
+                value: unicodeRange(fontUsage.codepoints.original),
+              });
+              cssFontFaceSrc.from.markDirty();
+            }
+          }
+        }
+      }
+    }
   }
 
-  const htmlOrSvgAssetTextsWithProps = [];
-  const subsetUrl = urltools.ensureTrailingSlash(assetGraph.root + subsetPath);
+  if (missingGlyphsErrors.length) {
+    const errorLog = missingGlyphsErrors.map(
+      ({ char, fontUsage, location }) =>
+        `- \\u{${char.codePointAt(0).toString(16)}} (${char}) in font-family '${
+          fontUsage.props['font-family']
+        }' (${fontUsage.props['font-weight']}/${
+          fontUsage.props['font-style']
+        }) at ${location}`
+    );
 
-  await assetGraph.applySourceMaps({ type: 'Css' });
+    const message = `Missing glyph fallback detected.
+When your primary webfont doesn't contain the glyphs you use, browsers that don't support unicode-range will load your fallback fonts, which will be a potential waste of bandwidth.
+These glyphs are used on your site, but they don't exist in the font you applied to them:`;
 
-  await assetGraph.populate({
-    followRelations: {
-      $or: [
-        {
-          to: {
-            url: googleFontsCssUrlRegex,
-          },
-        },
-        {
-          type: 'CssFontFaceSrc',
-          from: {
-            url: googleFontsCssUrlRegex,
-          },
-        },
-      ],
-    },
-  });
+    assetGraph.info(new Error(`${message}\n${errorLog.join('\n')}`));
+  }
+}
 
-  // Collect texts by page
+async function collectTextsByPage(
+  assetGraph,
+  htmlOrSvgAssets,
+  { text, console, dynamic = false } = {}
+) {
+  const htmlOrSvgAssetTextsWithProps = [];
 
   const memoizedGetCssRulesByProperty = memoizeSync(getCssRulesByProperty);
-  const htmlOrSvgAssets = assetGraph.findAssets({
-    $or: [
-      {
-        type: 'Html',
-        isInline: false,
-      },
-      {
-        type: 'Svg',
-      },
-    ],
-  });
   const traversalRelationQuery = {
     $or: [
       {
@@ -644,12 +686,7 @@ async function subsetFonts(
     ],
   };
 
-  // Keep track of the injected CSS assets that should eventually be minified
-  // Minifying them along the way currently doesn't work because some of the
-  // manipulation is sensitive to the exact text contents. We should fix that.
-  const subsetFontsToBeMinified = new Set();
   const fontFaceDeclarationsByHtmlOrSvgAsset = new Map();
-  const potentiallyOrphanedAssets = new Set();
 
   const headlessBrowser = dynamic && new HeadlessBrowser({ console });
   const globalTextByProps = [];
@@ -774,7 +811,72 @@ async function subsetFonts(
       }
     }
   }
+  return { htmlOrSvgAssetTextsWithProps, fontFaceDeclarationsByHtmlOrSvgAsset };
+}
 
+async function subsetFonts(
+  assetGraph,
+  {
+    formats = ['woff2', 'woff'],
+    subsetPath = 'subfont/',
+    omitFallbacks = false,
+    inlineCss,
+    fontDisplay,
+    hrefType = 'rootRelative',
+    onlyInfo,
+    dynamic,
+    console = global.console,
+    text,
+  } = {}
+) {
+  if (!validFontDisplayValues.includes(fontDisplay)) {
+    fontDisplay = undefined;
+  }
+
+  const subsetUrl = urltools.ensureTrailingSlash(assetGraph.root + subsetPath);
+
+  await assetGraph.applySourceMaps({ type: 'Css' });
+
+  await assetGraph.populate({
+    followRelations: {
+      $or: [
+        {
+          to: {
+            url: { $regex: googleFontsCssUrlRegex },
+          },
+        },
+        {
+          type: 'CssFontFaceSrc',
+          from: {
+            url: { $regex: googleFontsCssUrlRegex },
+          },
+        },
+      ],
+    },
+  });
+
+  const htmlOrSvgAssets = assetGraph.findAssets({
+    $or: [
+      {
+        type: 'Html',
+        isInline: false,
+      },
+      {
+        type: 'Svg',
+      },
+    ],
+  });
+
+  // Collect texts by page
+
+  const { htmlOrSvgAssetTextsWithProps, fontFaceDeclarationsByHtmlOrSvgAsset } =
+    await collectTextsByPage(assetGraph, htmlOrSvgAssets, {
+      text,
+      console,
+      dynamic,
+    });
+
+  const potentiallyOrphanedAssets = new Set();
   if (omitFallbacks) {
     for (const htmlOrSvgAsset of htmlOrSvgAssets) {
       const accumulatedFontFaceDeclarations =
@@ -848,94 +950,7 @@ async function subsetFonts(
     formats
   );
 
-  // Warn about missing glyphs
-  const missingGlyphsErrors = [];
-
-  for (const {
-    htmlOrSvgAsset,
-    fontUsages,
-    accumulatedFontFaceDeclarations,
-  } of htmlOrSvgAssetTextsWithProps) {
-    for (const fontUsage of fontUsages) {
-      if (fontUsage.subsets) {
-        const characterSet = fontkit.create(
-          Object.values(fontUsage.subsets)[0]
-        ).characterSet;
-
-        let missedAny = false;
-        for (const char of [...fontUsage.pageText]) {
-          // Turns out that browsers don't mind that these are missing:
-          if (char === '\t' || char === '\n') {
-            continue;
-          }
-
-          const codePoint = char.codePointAt(0);
-
-          const isMissing = !characterSet.includes(codePoint);
-
-          if (isMissing) {
-            let location;
-            const charIdx = htmlOrSvgAsset.text.indexOf(char);
-
-            if (charIdx === -1) {
-              location = `${htmlOrSvgAsset.urlOrDescription} (generated content)`;
-            } else {
-              const position = new LinesAndColumns(
-                htmlOrSvgAsset.text
-              ).locationForIndex(charIdx);
-              location = `${htmlOrSvgAsset.urlOrDescription}:${
-                position.line + 1
-              }:${position.column + 1}`;
-            }
-
-            missingGlyphsErrors.push({
-              codePoint,
-              char,
-              htmlOrSvgAsset,
-              fontUsage,
-              location,
-            });
-            missedAny = true;
-          }
-        }
-        if (missedAny) {
-          const fontFaces = accumulatedFontFaceDeclarations.filter((fontFace) =>
-            fontUsage.fontFamilies.has(fontFace['font-family'])
-          );
-          for (const fontFace of fontFaces) {
-            const cssFontFaceSrc = fontFace.relations[0];
-            const fontFaceDeclaration = cssFontFaceSrc.node;
-            if (
-              !fontFaceDeclaration.some((node) => node.prop === 'unicode-range')
-            ) {
-              fontFaceDeclaration.append({
-                prop: 'unicode-range',
-                value: unicodeRange(fontUsage.codepoints.original),
-              });
-              cssFontFaceSrc.from.markDirty();
-            }
-          }
-        }
-      }
-    }
-  }
-
-  if (missingGlyphsErrors.length) {
-    const errorLog = missingGlyphsErrors.map(
-      ({ char, fontUsage, location }) =>
-        `- \\u{${char.codePointAt(0).toString(16)}} (${char}) in font-family '${
-          fontUsage.props['font-family']
-        }' (${fontUsage.props['font-weight']}/${
-          fontUsage.props['font-style']
-        }) at ${location}`
-    );
-
-    const message = `Missing glyph fallback detected.
-When your primary webfont doesn't contain the glyphs you use, browsers that don't support unicode-range will load your fallback fonts, which will be a potential waste of bandwidth.
-These glyphs are used on your site, but they don't exist in the font you applied to them:`;
-
-    assetGraph.info(new Error(`${message}\n${errorLog.join('\n')}`));
-  }
+  warnAboutMissingGlyphs(htmlOrSvgAssetTextsWithProps, assetGraph);
 
   // Insert subsets:
 
@@ -1021,7 +1036,7 @@ These glyphs are used on your site, but they don't exist in the font you applied
       text: subsetCssText,
     });
 
-    subsetFontsToBeMinified.add(cssAsset);
+    await cssAsset.minify();
 
     for (const [i, fontRelation] of cssAsset.outgoingRelations.entries()) {
       const fontAsset = fontRelation.to;
@@ -1091,7 +1106,6 @@ These glyphs are used on your site, but they don't exist in the font you applied
     const existingCssAsset = assetGraph.findAssets({ url: cssAssetUrl })[0];
     if (existingCssAsset) {
       assetGraph.removeAsset(cssAsset);
-      subsetFontsToBeMinified.delete(cssAsset);
       cssAsset = existingCssAsset;
     } else {
       cssAsset.url = cssAssetUrl;
@@ -1226,7 +1240,7 @@ These glyphs are used on your site, but they don't exist in the font you applied
         assetGraph.removeAsset(cssAsset);
         cssAsset = existingCssAsset;
       } else {
-        subsetFontsToBeMinified.add(cssAsset);
+        await cssAsset.minify();
         cssAsset.url = cssAssetUrl;
       }
 
@@ -1311,7 +1325,7 @@ These glyphs are used on your site, but they don't exist in the font you applied
                 formats,
                 hrefType
               );
-            subsetFontsToBeMinified.add(selfHostedGoogleFontsCssAsset);
+            await selfHostedGoogleFontsCssAsset.minify();
             selfHostedGoogleCssByUrl.set(
               googleFontStylesheetRelation.to.url,
               selfHostedGoogleFontsCssAsset
@@ -1492,11 +1506,6 @@ These glyphs are used on your site, but they don't exist in the font you applied
     }
   }
 
-  // This is a bit awkward now, but if it's done sooner, it breaks the CSS source regexping:
-  for (const cssAsset of subsetFontsToBeMinified) {
-    await cssAsset.minify();
-  }
-
   await assetGraph.serializeSourceMaps(undefined, {
     type: 'Css',
     outgoingRelations: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "subfont",
-  "version": "6.8.0",
+  "version": "6.9.0",
   "description": "Speeds up your pages initial paint by automatically subsetting local or Google fonts and loading them optimally",
   "engines": {
     "node": ">=10.0.0"
@@ -54,7 +54,7 @@
     "css-list-helpers": "^2.0.0",
     "font-family-papandreou": "^0.2.0-patch2",
     "font-snapper": "^1.2.0",
-    "font-tracer": "^3.2.0",
+    "font-tracer": "^3.3.0",
     "fontkit": "^1.8.0",
     "fontverter": "^2.0.0",
     "gettemporaryfilepath": "^1.0.1",