subfont 6.8.0 → 6.11.0

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+### v6.11.0 (2022-09-04)
+
+- [Treat wdth as a standard axis \(but unsupported for now\)](https://github.com/Munter/subfont/commit/20d539750448134cca0a82f2cc98f85d9a6be068) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
+- [Detect unused ital variation axis ranges](https://github.com/Munter/subfont/commit/b848b21b66cdbcd0ff313690ba49a4bc9b9f90a4) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
+- [Don't assume that the display name of a variation axis equals its name](https://github.com/Munter/subfont/commit/4fcf7df801de01b2d3aef3d5f1ea3d697779ffda) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
+- [Detect unused wght variation axis ranges](https://github.com/Munter/subfont/commit/6a964d609f21bf2c9dad96da1d16d9c32c28dbfd) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
+
+### v6.10.0 (2022-08-29)
+
+- [Update @hookun\/parse-animation-shorthand to ^0.1.4 to make sure we get the fix for hookhookun\/parse-animation-shorthand\#16](https://github.com/Munter/subfont/commit/4db17826245e289e987c6dc02d3f67ebf5891e6f) ([Andreas Lind](mailto:andreas.lind@workday.com))
+- [Disable notice about unused variation axis ranges when there's an out-of-bounds cubic-bezier animation timing function in play](https://github.com/Munter/subfont/commit/1cf4ff46bb6099f8df8602968c7dc0fefb1c1f21) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
+- [Update font-tracer to ^3.6.0](https://github.com/Munter/subfont/commit/2a47adc03122aad50ba2a01f116a2d1fe0f2b29e) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
+- [Remove accidentally committed commented out code](https://github.com/Munter/subfont/commit/e0c677f9b2c7a9af123045cf29bc78a4f9a56550) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
+- [Warn about unused variation axis ranges, not just fully unused axes](https://github.com/Munter/subfont/commit/32fc472327b1c8fc87090d4c1e5f1085533ad8fa) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
+- [+13 more](https://github.com/Munter/subfont/compare/v6.9.0...v6.10.0)
+
+### 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/getCssRulesByProperty.js

@@ -1,6 +1,7 @@
 const specificity = require('specificity');
 const postcss = require('postcss');
 const unquote = require('./unquote');
+const parseAnimationShorthand = require('@hookun/parse-animation-shorthand');
 
 const counterRendererNames = new Set([
   'none',
@@ -144,34 +145,59 @@ function getCssRulesByProperty(properties, cssSource, existingPredicates) {
               });
             });
         }
-      } else if (
-        propName === 'animation' &&
-        properties.includes('animation-name')
-      ) {
+      } else if (propName === 'animation') {
         // Shorthand
-        const animationName = node.value.split(' ').pop();
+        const parsedAnimation = parseAnimationShorthand.parseSingle(node.value);
 
-        // Split up combined selectors as they might have different specificity
-        specificity
-          .calculate(node.parent.selector)
-          .forEach((specificityObject) => {
-            const isStyleAttribute =
-              specificityObject.selector === 'bogusselector';
+        if (properties.includes('animation-name')) {
+          // Split up combined selectors as they might have different specificity
+          specificity
+            .calculate(node.parent.selector)
+            .forEach((specificityObject) => {
+              const isStyleAttribute =
+                specificityObject.selector === 'bogusselector';
 
-            rulesByProperty['animation-name'].push({
-              predicates: getCurrentPredicates(),
-              namespaceURI: defaultNamespaceURI,
-              selector: isStyleAttribute
-                ? undefined
-                : specificityObject.selector.trim(),
-              specificityArray: isStyleAttribute
-                ? [1, 0, 0, 0]
-                : specificityObject.specificityArray,
-              prop: 'animation-name',
-              value: animationName,
-              important: !!node.important,
+              rulesByProperty['animation-name'].push({
+                predicates: getCurrentPredicates(),
+                namespaceURI: defaultNamespaceURI,
+                selector: isStyleAttribute
+                  ? undefined
+                  : specificityObject.selector.trim(),
+                specificityArray: isStyleAttribute
+                  ? [1, 0, 0, 0]
+                  : specificityObject.specificityArray,
+                prop: 'animation-name',
+                value: parsedAnimation.name,
+                important: !!node.important,
+              });
             });
-          });
+        }
+        if (properties.includes('animation-timing-function')) {
+          // Split up combined selectors as they might have different specificity
+          specificity
+            .calculate(node.parent.selector)
+            .forEach((specificityObject) => {
+              const isStyleAttribute =
+                specificityObject.selector === 'bogusselector';
+
+              rulesByProperty['animation-timing-function'].push({
+                predicates: getCurrentPredicates(),
+                namespaceURI: defaultNamespaceURI,
+                selector: isStyleAttribute
+                  ? undefined
+                  : specificityObject.selector.trim(),
+                specificityArray: isStyleAttribute
+                  ? [1, 0, 0, 0]
+                  : specificityObject.specificityArray,
+                prop: 'animation-timing-function',
+                value: parseAnimationShorthand.serialize({
+                  name: '',
+                  timingFunction: parsedAnimation.timingFunction,
+                }),
+                important: !!node.important,
+              });
+            });
+        }
       } else if (propName === 'transition') {
         // Shorthand
         const transitionProperties = [];

package/lib/parseFontVariationSettings.js

@@ -0,0 +1,39 @@
+const postcssValueParser = require('postcss-value-parser');
+
+module.exports = function* parseFontVariationSettings(value) {
+  let state = 'BEFORE_AXIS_NAME';
+  let axisName;
+  for (const token of postcssValueParser(value).nodes) {
+    if (token.type === 'space') {
+      continue;
+    }
+    switch (state) {
+      case 'BEFORE_AXIS_NAME': {
+        if (token.type !== 'string') {
+          return;
+        }
+        axisName = token.value;
+        state = 'AFTER_AXIS_NAME';
+        break;
+      }
+      case 'AFTER_AXIS_NAME': {
+        if (token.type === 'word') {
+          const axisValue = parseFloat(token.value);
+          if (!isNaN(axisValue)) {
+            yield [axisName, axisValue];
+          }
+        }
+        state = 'AFTER_AXIS_VALUE';
+        break;
+      }
+      case 'AFTER_AXIS_VALUE': {
+        if (token.type !== 'div' || token.value !== ',') {
+          return;
+        }
+        axisName = undefined;
+        state = 'BEFORE_AXIS_NAME';
+        break;
+      }
+    }
+  }
+};

package/lib/subsetFonts.js

@@ -13,13 +13,14 @@ const HeadlessBrowser = require('./HeadlessBrowser');
 const gatherStylesheetsWithPredicates = require('./gatherStylesheetsWithPredicates');
 const findCustomPropertyDefinitions = require('./findCustomPropertyDefinitions');
 const extractReferencedCustomPropertyNames = require('./extractReferencedCustomPropertyNames');
+const parseFontVariationSettings = require('./parseFontVariationSettings');
+const parseAnimationShorthand = require('@hookun/parse-animation-shorthand');
 const stripLocalTokens = require('./stripLocalTokens');
 const injectSubsetDefinitions = require('./injectSubsetDefinitions');
 const cssFontParser = require('css-font-parser');
 const cssListHelpers = require('css-list-helpers');
 const LinesAndColumns = require('lines-and-columns').default;
 const fontkit = require('fontkit');
-const fontFamily = require('font-family-papandreou');
 const crypto = require('crypto');
 
 const unquote = require('./unquote');
@@ -41,6 +42,14 @@ const contentTypeByFontFormat = {
   truetype: 'font/ttf',
 };
 
+function stringifyFontFamily(name) {
+  if (/[^a-z0-9_-]/i.test(name)) {
+    return name.replace(/\\/g, '\\\\').replace(/"/g, '\\"');
+  } else {
+    return name;
+  }
+}
+
 function uniqueChars(text) {
   return [...new Set([...text])].sort().join('');
 }
@@ -79,6 +88,21 @@ function getPreferredFontUrl(cssFontFaceSrcRelations = []) {
   }
 }
 
+function isOutOfBoundsAnimationTimingFunction(animationTimingFunctionStr) {
+  if (typeof animationTimingFunctionStr !== 'string') {
+    return false;
+  }
+  const { timingFunction } = parseAnimationShorthand.parseSingle(
+    `${animationTimingFunctionStr} ignored-name`
+  );
+
+  if (timingFunction.type === 'cubic-bezier') {
+    const [, y1, , y2] = timingFunction.value;
+    return y1 > 1 || y1 < 0 || y2 > 1 || y2 < 0;
+  }
+  return false;
+}
+
 // Hack to extract '@font-face { ... }' with all absolute urls
 function getFontFaceDeclarationText(node, relations) {
   const originalHrefTypeByRelation = new Map();
@@ -145,8 +169,8 @@ function groupTextsByFontFamilyProps(
         return [];
       }
       // Find all the families in the traced font-family that we have @font-face declarations for:
-      const families = fontFamily
-        .parse(family)
+      const families = cssFontParser
+        .parseFontFamily(family)
         .filter((family) =>
           availableFontFaceDeclarations.some(
             (fontFace) =>
@@ -159,7 +183,7 @@ function groupTextsByFontFamilyProps(
           availableFontFaceDeclarations,
           {
             ...textAndProps.props,
-            'font-family': fontFamily.stringify([family]),
+            'font-family': stringifyFontFamily(family),
           }
         );
 
@@ -170,9 +194,27 @@ function groupTextsByFontFamilyProps(
         const { relations, ...props } = activeFontFaceDeclaration;
         const fontUrl = getPreferredFontUrl(relations);
 
+        const fontStyle = normalizeFontPropertyValue(
+          'font-style',
+          textAndProps.props['font-style']
+        );
+
+        let fontWeight = normalizeFontPropertyValue(
+          'font-weight',
+          textAndProps.props['font-weight']
+        );
+        if (fontWeight === 'normal') {
+          fontWeight = 400;
+        }
+
         return {
           htmlOrSvgAsset: textAndProps.htmlOrSvgAsset,
           text: textAndProps.text,
+          fontVariationSettings: textAndProps.props['font-variation-settings'],
+          fontStyle,
+          fontWeight,
+          animationTimingFunction:
+            textAndProps.props['animation-timing-function'],
           props,
           fontRelations: relations,
           fontUrl,
@@ -190,6 +232,20 @@ function groupTextsByFontFamilyProps(
     const fontFamilies = new Set(
       textsPropsArray.map((obj) => obj.props['font-family'])
     );
+    const fontStyles = new Set(textsPropsArray.map((obj) => obj.fontStyle));
+    const fontWeights = new Set(textsPropsArray.map((obj) => obj.fontWeight));
+    const fontVariationSettings = new Set(
+      textsPropsArray
+        .map((obj) => obj.fontVariationSettings)
+        .filter(
+          (fontVariationSettings) =>
+            fontVariationSettings &&
+            fontVariationSettings.toLowerCase() !== 'normal'
+        )
+    );
+    const hasOutOfBoundsAnimationTimingFunction = textsPropsArray.some((obj) =>
+      isOutOfBoundsAnimationTimingFunction(obj.animationTimingFunction)
+    );
 
     let smallestOriginalSize;
     let smallestOriginalFormat;
@@ -217,6 +273,10 @@ function groupTextsByFontFamilyProps(
       props: { ...textsPropsArray[0].props },
       fontUrl,
       fontFamilies,
+      fontStyles,
+      fontWeights,
+      fontVariationSettings,
+      hasOutOfBoundsAnimationTimingFunction,
       preload,
     };
   });
@@ -497,9 +557,9 @@ async function createSelfHostedGoogleFontsCssAsset(
   assetGraph,
   googleFontsCssAsset,
   formats,
-  hrefType
+  hrefType,
+  subsetUrl
 ) {
-  const baseUrl = assetGraph.resolveUrl(assetGraph.root, '/subfont/');
   const lines = [];
   for (const cssFontFaceSrc of assetGraph.findRelations({
     from: googleFontsCssAsset,
@@ -516,9 +576,12 @@ async function createSelfHostedGoogleFontsCssAsset(
     const srcFragments = [];
     for (const format of formats) {
       const rawSrc = await fontverter.convert(cssFontFaceSrc.to.rawSrc, format);
-      const url = `${assetGraph.root}subfont/${
-        cssFontFaceSrc.to.baseName
-      }-${md5HexPrefix(rawSrc)}${extensionByFormat[format]}`;
+      const url = assetGraph.resolveUrl(
+        subsetUrl,
+        `${cssFontFaceSrc.to.baseName}-${md5HexPrefix(rawSrc)}${
+          extensionByFormat[format]
+        }`
+      );
       const fontAsset =
         assetGraph.findAssets({ url })[0] ||
         (await assetGraph.addAsset({
@@ -526,7 +589,7 @@ async function createSelfHostedGoogleFontsCssAsset(
           rawSrc,
         }));
       srcFragments.push(
-        `url(${assetGraph.buildHref(fontAsset.url, baseUrl, {
+        `url(${assetGraph.buildHref(fontAsset.url, subsetUrl, {
           hrefType,
         })}) format('${format}')`
       );
@@ -542,7 +605,7 @@ async function createSelfHostedGoogleFontsCssAsset(
   const text = lines.join('\n');
   const fallbackAsset = assetGraph.addAsset({
     type: 'Css',
-    url: `/subfont/fallback-${md5HexPrefix(text)}.css`,
+    url: assetGraph.resolveUrl(subsetUrl, `fallback-${md5HexPrefix(text)}.css`),
     text,
   });
   return fallbackAsset;
@@ -574,62 +637,279 @@ function cssAssetIsEmpty(cssAsset) {
   );
 }
 
-async function subsetFonts(
-  assetGraph,
-  {
-    formats = ['woff2', 'woff'],
-    subsetPath = 'subfont/',
-    omitFallbacks = false,
-    inlineCss,
-    fontDisplay,
-    hrefType = 'rootRelative',
-    onlyInfo,
-    dynamic,
-    console = global.console,
-    text,
-  } = {}
+function parseFontWeightRange(str) {
+  let minFontWeight = 400;
+  let maxFontWeight = 400;
+  const fontWeightTokens = str.split(/\s+/).map((str) => parseFloat(str));
+  if (
+    [1, 2].includes(fontWeightTokens.length) &&
+    !fontWeightTokens.some(isNaN)
+  ) {
+    minFontWeight = maxFontWeight = fontWeightTokens[0];
+    if (fontWeightTokens.length === 2) {
+      maxFontWeight = fontWeightTokens[1];
+    }
+  }
+  return [minFontWeight, maxFontWeight];
+}
+
+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();
+            }
+          }
+        }
+      }
+    }
+  }
+
+  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')}`));
+  }
+}
+
+const standardVariationAxes = new Set(['wght', 'wdth', 'ital', 'slnt', 'opsz']);
+// Tracing the ranges of these standard axes require a bit more work, so just skip them for now:
+const ignoredVariationAxes = new Set(['wdth', 'slnt', 'opsz']);
+
+function renderNumberRange(min, max) {
+  if (min === max) {
+    return String(min);
+  } else {
+    return `${min}-${max}`;
+  }
+}
+
+function warnAboutUnusedVariationAxes(
+  htmlOrSvgAssetTextsWithProps,
+  assetGraph
 ) {
-  if (!validFontDisplayValues.includes(fontDisplay)) {
-    fontDisplay = undefined;
+  const seenAxisValuesByFontUrlAndAxisName = new Map();
+  const outOfBoundsAxesByFontUrl = new Map();
+
+  for (const { fontUsages } of htmlOrSvgAssetTextsWithProps) {
+    for (const {
+      fontUrl,
+      fontVariationSettings,
+      fontStyles,
+      fontWeights,
+      hasOutOfBoundsAnimationTimingFunction,
+      props,
+    } of fontUsages) {
+      let seenAxes = seenAxisValuesByFontUrlAndAxisName.get(fontUrl);
+      if (!seenAxes) {
+        seenAxes = new Map();
+        seenAxisValuesByFontUrlAndAxisName.set(fontUrl, seenAxes);
+      }
+      const seenItalValues = [];
+      if (fontStyles.has('italic')) {
+        seenItalValues.push(1);
+      }
+      // If any font-style value except italic is seen (including normal or oblique)
+      // we're also utilizing value 0:
+      if (fontStyles.size > fontStyles.has('italic') ? 1 : 0) {
+        seenItalValues.push(0);
+      }
+      if (seenItalValues.length > 0) {
+        if (seenAxes.has('ital')) {
+          seenAxes.get('ital').push(...seenItalValues);
+        } else {
+          seenAxes.set('ital', seenItalValues);
+        }
+      }
+
+      const minMaxFontWeight = parseFontWeightRange(props['font-weight']);
+      const seenFontWeightValues = [];
+      for (const fontWeight of fontWeights) {
+        seenFontWeightValues.push(_.clamp(fontWeight, ...minMaxFontWeight));
+      }
+      if (seenFontWeightValues.length > 0) {
+        if (seenAxes.has('wght')) {
+          seenAxes.get('wght').push(...seenFontWeightValues);
+        } else {
+          seenAxes.set('wght', seenFontWeightValues);
+        }
+      }
+
+      for (const fontVariationSettingsValue of fontVariationSettings) {
+        for (const [axisName, axisValue] of parseFontVariationSettings(
+          fontVariationSettingsValue
+        )) {
+          const seenAxisValues = seenAxes.get(axisName);
+          if (seenAxisValues) {
+            seenAxisValues.push(axisValue);
+          } else {
+            seenAxes.set(axisName, [axisValue]);
+          }
+          if (hasOutOfBoundsAnimationTimingFunction) {
+            let outOfBoundsAxes = outOfBoundsAxesByFontUrl.get(fontUrl);
+            if (!outOfBoundsAxes) {
+              outOfBoundsAxes = new Set();
+              outOfBoundsAxesByFontUrl.set(fontUrl, outOfBoundsAxes);
+            }
+            outOfBoundsAxes.add(axisName);
+          }
+        }
+      }
+    }
   }
 
-  const htmlOrSvgAssetTextsWithProps = [];
-  const subsetUrl = urltools.ensureTrailingSlash(assetGraph.root + subsetPath);
+  const warnings = [];
+  for (const [
+    fontUrl,
+    seenAxisValuesByAxisName,
+  ] of seenAxisValuesByFontUrlAndAxisName.entries()) {
+    const outOfBoundsAxes = outOfBoundsAxesByFontUrl.get(fontUrl) || new Set();
+    let font;
+    try {
+      font = fontkit.create(assetGraph.findAssets({ url: fontUrl })[0].rawSrc);
+    } catch (err) {
+      // Don't break if we encounter an invalid font or one that's unsupported by fontkit
+      continue;
+    }
+    const unusedAxes = [];
+    const underutilizedAxes = [];
+    for (const [name, { min, max, default: defaultValue }] of Object.entries(
+      font.variationAxes
+    )) {
+      if (ignoredVariationAxes.has(name)) {
+        continue;
+      }
+      if (seenAxisValuesByAxisName.has(name) && !outOfBoundsAxes.has(name)) {
+        const usedValues = [...seenAxisValuesByAxisName.get(name)];
+        if (!standardVariationAxes.has(name)) {
+          usedValues.push(defaultValue);
+        }
+        const minUsed = Math.min(...usedValues);
+        const maxUsed = Math.max(...usedValues);
+        if (minUsed > min || maxUsed < max) {
+          underutilizedAxes.push({
+            name,
+            minUsed,
+            maxUsed,
+            min,
+            max,
+          });
+        }
+      } else {
+        unusedAxes.push(name);
+      }
+    }
 
-  await assetGraph.applySourceMaps({ type: 'Css' });
+    if (unusedAxes.length > 0 || underutilizedAxes.length > 0) {
+      let message = `${fontUrl}:\n`;
+      if (unusedAxes.length > 0) {
+        message += `  Unused axes: ${unusedAxes.join(', ')}\n`;
+      }
+      if (underutilizedAxes.length > 0) {
+        message += `  Underutilized axes:\n${underutilizedAxes
+          .map(
+            ({ name, min, max, minUsed, maxUsed }) =>
+              `    ${name}: ${renderNumberRange(
+                minUsed,
+                maxUsed
+              )} used (${min}-${max} available)`
+          )
+          .join('\n')}\n`;
+      }
+      warnings.push(message);
+    }
+  }
 
-  await assetGraph.populate({
-    followRelations: {
-      $or: [
-        {
-          to: {
-            url: googleFontsCssUrlRegex,
-          },
-        },
-        {
-          type: 'CssFontFaceSrc',
-          from: {
-            url: googleFontsCssUrlRegex,
-          },
-        },
-      ],
-    },
-  });
+  if (warnings.length > 0) {
+    assetGraph.info(
+      new Error(`🪓 Unused variation axes detected in your variable fonts.
+The below variable fonts contain custom axes that do not appear to be fully used on any of your pages.
+This bloats your fonts and also the subset fonts that subfont creates.
+Consider removing the unused axis ranges using a tool like Slice <https://slice-gui.netlify.app/>
+${warnings.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 +924,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 = [];
@@ -685,9 +960,8 @@ async function subsetFonts(
                 node.walkDecls((declaration) => {
                   const propName = declaration.prop.toLowerCase();
                   if (propName === 'font-family') {
-                    fontFaceDeclaration[propName] = fontFamily.parse(
-                      declaration.value
-                    )[0];
+                    fontFaceDeclaration[propName] =
+                      cssFontParser.parseFontFamily(declaration.value)[0];
                   } else {
                     fontFaceDeclaration[propName] = declaration.value;
                   }
@@ -774,7 +1048,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 +1187,8 @@ 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);
+  warnAboutUnusedVariationAxes(htmlOrSvgAssetTextsWithProps, assetGraph);
 
   // Insert subsets:
 
@@ -1021,7 +1274,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 +1344,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;
@@ -1105,7 +1357,7 @@ These glyphs are used on your site, but they don't exist in the font you applied
 
       if (
         fontAsset.contentType === 'font/woff2' &&
-        fontRelation.to.path.startsWith('/subfont/')
+        fontRelation.to.url.startsWith(subsetUrl)
       ) {
         const fontFaceDeclaration = fontRelation.node;
         const originalFontFamily = unquote(
@@ -1226,7 +1478,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;
       }
 
@@ -1309,9 +1561,10 @@ These glyphs are used on your site, but they don't exist in the font you applied
                 assetGraph,
                 googleFontStylesheetRelation.to,
                 formats,
-                hrefType
+                hrefType,
+                subsetUrl
               );
-            subsetFontsToBeMinified.add(selfHostedGoogleFontsCssAsset);
+            await selfHostedGoogleFontsCssAsset.minify();
             selfHostedGoogleCssByUrl.set(
               googleFontStylesheetRelation.to.url,
               selfHostedGoogleFontsCssAsset
@@ -1374,7 +1627,9 @@ These glyphs are used on your site, but they don't exist in the font you applied
       );
       for (let i = 0; i < fontFamilies.length; i += 1) {
         const subsetFontFamily =
-          webfontNameMap[fontFamily.parse(fontFamilies[i])[0].toLowerCase()];
+          webfontNameMap[
+            cssFontParser.parseFontFamily(fontFamilies[i])[0].toLowerCase()
+          ];
         if (subsetFontFamily && !fontFamilies.includes(subsetFontFamily)) {
           fontFamilies.splice(
             i,
@@ -1434,7 +1689,7 @@ These glyphs are used on your site, but they don't exist in the font you applied
           for (let i = 0; i < fontFamilies.length; i += 1) {
             const subsetFontFamily =
               webfontNameMap[
-                fontFamily.parse(fontFamilies[i])[0].toLowerCase()
+                cssFontParser.parseFontFamily(fontFamilies[i])[0].toLowerCase()
               ];
             if (subsetFontFamily && !fontFamilies.includes(subsetFontFamily)) {
               fontFamilies.splice(
@@ -1448,7 +1703,7 @@ These glyphs are used on your site, but they don't exist in the font you applied
             }
           }
         } else if (propName === 'font') {
-          const fontProperties = cssFontParser(cssRule.value);
+          const fontProperties = cssFontParser.parseFont(cssRule.value);
           const fontFamilies =
             fontProperties && fontProperties['font-family'].map(unquote);
           if (fontFamilies) {
@@ -1492,11 +1747,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.11.0",
   "description": "Speeds up your pages initial paint by automatically subsetting local or Google fonts and loading them optimally",
   "engines": {
     "node": ">=10.0.0"
@@ -47,14 +47,14 @@
   "homepage": "https://github.com/Munter/subfont#readme",
   "dependencies": {
     "@gustavnikolaj/async-main-wrap": "^3.0.1",
+    "@hookun/parse-animation-shorthand": "^0.1.4",
     "assetgraph": "^7.8.1",
     "browserslist": "^4.13.0",
-    "css-font-parser": "^0.3.0",
+    "css-font-parser": "^2.0.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": "^3.2.0",
+    "font-tracer": "^3.6.0",
     "fontkit": "^1.8.0",
     "fontverter": "^2.0.0",
     "gettemporaryfilepath": "^1.0.1",