subfont 6.1.0 → 6.3.1

package/CHANGELOG.md

@@ -1,3 +1,29 @@
+### v6.3.1 (2021-10-22)
+
+- [Fix tests](https://github.com/Munter/subfont/commit/4f7ab7011220457bab087a7533dbcfd5f8c8020b) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
+- [Update postcss to ^8.3.11](https://github.com/Munter/subfont/commit/2b63273784f89f5c1e2944eec238a1d3ab2a96db) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
+- [Update font-tracer to ^3.0.1](https://github.com/Munter/subfont/commit/1f3ce78a64c995eee5c49f5ace0ff7a6f6a1f22c) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
+- [Drop node.js 16 for the time being because of prebuilt canvas](https://github.com/Munter/subfont/commit/2b45d966c42f7391402dc79df85d2514c71eeee3) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
+- [Replace Travis with Github Actions](https://github.com/Munter/subfont/commit/a3851f0ac60f1205977fc2616728c94bcf6dbab8) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
+
+### v6.3.0 (2021-09-16)
+
+- [Update assetgraph to ^7.2.0, fixes \#152](https://github.com/Munter/subfont/commit/485e333202b935260e41f7996bbd96fca50d028a) ([Andreas Lind](mailto:andreas.lind@workday.com))
+
+### v6.2.1 (2021-09-05)
+
+- [Add test case where the same font-family is defined in an SVG island and the surrounding HTML](https://github.com/Munter/subfont/commit/ea6709648141efcc24177e0461fc2eb5c72c6714) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
+- [Avoid "inline SVG in ..." in assetFileName in fontInfo for SVG islands](https://github.com/Munter/subfont/commit/8fa6bfeb41a5e9addda4904810e630e81b4f79e9) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
+
+### v6.2.0 (2021-09-05)
+
+- [Update to font-tracer 3.0.0](https://github.com/Munter/subfont/commit/5236fecd7a3c9387098fcd3f3b5c1ec5c73093fe) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
+- [Rename htmlAsset vars\/params\/props for clarity](https://github.com/Munter/subfont/commit/0906ef4b70e45337c8008357d242bfdb237b9ca9) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
+- [Handle inline SVGs correctly](https://github.com/Munter/subfont/commit/7920755e75130d89636239b6700ae048dc1c5ef7) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
+- [Support tracing text in inline and external SVGs](https://github.com/Munter/subfont/commit/7852e82048c160a50406df9ee3fecf606d11cba0) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
+- [Remove preload polyfill cruft](https://github.com/Munter/subfont/commit/9bfd5663a4d5bc77a27f68dec9c784835c6e27c9) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
+- [+3 more](https://github.com/Munter/subfont/compare/v6.1.0...v6.2.0)
+
 ### v6.1.0 (2021-05-23)
 
 - [Remove the JavaScript-based preload polyfill](https://github.com/Munter/subfont/commit/b58bc351d8002d2aae1f4f9cf82126a3efcb997e) ([Andreas Lind](mailto:andreas.lind@workday.com))
@@ -230,16 +256,13 @@
 #### Pull requests
 
 - [#76](https://github.com/Munter/subfont/pull/76) Fix the prettier setup ([Andreas Lind](mailto:andreas.lind@peakon.com))
+- [#75](https://github.com/Munter/subfont/pull/75) Fix omitFallbacks with Google Web Fonts ([Andreas Lind](mailto:andreas.lind@peakon.com))
 
 #### Commits to master
 
 - [Switch to the official css-font-parser now that bramstein\/css-font-parser\#7 has been merged and released](https://github.com/Munter/subfont/commit/457c7f0e4cef0a8c1bd8f816c23ace64c9987424) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
 - [Don't populate source map relations](https://github.com/Munter/subfont/commit/5c07218b6f1dcc6fad88702a3bcb7b33bf9df54e) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
 
-### v4.1.2 (2020-01-09)
-
-- [#75](https://github.com/Munter/subfont/pull/75) Fix omitFallbacks with Google Web Fonts ([Andreas Lind](mailto:andreas.lind@peakon.com))
-
 ### v4.1.1 (2020-01-04)
 
 - [Add regression test](https://github.com/Munter/subfont/commit/46eddce9c09268dbde459b1f98fe5cec9e4c98f5) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
@@ -270,8 +293,7 @@
 - [Add vscode debugger launch configuration for the test suite](https://github.com/Munter/subfont/commit/f8f9abc42909c556765555cc49f44eb40a9194db) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
 - [Guard against an already detached relation when cleaning up](https://github.com/Munter/subfont/commit/6392fc359222772c9033a58a9020e3b35487d019) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
 
-### v4.0.3 (2019-11-02)
-
+### v4.0.3
 #### Pull requests
 
 - [#67](https://github.com/Munter/subfont/pull/67) Only warn about missing fonttools install if we are actually trying t… ([Peter Müller](mailto:munter@fumle.dk))

package/lib/gatherStylesheetsWithPredicates.js

@@ -19,6 +19,7 @@ module.exports = function gatherStylesheetsWithPredicates(
       type: {
         $in: [
           'HtmlStyle',
+          'SvgStyle',
           'CssImport',
           'HtmlConditionalComment',
           'HtmlNoscript',

package/lib/getCssRulesByProperty.js

@@ -41,7 +41,7 @@ function getCssRulesByProperty(properties, cssSource, existingPredicates) {
   existingPredicates = existingPredicates || {};
 
   const parseTree = postcss.parse(cssSource);
-  let defaultNamespaceURI = 'http://www.w3.org/1999/xhtml';
+  let defaultNamespaceURI;
   parseTree.walkAtRules('namespace', (rule) => {
     const fragments = rule.params.split(/\s+/);
     if (fragments.length === 1) {

package/lib/subfont.js

@@ -212,7 +212,7 @@ module.exports = async function subfont(
     isInline: false,
     isLoaded: true,
     type: {
-      $in: ['Html', 'Css', 'JavaScript'],
+      $in: ['Html', 'Svg', 'Css', 'JavaScript'],
     },
   })) {
     sumSizesBefore += asset.rawSrc.length;
@@ -233,7 +233,7 @@ module.exports = async function subfont(
     isInline: false,
     isLoaded: true,
     type: {
-      $in: ['Html', 'Css', 'JavaScript'],
+      $in: ['Html', 'Svg', 'Css', 'JavaScript'],
     },
   })) {
     sumSizesAfter += asset.rawSrc.length;
@@ -247,23 +247,6 @@ module.exports = async function subfont(
     relation.omitFunctionCall();
   }
 
-  // Compress inserted javascript
-  const preloadPolyfillScripts = assetGraph.findRelations({
-    type: 'HtmlScript',
-    to: {
-      isInline: true,
-      outgoingRelations: (relation) => relation.type === 'JavaScriptStaticUrl',
-    },
-  });
-  await assetGraph.compressJavaScript({
-    type: 'JavaScript',
-    isLoaded: true,
-    outgoingRelations: (relation) => relation.type === 'JavaScriptStaticUrl',
-  });
-  for (const relation of preloadPolyfillScripts) {
-    relation.inline();
-  }
-
   for (const asset of assetGraph.findAssets({
     isDirty: true,
     isInline: false,
@@ -323,7 +306,7 @@ module.exports = async function subfont(
   }
 
   let totalSavings = sumSizesBefore - sumSizesAfter;
-  for (const { htmlAsset, fontUsages } of fontInfo) {
+  for (const { assetFileName, fontUsages } of fontInfo) {
     let sumSmallestSubsetSize = 0;
     let sumSmallestOriginalSize = 0;
     let maxUsedCodePoints = 0;
@@ -346,7 +329,7 @@ module.exports = async function subfont(
     );
     const numFonts = Object.keys(fontUsagesByFontFamily).length;
     log(
-      `${htmlAsset}: ${numFonts} font${numFonts === 1 ? '' : 's'} (${
+      `${assetFileName}: ${numFonts} font${numFonts === 1 ? '' : 's'} (${
         fontUsages.length
       } variant${fontUsages.length === 1 ? '' : 's'}) in use, ${prettyBytes(
         sumSmallestOriginalSize
@@ -387,7 +370,9 @@ module.exports = async function subfont(
     }
   }
   log(
-    `HTML/JS/CSS size increase: ${prettyBytes(sumSizesAfter - sumSizesBefore)}`
+    `HTML/SVG/JS/CSS size increase: ${prettyBytes(
+      sumSizesAfter - sumSizesBefore
+    )}`
   );
   log(`Total savings: ${prettyBytes(totalSavings)}`);
   if (!dryRun) {

package/lib/subsetFonts.js

@@ -100,7 +100,7 @@ function getFontFaceDeclarationText(node, relations) {
 
 // Takes the output of fontTracer
 function groupTextsByFontFamilyProps(
-  htmlAsset,
+  htmlOrSvgAsset,
   globalTextByPropsArray,
   pageTextByPropsArray,
   availableFontFaceDeclarations
@@ -138,7 +138,7 @@ function groupTextsByFontFamilyProps(
       const fontUrl = getPreferredFontUrl(relations);
 
       return {
-        htmlAsset: textAndProps.htmlAsset,
+        htmlOrSvgAsset: textAndProps.htmlOrSvgAsset,
         text: textAndProps.text,
         props,
         fontRelations: relations,
@@ -175,7 +175,7 @@ function groupTextsByFontFamilyProps(
       texts,
       pageText: uniqueChars(
         textsPropsArray
-          .filter((textsProps) => textsProps.htmlAsset === htmlAsset)
+          .filter((textsProps) => textsProps.htmlOrSvgAsset === htmlOrSvgAsset)
           .map((obj) => obj.text)
           .join('')
       ),
@@ -188,7 +188,7 @@ function groupTextsByFontFamilyProps(
   });
 }
 
-function getParents(assetGraph, asset, assetQuery) {
+function getParents(asset, assetQuery) {
   const assetMatcher = compileQuery(assetQuery);
   const seenAssets = new Set();
   const parents = [];
@@ -211,13 +211,13 @@ function getParents(assetGraph, asset, assetQuery) {
 }
 
 function asyncLoadStyleRelationWithFallback(
-  htmlAsset,
+  htmlOrSvgAsset,
   originalRelation,
   hrefType
 ) {
   // Async load google font stylesheet
   // Insert async CSS loading <script>
-  const asyncCssLoadingRelation = htmlAsset.addRelation(
+  const asyncCssLoadingRelation = htmlOrSvgAsset.addRelation(
     {
       type: 'HtmlScript',
       hrefType: 'inline',
@@ -226,9 +226,9 @@ function asyncLoadStyleRelationWithFallback(
         text: `
           (function () {
             var el = document.createElement('link');
-            el.href = '${htmlAsset.assetGraph.buildHref(
+            el.href = '${htmlOrSvgAsset.assetGraph.buildHref(
               originalRelation.to.url,
-              htmlAsset.url,
+              htmlOrSvgAsset.url,
               { hrefType }
             )}'.toString('url');
             el.rel = 'stylesheet';
@@ -246,7 +246,7 @@ function asyncLoadStyleRelationWithFallback(
   );
 
   // Insert <noscript> fallback sync CSS loading
-  const noScriptFallbackRelation = htmlAsset.addRelation(
+  const noScriptFallbackRelation = htmlOrSvgAsset.addRelation(
     {
       type: 'HtmlNoscript',
       to: {
@@ -269,7 +269,7 @@ function asyncLoadStyleRelationWithFallback(
 
   noScriptFallbackRelation.inline();
   asyncCssLoadingRelation.to.minify();
-  htmlAsset.markDirty();
+  htmlOrSvgAsset.markDirty();
 }
 
 function getSubsetPromiseId(fontUsage, format) {
@@ -278,12 +278,12 @@ function getSubsetPromiseId(fontUsage, format) {
 
 async function getSubsetsForFontUsage(
   assetGraph,
-  htmlAssetTextsWithProps,
+  htmlOrSvgAssetTextsWithProps,
   formats
 ) {
   const allFonts = [];
 
-  for (const item of htmlAssetTextsWithProps) {
+  for (const item of htmlOrSvgAssetTextsWithProps) {
     for (const fontUsage of item.fontUsages) {
       if (!fontUsage.fontUrl) {
         continue;
@@ -316,7 +316,7 @@ async function getSubsetsForFontUsage(
 
   const subsetPromiseMap = {};
 
-  for (const item of htmlAssetTextsWithProps) {
+  for (const item of htmlOrSvgAssetTextsWithProps) {
     for (const fontUsage of item.fontUsages) {
       const fontBuffer = originalFontBuffers[fontUsage.fontUrl];
       const text = fontUsage.text;
@@ -552,7 +552,7 @@ async function subsetFonts(
     fontDisplay = undefined;
   }
 
-  const htmlAssetTextsWithProps = [];
+  const htmlOrSvgAssetTextsWithProps = [];
   const subsetUrl = urltools.ensureTrailingSlash(assetGraph.root + subsetPath);
 
   await assetGraph.applySourceMaps({ type: 'Css' });
@@ -578,11 +578,21 @@ async function subsetFonts(
   // Collect texts by page
 
   const memoizedGetCssRulesByProperty = memoizeSync(getCssRulesByProperty);
-  const htmlAssets = assetGraph.findAssets({ type: 'Html', isInline: false });
+  const htmlOrSvgAssets = assetGraph.findAssets({
+    $or: [
+      {
+        type: 'Html',
+        isInline: false,
+      },
+      {
+        type: 'Svg',
+      },
+    ],
+  });
   const traversalRelationQuery = {
     $or: [
       {
-        type: { $in: ['HtmlStyle', 'CssImport'] },
+        type: { $in: ['HtmlStyle', 'SvgStyle', 'CssImport'] },
       },
       {
         to: {
@@ -597,20 +607,20 @@ async function subsetFonts(
   // 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 fontFaceDeclarationsByHtmlAsset = new Map();
+  const fontFaceDeclarationsByHtmlOrSvgAsset = new Map();
   const potentiallyOrphanedAssets = new Set();
 
   const headlessBrowser = dynamic && new HeadlessBrowser({ console });
   const globalTextByProps = [];
   try {
-    for (const htmlAsset of htmlAssets) {
+    for (const htmlOrSvgAsset of htmlOrSvgAssets) {
       const accumulatedFontFaceDeclarations = [];
-      fontFaceDeclarationsByHtmlAsset.set(
-        htmlAsset,
+      fontFaceDeclarationsByHtmlOrSvgAsset.set(
+        htmlOrSvgAsset,
         accumulatedFontFaceDeclarations
       );
       assetGraph.eachAssetPreOrder(
-        htmlAsset,
+        htmlOrSvgAsset,
         traversalRelationQuery,
         (asset) => {
           if (asset.type === 'Css' && asset.isLoaded) {
@@ -666,23 +676,25 @@ async function subsetFonts(
           seenFontFaceCombos.add(key);
         }
 
-        const textByProps = fontTracer(htmlAsset.parseTree, {
+        const textByProps = fontTracer(htmlOrSvgAsset.parseTree, {
           stylesheetsWithPredicates: gatherStylesheetsWithPredicates(
-            htmlAsset.assetGraph,
-            htmlAsset
+            htmlOrSvgAsset.assetGraph,
+            htmlOrSvgAsset
           ),
           getCssRulesByProperty: memoizedGetCssRulesByProperty,
-          htmlAsset,
+          asset: htmlOrSvgAsset,
         });
         if (headlessBrowser) {
-          textByProps.push(...(await headlessBrowser.tracePage(htmlAsset)));
+          textByProps.push(
+            ...(await headlessBrowser.tracePage(htmlOrSvgAsset))
+          );
         }
         for (const textByPropsEntry of textByProps) {
-          textByPropsEntry.htmlAsset = htmlAsset;
+          textByPropsEntry.htmlOrSvgAsset = htmlOrSvgAsset;
         }
         globalTextByProps.push(...textByProps);
-        htmlAssetTextsWithProps.push({
-          htmlAsset,
+        htmlOrSvgAssetTextsWithProps.push({
+          htmlOrSvgAsset,
           textByProps,
           accumulatedFontFaceDeclarations,
         });
@@ -694,11 +706,11 @@ async function subsetFonts(
     }
   }
 
-  for (const htmlAssetTextsWithPropsEntry of htmlAssetTextsWithProps) {
-    const { htmlAsset, textByProps, accumulatedFontFaceDeclarations } =
-      htmlAssetTextsWithPropsEntry;
-    htmlAssetTextsWithPropsEntry.fontUsages = groupTextsByFontFamilyProps(
-      htmlAsset,
+  for (const htmlOrSvgAssetTextsWithPropsEntry of htmlOrSvgAssetTextsWithProps) {
+    const { htmlOrSvgAsset, textByProps, accumulatedFontFaceDeclarations } =
+      htmlOrSvgAssetTextsWithPropsEntry;
+    htmlOrSvgAssetTextsWithPropsEntry.fontUsages = groupTextsByFontFamilyProps(
+      htmlOrSvgAsset,
       globalTextByProps,
       textByProps,
       accumulatedFontFaceDeclarations
@@ -706,9 +718,9 @@ async function subsetFonts(
   }
 
   if (omitFallbacks) {
-    for (const htmlAsset of htmlAssets) {
+    for (const htmlOrSvgAsset of htmlOrSvgAssets) {
       const accumulatedFontFaceDeclarations =
-        fontFaceDeclarationsByHtmlAsset.get(htmlAsset);
+        fontFaceDeclarationsByHtmlOrSvgAsset.get(htmlOrSvgAsset);
       // Remove the original @font-face rules:
       for (const { relations } of accumulatedFontFaceDeclarations) {
         for (const relation of relations) {
@@ -719,21 +731,21 @@ async function subsetFonts(
           relation.remove();
         }
       }
-      htmlAsset.markDirty();
+      htmlOrSvgAsset.markDirty();
     }
   }
 
   if (fontDisplay) {
-    for (const htmlAssetTextWithProps of htmlAssetTextsWithProps) {
-      for (const fontUsage of htmlAssetTextWithProps.fontUsages) {
+    for (const htmlOrSvgAssetTextWithProps of htmlOrSvgAssetTextsWithProps) {
+      for (const fontUsage of htmlOrSvgAssetTextWithProps.fontUsages) {
         fontUsage.props['font-display'] = fontDisplay;
       }
     }
   }
 
   // Generate codepoint sets for original font, the used subset and the unused subset
-  for (const htmlAssetTextWithProps of htmlAssetTextsWithProps) {
-    for (const fontUsage of htmlAssetTextWithProps.fontUsages) {
+  for (const htmlOrSvgAssetTextWithProps of htmlOrSvgAssetTextsWithProps) {
+    for (const fontUsage of htmlOrSvgAssetTextWithProps.fontUsages) {
       const originalFont = assetGraph.findAssets({
         url: fontUsage.fontUrl,
       })[0];
@@ -762,24 +774,30 @@ async function subsetFonts(
 
   if (onlyInfo) {
     return {
-      fontInfo: htmlAssetTextsWithProps.map(({ fontUsages, htmlAsset }) => ({
-        htmlAsset: htmlAsset.urlOrDescription,
-        fontUsages: fontUsages,
-      })),
+      fontInfo: htmlOrSvgAssetTextsWithProps.map(
+        ({ fontUsages, htmlOrSvgAsset }) => ({
+          assetFileName: htmlOrSvgAsset.nonInlineAncestor.urlOrDescription,
+          fontUsages: fontUsages,
+        })
+      ),
     };
   }
 
   // Generate subsets:
-  await getSubsetsForFontUsage(assetGraph, htmlAssetTextsWithProps, formats);
+  await getSubsetsForFontUsage(
+    assetGraph,
+    htmlOrSvgAssetTextsWithProps,
+    formats
+  );
 
   // Warn about missing glyphs
   const missingGlyphsErrors = [];
 
   for (const {
-    htmlAsset,
+    htmlOrSvgAsset,
     fontUsages,
     accumulatedFontFaceDeclarations,
-  } of htmlAssetTextsWithProps) {
+  } of htmlOrSvgAssetTextsWithProps) {
     for (const fontUsage of fontUsages) {
       if (fontUsage.subsets) {
         const characterSet = fontkit.create(
@@ -799,23 +817,23 @@ async function subsetFonts(
 
           if (isMissing) {
             let location;
-            const charIdx = htmlAsset.text.indexOf(char);
+            const charIdx = htmlOrSvgAsset.text.indexOf(char);
 
             if (charIdx === -1) {
-              location = `${htmlAsset.urlOrDescription} (generated content)`;
+              location = `${htmlOrSvgAsset.urlOrDescription} (generated content)`;
             } else {
               const position = new LinesAndColumns(
-                htmlAsset.text
+                htmlOrSvgAsset.text
               ).locationForIndex(charIdx);
-              location = `${htmlAsset.urlOrDescription}:${position.line + 1}:${
-                position.column + 1
-              }`;
+              location = `${htmlOrSvgAsset.urlOrDescription}:${
+                position.line + 1
+              }:${position.column + 1}`;
             }
 
             missingGlyphsErrors.push({
               codePoint,
               char,
-              htmlAsset,
+              htmlOrSvgAsset,
               fontUsage,
               location,
             });
@@ -865,13 +883,13 @@ These glyphs are used on your site, but they don't exist in the font you applied
 
   let numFontUsagesWithSubset = 0;
   for (const {
-    htmlAsset,
+    htmlOrSvgAsset,
     fontUsages,
     accumulatedFontFaceDeclarations,
-  } of htmlAssetTextsWithProps) {
+  } of htmlOrSvgAssetTextsWithProps) {
     const insertionPoint = assetGraph.findRelations({
-      type: 'HtmlStyle',
-      from: htmlAsset,
+      type: `${htmlOrSvgAsset.type}Style`,
+      from: htmlOrSvgAsset,
     })[0];
     const subsetFontUsages = fontUsages.filter(
       (fontUsage) => fontUsage.subsets
@@ -884,7 +902,7 @@ These glyphs are used on your site, but they don't exist in the font you applied
     for (const fontUsage of fontUsages) {
       for (const relation of assetGraph.findRelations({
         type: { $in: ['HtmlPrefetchLink', 'HtmlPreloadLink'] },
-        from: htmlAsset,
+        from: htmlOrSvgAsset,
         to: {
           url: fontUsage.fontUrl,
         },
@@ -911,7 +929,7 @@ These glyphs are used on your site, but they don't exist in the font you applied
       // Insert <link rel="preload">
       unsubsettedFontUsagesToPreload.map((fontUsage) => {
         // Always preload unsubsetted font files, they might be any format, so can't be clever here
-        return htmlAsset.addRelation(
+        return htmlOrSvgAsset.addRelation(
           {
             type: 'HtmlPreloadLink',
             hrefType,
@@ -959,8 +977,8 @@ These glyphs are used on your site, but they don't exist in the font you applied
       if (
         formats.length === 1 &&
         fontUsage &&
-        (!inlineCss || htmlAssetTextsWithProps.length === 1) &&
-        htmlAssetTextsWithProps.every(({ fontUsages }) =>
+        (!inlineCss || htmlOrSvgAssetTextsWithProps.length === 1) &&
+        htmlOrSvgAssetTextsWithProps.every(({ fontUsages }) =>
           fontUsages.some(
             ({ fontUrl, pageText }) => pageText && fontUrl === fontUsage.fontUrl
           )
@@ -1051,22 +1069,25 @@ These glyphs are used on your site, but they don't exist in the font you applied
         // - https://caniuse.com/#search=woff2
         // - https://caniuse.com/#search=preload
 
-        htmlAsset.addRelation(
-          {
-            type: 'HtmlPreloadLink',
-            hrefType,
-            to: fontAsset,
-            as: 'font',
-          },
-          'before',
-          insertionPoint
-        );
+        if (htmlOrSvgAsset.type === 'Html') {
+          htmlOrSvgAsset.addRelation(
+            {
+              type: 'HtmlPreloadLink',
+              hrefType,
+              to: fontAsset,
+              as: 'font',
+            },
+            'before',
+            insertionPoint
+          );
+        }
       }
     }
-    const cssRelation = htmlAsset.addRelation(
+    const cssRelation = htmlOrSvgAsset.addRelation(
       {
-        type: 'HtmlStyle',
-        hrefType: inlineCss ? 'inline' : hrefType,
+        type: `${htmlOrSvgAsset.type}Style`,
+        hrefType:
+          inlineCss || htmlOrSvgAsset.type === 'Svg' ? 'inline' : hrefType,
         to: cssAsset,
       },
       'before',
@@ -1075,7 +1096,7 @@ These glyphs are used on your site, but they don't exist in the font you applied
 
     if (!omitFallbacks && inlineCss && unusedVariantsCss) {
       // The fallback CSS for unused variants needs to go into its own stylesheet after the crude version of the JS-based preload "polyfill"
-      const cssAsset = htmlAsset.addRelation(
+      const cssAsset = htmlOrSvgAsset.addRelation(
         {
           type: 'HtmlStyle',
           to: {
@@ -1100,9 +1121,9 @@ These glyphs are used on your site, but they don't exist in the font you applied
 
   // Lazy load the original @font-face declarations of self-hosted fonts (unless omitFallbacks)
   const originalRelations = new Set();
-  for (const htmlAsset of htmlAssets) {
+  for (const htmlOrSvgAsset of htmlOrSvgAssets) {
     const accumulatedFontFaceDeclarations =
-      fontFaceDeclarationsByHtmlAsset.get(htmlAsset);
+      fontFaceDeclarationsByHtmlOrSvgAsset.get(htmlOrSvgAsset);
     // TODO: Maybe group by media?
     const containedRelationsByFontFaceRule = new Map();
     for (const { relations } of accumulatedFontFaceDeclarations) {
@@ -1151,18 +1172,20 @@ These glyphs are used on your site, but they don't exist in the font you applied
         cssAsset.url = cssAssetUrl;
       }
 
-      // Create a <link rel="stylesheet"> that asyncLoadStyleRelationWithFallback can convert to async with noscript fallback:
-      const fallbackHtmlStyle = htmlAsset.addRelation({
-        type: 'HtmlStyle',
-        to: cssAsset,
-      });
+      if (htmlOrSvgAsset.type === 'Html') {
+        // Create a <link rel="stylesheet"> that asyncLoadStyleRelationWithFallback can convert to async with noscript fallback:
+        const fallbackHtmlStyle = htmlOrSvgAsset.addRelation({
+          type: 'HtmlStyle',
+          to: cssAsset,
+        });
 
-      asyncLoadStyleRelationWithFallback(
-        htmlAsset,
-        fallbackHtmlStyle,
-        hrefType
-      );
-      relationsToRemove.add(fallbackHtmlStyle);
+        asyncLoadStyleRelationWithFallback(
+          htmlOrSvgAsset,
+          fallbackHtmlStyle,
+          hrefType
+        );
+        relationsToRemove.add(fallbackHtmlStyle);
+      }
     }
   }
 
@@ -1199,12 +1222,14 @@ These glyphs are used on your site, but they don't exist in the font you applied
 
       if (googleFontStylesheetRelation.type === 'CssImport') {
         // Gather Html parents. Relevant if we are dealing with CSS @import relations
-        htmlParents = getParents(assetGraph, googleFontStylesheetRelation.to, {
-          type: 'Html',
+        htmlParents = getParents(googleFontStylesheetRelation.to, {
+          type: { $in: ['Html', 'Svg'] },
           isInline: false,
           isLoaded: true,
         });
-      } else if (googleFontStylesheetRelation.from.type === 'Html') {
+      } else if (
+        ['Html', 'Svg'].includes(googleFontStylesheetRelation.from.type)
+      ) {
         htmlParents = [googleFontStylesheetRelation.from];
       } else {
         htmlParents = [];
@@ -1235,18 +1260,20 @@ These glyphs are used on your site, but they don't exist in the font you applied
           }
           const selfHostedFallbackRelation = htmlParent.addRelation(
             {
-              type: 'HtmlStyle',
+              type: `${htmlParent.type}Style`,
               to: selfHostedGoogleFontsCssAsset,
               hrefType,
             },
             'lastInBody'
           );
           relationsToRemove.add(selfHostedFallbackRelation);
-          asyncLoadStyleRelationWithFallback(
-            htmlParent,
-            selfHostedFallbackRelation,
-            hrefType
-          );
+          if (htmlParent.type === 'Html') {
+            asyncLoadStyleRelationWithFallback(
+              htmlParent,
+              selfHostedFallbackRelation,
+              hrefType
+            );
+          }
         }
         relationsToRemove.add(googleFontStylesheetRelation);
       }
@@ -1263,7 +1290,7 @@ These glyphs are used on your site, but they don't exist in the font you applied
 
   const webfontNameMap = {};
 
-  for (const { fontUsages } of htmlAssetTextsWithProps) {
+  for (const { fontUsages } of htmlOrSvgAssetTextsWithProps) {
     for (const { subsets, fontFamilies, props } of fontUsages) {
       if (subsets) {
         for (const fontFamily of fontFamilies) {
@@ -1276,7 +1303,37 @@ These glyphs are used on your site, but they don't exist in the font you applied
   }
 
   let customPropertyDefinitions; // Avoid computing this unless necessary
-  // Inject subset font name before original webfont
+  // Inject subset font name before original webfont in SVG font-family attributes
+  const svgAssets = assetGraph.findAssets({ type: 'Svg' });
+  for (const svgAsset of svgAssets) {
+    let changesMade = false;
+    for (const element of Array.from(
+      svgAsset.parseTree.querySelectorAll('[font-family]')
+    )) {
+      const fontFamilies = cssListHelpers.splitByCommas(
+        element.getAttribute('font-family')
+      );
+      for (let i = 0; i < fontFamilies.length; i += 1) {
+        const subsetFontFamily =
+          webfontNameMap[fontFamily.parse(fontFamilies[i])[0].toLowerCase()];
+        if (subsetFontFamily && !fontFamilies.includes(subsetFontFamily)) {
+          fontFamilies.splice(
+            i,
+            omitFallbacks ? 1 : 0,
+            cssQuoteIfNecessary(subsetFontFamily)
+          );
+          i += 1;
+          element.setAttribute('font-family', fontFamilies.join(', '));
+          changesMade = true;
+        }
+      }
+    }
+    if (changesMade) {
+      svgAsset.markDirty();
+    }
+  }
+
+  // Inject subset font name before original webfont in CSS
   const cssAssets = assetGraph.findAssets({
     type: 'Css',
     isLoaded: true,
@@ -1408,10 +1465,12 @@ These glyphs are used on your site, but they don't exist in the font you applied
 
   // Hand out some useful info about the detected subsets:
   return {
-    fontInfo: htmlAssetTextsWithProps.map(({ fontUsages, htmlAsset }) => ({
-      htmlAsset: htmlAsset.urlOrDescription,
-      fontUsages: fontUsages.map((fontUsage) => _.omit(fontUsage, 'subsets')),
-    })),
+    fontInfo: htmlOrSvgAssetTextsWithProps.map(
+      ({ fontUsages, htmlOrSvgAsset }) => ({
+        assetFileName: htmlOrSvgAsset.nonInlineAncestor.urlOrDescription,
+        fontUsages: fontUsages.map((fontUsage) => _.omit(fontUsage, 'subsets')),
+      })
+    ),
   };
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "subfont",
-  "version": "6.1.0",
+  "version": "6.3.1",
   "description": "Speeds up your pages initial paint by automatically subsetting local or Google fonts and loading them optimally",
   "engines": {
     "node": ">=10.0.0"
@@ -47,21 +47,21 @@
   "homepage": "https://github.com/Munter/subfont#readme",
   "dependencies": {
     "@gustavnikolaj/async-main-wrap": "^3.0.1",
-    "assetgraph": "^6.5.0",
+    "assetgraph": "^7.2.0",
     "browserslist": "^4.13.0",
     "css-font-parser": "^0.3.0",
     "css-font-weight-names": "^0.2.1",
     "css-list-helpers": "^2.0.0",
     "font-family-papandreou": "^0.2.0-patch2",
     "font-snapper": "^1.2.0",
-    "font-tracer": "^2.0.1",
+    "font-tracer": "^3.0.1",
     "fontkit": "^1.8.0",
     "fontverter": "^2.0.0",
     "gettemporaryfilepath": "^1.0.1",
     "lines-and-columns": "^1.1.6",
     "lodash": "^4.17.15",
     "memoizesync": "^1.1.1",
-    "postcss": "^7.0.32",
+    "postcss": "^8.3.11",
     "postcss-value-parser": "^4.0.2",
     "pretty-bytes": "^5.1.0",
     "puppeteer-core": "^8.0.0",