subfont 6.11.0 → 6.12.0

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+### v6.12.0 (2022-09-07)
+
+- [Refactor repeated code into helper function](https://github.com/Munter/subfont/commit/5335d931957cadc150fed1c5d548ee6b6e245636) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
+- [Clamp the used variation axis values to the available interval](https://github.com/Munter/subfont/commit/1429c0f35720ee8dadb691138eb4cfa3c1c86150) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
+- [Detech unused slnt variation axis ranges](https://github.com/Munter/subfont/commit/dc4be1598ba1ba0e65d8269d0fa2d25aa528357d) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
+- [Report variation axes that only use the default value as unused rather than underutilized](https://github.com/Munter/subfont/commit/12082590898407f558d9540347778272ddb9d197) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
+- [Detect unused wdth variation axis ranges](https://github.com/Munter/subfont/commit/d7758eb3c9a45a49768aac12c36ed897a0c4b467) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
+
 ### 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))

package/lib/normalizeFontPropertyValue.js

@@ -1,6 +1,7 @@
 const cssFontWeightNames = require('css-font-weight-names');
 const initialValueByProp = require('./initialValueByProp');
 const unquote = require('./unquote');
+const normalizeFontStretch = require('font-snapper/lib/normalizeFontStretch');
 
 function normalizeFontPropertyValue(propName, value) {
   const propNameLowerCase = propName.toLowerCase();
@@ -22,6 +23,8 @@ function normalizeFontPropertyValue(propName, value) {
     } else {
       return value;
     }
+  } else if (propNameLowerCase === 'font-stretch') {
+    return normalizeFontStretch(value);
   } else if (typeof value === 'string' && propNameLowerCase !== 'src') {
     return value.toLowerCase();
   }

package/lib/subsetFonts.js

@@ -213,6 +213,10 @@ function groupTextsByFontFamilyProps(
           fontVariationSettings: textAndProps.props['font-variation-settings'],
           fontStyle,
           fontWeight,
+          fontStretch: normalizeFontPropertyValue(
+            'font-stretch',
+            textAndProps.props['font-stretch']
+          ),
           animationTimingFunction:
             textAndProps.props['animation-timing-function'],
           props,
@@ -234,6 +238,9 @@ function groupTextsByFontFamilyProps(
     );
     const fontStyles = new Set(textsPropsArray.map((obj) => obj.fontStyle));
     const fontWeights = new Set(textsPropsArray.map((obj) => obj.fontWeight));
+    const fontStretches = new Set(
+      textsPropsArray.map((obj) => obj.fontStretch)
+    );
     const fontVariationSettings = new Set(
       textsPropsArray
         .map((obj) => obj.fontVariationSettings)
@@ -274,6 +281,7 @@ function groupTextsByFontFamilyProps(
       fontUrl,
       fontFamilies,
       fontStyles,
+      fontStretches,
       fontWeights,
       fontVariationSettings,
       hasOutOfBoundsAnimationTimingFunction,
@@ -638,6 +646,9 @@ function cssAssetIsEmpty(cssAsset) {
 }
 
 function parseFontWeightRange(str) {
+  if (typeof str === 'undefined' || str === 'auto') {
+    return [-Infinity, Infinity];
+  }
   let minFontWeight = 400;
   let maxFontWeight = 400;
   const fontWeightTokens = str.split(/\s+/).map((str) => parseFloat(str));
@@ -653,6 +664,27 @@ function parseFontWeightRange(str) {
   return [minFontWeight, maxFontWeight];
 }
 
+function parseFontStretchRange(str) {
+  if (typeof str === 'undefined' || str.toLowerCase() === 'auto') {
+    return [-Infinity, Infinity];
+  }
+  let minFontStretch = 100;
+  let maxFontStretch = 100;
+  const fontStretchTokens = str
+    .split(/\s+/)
+    .map((str) => normalizeFontPropertyValue('font-stretch', str));
+  if (
+    [1, 2].includes(fontStretchTokens.length) &&
+    !fontStretchTokens.some(isNaN)
+  ) {
+    minFontStretch = maxFontStretch = fontStretchTokens[0];
+    if (fontStretchTokens.length === 2) {
+      maxFontStretch = fontStretchTokens[1];
+    }
+  }
+  return [minFontStretch, maxFontStretch];
+}
+
 function warnAboutMissingGlyphs(htmlOrSvgAssetTextsWithProps, assetGraph) {
   const missingGlyphsErrors = [];
 
@@ -744,8 +776,9 @@ These glyphs are used on your site, but they don't exist in the font you applied
 }
 
 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']);
+// It would be very hard to trace statically which values of opsz (font-optical-sizing)
+// are going to be used, so we ignore that one:
+const ignoredVariationAxes = new Set(['opsz']);
 
 function renderNumberRange(min, max) {
   if (min === max) {
@@ -762,60 +795,72 @@ function warnAboutUnusedVariationAxes(
   const seenAxisValuesByFontUrlAndAxisName = new Map();
   const outOfBoundsAxesByFontUrl = new Map();
 
+  function noteUsedValue(fontUrl, axisName, axisValue) {
+    let seenAxes = seenAxisValuesByFontUrlAndAxisName.get(fontUrl);
+    if (!seenAxes) {
+      seenAxes = new Map();
+      seenAxisValuesByFontUrlAndAxisName.set(fontUrl, seenAxes);
+    }
+    if (seenAxes.has(axisName)) {
+      seenAxes.get(axisName).push(axisValue);
+    } else {
+      seenAxes.set(axisName, [axisValue]);
+    }
+  }
+
   for (const { fontUsages } of htmlOrSvgAssetTextsWithProps) {
     for (const {
       fontUrl,
-      fontVariationSettings,
       fontStyles,
       fontWeights,
+      fontStretches,
+      fontVariationSettings,
       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);
+        noteUsedValue(fontUrl, 'ital', 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);
+        noteUsedValue(fontUrl, 'ital', 0);
       }
-      if (seenItalValues.length > 0) {
-        if (seenAxes.has('ital')) {
-          seenAxes.get('ital').push(...seenItalValues);
-        } else {
-          seenAxes.set('ital', seenItalValues);
-        }
+      if (fontStyles.has('oblique')) {
+        // https://www.w3.org/TR/css-fonts-4/#font-style-prop
+        // oblique <angle>?
+        // [...] The lack of an <angle> represents 14deg.
+        noteUsedValue(fontUrl, 'slnt', 14);
+      }
+      // If any font-style value except oblique is seen (including normal or italic)
+      // we're also utilizing value 0:
+      if (fontStyles.size > fontStyles.has('oblique') ? 1 : 0) {
+        noteUsedValue(fontUrl, 'slnt', 0);
       }
 
       const minMaxFontWeight = parseFontWeightRange(props['font-weight']);
-      const seenFontWeightValues = [];
       for (const fontWeight of fontWeights) {
-        seenFontWeightValues.push(_.clamp(fontWeight, ...minMaxFontWeight));
+        noteUsedValue(
+          fontUrl,
+          'wght',
+          _.clamp(fontWeight, ...minMaxFontWeight)
+        );
       }
-      if (seenFontWeightValues.length > 0) {
-        if (seenAxes.has('wght')) {
-          seenAxes.get('wght').push(...seenFontWeightValues);
-        } else {
-          seenAxes.set('wght', seenFontWeightValues);
-        }
+
+      const minMaxFontStretch = parseFontStretchRange(props['font-stretch']);
+      for (const fontStrech of fontStretches) {
+        noteUsedValue(
+          fontUrl,
+          'wdth',
+          _.clamp(fontStrech, ...minMaxFontStretch)
+        );
       }
 
       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]);
-          }
+          noteUsedValue(fontUrl, axisName, axisValue);
           if (hasOutOfBoundsAnimationTimingFunction) {
             let outOfBoundsAxes = outOfBoundsAxesByFontUrl.get(fontUrl);
             if (!outOfBoundsAxes) {
@@ -850,8 +895,13 @@ function warnAboutUnusedVariationAxes(
       if (ignoredVariationAxes.has(name)) {
         continue;
       }
+      let usedValues = [];
       if (seenAxisValuesByAxisName.has(name) && !outOfBoundsAxes.has(name)) {
-        const usedValues = [...seenAxisValuesByAxisName.get(name)];
+        usedValues = [...seenAxisValuesByAxisName.get(name)].map((usedValue) =>
+          _.clamp(usedValue, min, max)
+        );
+      }
+      if (!usedValues.every((value) => value === defaultValue)) {
         if (!standardVariationAxes.has(name)) {
           usedValues.push(defaultValue);
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "subfont",
-  "version": "6.11.0",
+  "version": "6.12.0",
   "description": "Speeds up your pages initial paint by automatically subsetting local or Google fonts and loading them optimally",
   "engines": {
     "node": ">=10.0.0"