subfont 6.10.0 → 6.12.1

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+### v6.12.1 (2022-09-11)
+
+- [Map font-style: oblique to font-variation-settings: slnt -14](https://github.com/Munter/subfont/commit/ea96284729e0d100fcb87d09c63979641439b169) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
+- [Fix typo in test case](https://github.com/Munter/subfont/commit/b07273ff0daff38a23ef9b0ce77d5a114c4e2154) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
+- [Improve slnt axis test case with a copy of the Extendomatic font Should be OK according to the license: https:\/\/djr.com\/license\/\#server https:\/\/twitter.com\/djrrb\/status\/1568539078416539654?s=20&t=P3w5SKI\_UHV3zzrBMj47lQ](https://github.com/Munter/subfont/commit/f6692fc3ad17a745bda13d1eb78ccd5fb340b369) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
+
+### 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))
+- [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/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/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,29 @@ 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,
+          fontStretch: normalizeFontPropertyValue(
+            'font-stretch',
+            textAndProps.props['font-stretch']
+          ),
           animationTimingFunction:
             textAndProps.props['animation-timing-function'],
           props,
@@ -217,6 +236,11 @@ 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 fontStretches = new Set(
+      textsPropsArray.map((obj) => obj.fontStretch)
+    );
     const fontVariationSettings = new Set(
       textsPropsArray
         .map((obj) => obj.fontVariationSettings)
@@ -256,6 +280,9 @@ function groupTextsByFontFamilyProps(
       props: { ...textsPropsArray[0].props },
       fontUrl,
       fontFamilies,
+      fontStyles,
+      fontStretches,
+      fontWeights,
       fontVariationSettings,
       hasOutOfBoundsAnimationTimingFunction,
       preload,
@@ -618,6 +645,46 @@ 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));
+  if (
+    [1, 2].includes(fontWeightTokens.length) &&
+    !fontWeightTokens.some(isNaN)
+  ) {
+    minFontWeight = maxFontWeight = fontWeightTokens[0];
+    if (fontWeightTokens.length === 2) {
+      maxFontWeight = fontWeightTokens[1];
+    }
+  }
+  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 = [];
 
@@ -708,37 +775,95 @@ 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']);
+// 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 warnAboutUnusedCustomVariationAxes(
+function renderNumberRange(min, max) {
+  if (min === max) {
+    return String(min);
+  } else {
+    return `${min}-${max}`;
+  }
+}
+
+function warnAboutUnusedVariationAxes(
   htmlOrSvgAssetTextsWithProps,
   assetGraph
 ) {
   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,
+      fontStyles,
+      fontWeights,
+      fontStretches,
       fontVariationSettings,
       hasOutOfBoundsAnimationTimingFunction,
+      props,
     } of fontUsages) {
-      let seenAxes = seenAxisValuesByFontUrlAndAxisName.get(fontUrl);
-      if (!seenAxes) {
-        seenAxes = new Map();
-        seenAxisValuesByFontUrlAndAxisName.set(fontUrl, seenAxes);
+      if (fontStyles.has('italic')) {
+        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) {
+        noteUsedValue(fontUrl, 'ital', 0);
+      }
+      if (fontStyles.has('oblique')) {
+        // https://www.w3.org/TR/css-fonts-4/#font-style-prop
+        // oblique <angle>?
+        //   [...] The lack of an <angle> represents 14deg.
+        // And also:
+        //   Note: the OpenType slnt axis is defined with a positive angle meaning a counter-clockwise slant, the opposite direction to CSS.
+        // sThe CSS implementation will take this into account when using variations to produce oblique faces.
+        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']);
+      for (const fontWeight of fontWeights) {
+        noteUsedValue(
+          fontUrl,
+          'wght',
+          _.clamp(fontWeight, ...minMaxFontWeight)
+        );
+      }
+
+      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) {
@@ -767,26 +892,27 @@ 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),
-        ];
+      let usedValues = [];
+      if (seenAxisValuesByAxisName.has(name) && !outOfBoundsAxes.has(name)) {
+        usedValues = [...seenAxisValuesByAxisName.get(name)].map((usedValue) =>
+          _.clamp(usedValue, min, max)
+        );
+      }
+      if (!usedValues.every((value) => value === defaultValue)) {
+        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 +920,7 @@ function warnAboutUnusedCustomVariationAxes(
           });
         }
       } else {
-        unusedAxes.push(axisName);
+        unusedAxes.push(name);
       }
     }
 
@@ -807,7 +933,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 +946,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 +1241,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.12.1",
   "description": "Speeds up your pages initial paint by automatically subsetting local or Google fonts and loading them optimally",
   "engines": {
     "node": ">=10.0.0"