subfont 6.10.0 → 6.11.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+### 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))

package/lib/parseFontVariationSettings.js

@@ -12,7 +12,7 @@ module.exports = function* parseFontVariationSettings(value) {
         if (token.type !== 'string') {
           return;
         }
-        axisName = token.value.toUpperCase();
+        axisName = token.value;
         state = 'AFTER_AXIS_NAME';
         break;
       }

package/lib/subsetFonts.js

@@ -194,10 +194,25 @@ 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,
@@ -217,6 +232,8 @@ 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)
@@ -256,6 +273,8 @@ function groupTextsByFontFamilyProps(
       props: { ...textsPropsArray[0].props },
       fontUrl,
       fontFamilies,
+      fontStyles,
+      fontWeights,
       fontVariationSettings,
       hasOutOfBoundsAnimationTimingFunction,
       preload,
@@ -618,6 +637,22 @@ function cssAssetIsEmpty(cssAsset) {
   );
 }
 
+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 = [];
 
@@ -708,9 +743,19 @@ These glyphs are used on your site, but they don't exist in the font you applied
   }
 }
 
-const standardVariationAxes = new Set(['WGHT', 'ITAL', 'SLNT', 'OPSZ']);
+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 warnAboutUnusedCustomVariationAxes(
+function warnAboutUnusedVariationAxes(
   htmlOrSvgAssetTextsWithProps,
   assetGraph
 ) {
@@ -721,13 +766,45 @@ function warnAboutUnusedCustomVariationAxes(
     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(
@@ -767,26 +844,22 @@ function warnAboutUnusedCustomVariationAxes(
     }
     const unusedAxes = [];
     const underutilizedAxes = [];
-    for (const { name, min, max, default: defaultValue } of Object.values(
+    for (const [name, { min, max, default: defaultValue }] of Object.entries(
       font.variationAxes
     )) {
-      const axisName = name.toUpperCase();
-      if (standardVariationAxes.has(axisName)) {
+      if (ignoredVariationAxes.has(name)) {
         continue;
       }
-      if (
-        seenAxisValuesByAxisName.has(axisName) &&
-        !outOfBoundsAxes.has(axisName)
-      ) {
-        const usedValues = [
-          defaultValue,
-          ...seenAxisValuesByAxisName.get(axisName),
-        ];
+      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: axisName,
+            name,
             minUsed,
             maxUsed,
             min,
@@ -794,7 +867,7 @@ function warnAboutUnusedCustomVariationAxes(
           });
         }
       } else {
-        unusedAxes.push(axisName);
+        unusedAxes.push(name);
       }
     }
 
@@ -807,7 +880,10 @@ function warnAboutUnusedCustomVariationAxes(
         message += `  Underutilized axes:\n${underutilizedAxes
           .map(
             ({ name, min, max, minUsed, maxUsed }) =>
-              `    ${name}: ${minUsed}-${maxUsed} used (${min}-${max} available)`
+              `    ${name}: ${renderNumberRange(
+                minUsed,
+                maxUsed
+              )} used (${min}-${max} available)`
           )
           .join('\n')}\n`;
       }
@@ -817,7 +893,7 @@ function warnAboutUnusedCustomVariationAxes(
 
   if (warnings.length > 0) {
     assetGraph.info(
-      new Error(`🪓 Unused custom variation axes detected in your variable fonts.
+      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/>
@@ -1112,7 +1188,7 @@ async function subsetFonts(
   );
 
   warnAboutMissingGlyphs(htmlOrSvgAssetTextsWithProps, assetGraph);
-  warnAboutUnusedCustomVariationAxes(htmlOrSvgAssetTextsWithProps, assetGraph);
+  warnAboutUnusedVariationAxes(htmlOrSvgAssetTextsWithProps, assetGraph);
 
   // Insert subsets:
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "subfont",
-  "version": "6.10.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"