subfont 7.1.0 → 7.2.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+### v7.2.0 (2024-03-24)
+
+#### Pull requests
+
+- [#172](https://github.com/Munter/subfont/pull/172) Support partial instancing of variable fonts ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
+
+#### Commits to master
+
+- [Update subset-font to ^2.2.0](https://github.com/Munter/subfont/commit/1cf16cb1769c65e3a5b34d440b619b238a27141b) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
+
+### v7.1.1 (2023-05-08)
+
+- [Fix file name generation when the font-family contains backslash Fixes \#171](https://github.com/Munter/subfont/commit/1cff3c4095680569ecf50d017035730eb4bd0cc0) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
+
 ### v7.1.0 (2023-04-15)
 
 - [#170](https://github.com/Munter/subfont/pull/170) Use harfbuzzjs instead of fontkit ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
@@ -15,7 +29,11 @@
 - [Tell eslint to ignore the puppeteer-browsers dir](https://github.com/Munter/subfont/commit/99bca776a0bd7fab4c3e9c1084c23ae5f7c4e18b) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
 - [Drop node.js 14](https://github.com/Munter/subfont/commit/0dcf1ed53fa20f7eb4585e6e3813fa8d97aefae5) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
 - [Tolerate different moch console call orders](https://github.com/Munter/subfont/commit/046971fa1b9fb4096b108cd777f18c34bb938438) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
-- [+10 more](https://github.com/Munter/subfont/compare/v6.12.4...v7.0.0)
+- [+10 more](https://github.com/Munter/subfont/compare/v6.12.5...v7.0.0)
+
+### v6.12.5 (2023-05-08)
+
+- [Fix file name generation when the font-family contains backslash Fixes \#171](https://github.com/Munter/subfont/commit/5619db3bbbcffa41871b2bc04d4cafa15d409bde) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
 
 ### v6.12.4 (2023-01-06)
 

package/README.md

@@ -107,6 +107,8 @@ Options:
                                                                         [boolean] [default: false]
   --relative-urls                    Issue relative urls instead of root-relative ones
                                                                         [boolean] [default: false]
+  --instance                         Experimentally instance variable fonts when the variation
+                                     space isn't fully used             [boolean] [default: false]
   --silent, -s                       Do not write anything to stdout    [boolean] [default: false]
   --debug, -d                        Verbose insights into font glyph detection
                                                                         [boolean] [default: false]

package/lib/parseCommandLineOptions.js

@@ -75,7 +75,7 @@ module.exports = function parseCommandLineOptions(argv) {
       default: false,
     })
     .options('font-display', {
-      describe: 'Injects a font-display value into the @font-face CSS.',
+      describe: 'Injects a font-display value into the @font-face CSS',
       type: 'string',
       default: 'swap',
       choices: ['auto', 'block', 'swap', 'fallback', 'optional'],
@@ -94,7 +94,7 @@ module.exports = function parseCommandLineOptions(argv) {
     })
     .options('instance', {
       describe:
-        'Experimentally instance variable fonts when every variation axis only has one value (only supports full instancing for now)',
+        "Experimentally instance variable fonts when the variation space isn't fully used",
       type: 'boolean',
       default: false,
     })

package/lib/subfont.js

@@ -359,8 +359,30 @@ module.exports = async function subfont(
           fontUsage.smallestOriginalSize !== undefined &&
           fontUsage.smallestSubsetSize !== undefined
         ) {
-          if (fontUsage.variationAxes) {
+          if (fontUsage.fullyInstanced) {
             status += ', fully instanced';
+          } else if (fontUsage.numAxesReduced > 0 || fontUsage.numAxesPinned) {
+            const instancingInfos = [];
+            if (fontUsage.numAxesPinned > 0) {
+              instancingInfos.push(
+                `${fontUsage.numAxesPinned} ${
+                  fontUsage.numAxesPinned === 1 ? 'axis' : 'axes'
+                } pinned`
+              );
+            }
+            if (fontUsage.numAxesReduced) {
+              instancingInfos.push(
+                `${fontUsage.numAxesReduced}${
+                  fontUsage.numAxesPinned > 0
+                    ? ''
+                    : fontUsage.numAxesReduced === 1
+                    ? ' axis'
+                    : ' axes'
+                } reduced`
+              );
+            }
+
+            status += `, partially instanced (${instancingInfos.join(', ')})`;
           }
           status += `, ${prettyBytes(fontUsage.smallestOriginalSize)} (${
             fontUsage.smallestOriginalFormat

package/lib/subsetFonts.js

@@ -383,7 +383,7 @@ function getSubsetPromiseId(fontUsage, format, variationAxes = null) {
   ].join('\x1d');
 }
 
-async function getFullyPinnedVariationAxes(
+async function getVariationAxisBounds(
   assetGraph,
   fontUrl,
   seenAxisValuesByFontUrlAndAxisName
@@ -392,13 +392,14 @@ async function getFullyPinnedVariationAxes(
     assetGraph.findAssets({ url: fontUrl })[0].rawSrc
   );
 
-  let variationAxes;
+  const variationAxes = {};
+  let fullyInstanced = true;
+  let numAxesPinned = 0;
+  let numAxesReduced = 0;
   const fontVariationEntries = Object.entries(fontInfo.variationAxes);
   const seenAxisValuesByAxisName =
     seenAxisValuesByFontUrlAndAxisName.get(fontUrl);
   if (fontVariationEntries.length > 0 && seenAxisValuesByAxisName) {
-    variationAxes = {};
-    let everyAxisPinned = true;
     for (const [
       axisName,
       { min, max, default: defaultValue },
@@ -409,16 +410,27 @@ async function getFullyPinnedVariationAxes(
       }
       if (seenAxisValues && seenAxisValues.size === 1) {
         variationAxes[axisName] = _.clamp([...seenAxisValues][0], min, max);
-      } else {
-        everyAxisPinned = false;
+        numAxesPinned += 1;
+      } else if (seenAxisValues) {
+        const minSeenValue = Math.min(...seenAxisValues);
+        const maxSeenValue = Math.max(...seenAxisValues);
+        variationAxes[axisName] = {
+          min: Math.min(minSeenValue, min),
+          max: Math.min(maxSeenValue, max),
+        };
+        fullyInstanced = false;
+        if (minSeenValue > min || maxSeenValue < max) {
+          numAxesReduced += 1;
+        }
       }
     }
-    if (!everyAxisPinned) {
-      // Not all variation axes can be fully pinned, bail out
-      variationAxes = undefined;
-    }
   }
-  return variationAxes;
+  return {
+    fullyInstanced,
+    numAxesReduced,
+    numAxesPinned,
+    variationAxes,
+  };
 }
 
 async function getSubsetsForFontUsage(
@@ -462,22 +474,25 @@ async function getSubsetsForFontUsage(
   }, {});
 
   const subsetPromiseMap = {};
-  const notFullyInstancedFontUrls = new Set();
 
   for (const item of htmlOrSvgAssetTextsWithProps) {
     for (const fontUsage of item.fontUsages) {
       const fontBuffer = originalFontBuffers[fontUsage.fontUrl];
       const text = fontUsage.text;
       let variationAxes;
+      let fullyInstanced = false;
+      let numAxesReduced = 0;
+      let numAxesPinned = 0;
       if (instance) {
-        variationAxes = await getFullyPinnedVariationAxes(
+        const res = await getVariationAxisBounds(
           assetGraph,
           fontUsage.fontUrl,
           seenAxisValuesByFontUrlAndAxisName
         );
-      }
-      if (!variationAxes) {
-        notFullyInstancedFontUrls.add(fontUsage.fontUrl);
+        variationAxes = res.variationAxes;
+        fullyInstanced = res.fullyInstanced;
+        numAxesReduced = res.numAxesReduced;
+        numAxesPinned = res.numAxesPinned;
       }
 
       for (const targetFormat of formats) {
@@ -515,6 +530,9 @@ async function getSubsetsForFontUsage(
               fontUsage.smallestSubsetSize = size;
               fontUsage.smallestSubsetFormat = targetFormat;
               fontUsage.variationAxes = variationAxes;
+              fontUsage.fullyInstanced = fullyInstanced;
+              fontUsage.numAxesPinned = numAxesPinned;
+              fontUsage.numAxesReduced = numAxesReduced;
             }
           }
         });
@@ -523,8 +541,6 @@ async function getSubsetsForFontUsage(
   }
 
   await Promise.all(Object.values(subsetPromiseMap));
-
-  return { notFullyInstancedFontUrls };
 }
 
 const fontOrder = ['woff2', 'woff', 'truetype'];
@@ -949,17 +965,13 @@ function getVariationAxisUsage(htmlOrSvgAssetTextsWithProps) {
 async function warnAboutUnusedVariationAxes(
   assetGraph,
   seenAxisValuesByFontUrlAndAxisName,
-  outOfBoundsAxesByFontUrl,
-  notFullyInstancedFontUrls
+  outOfBoundsAxesByFontUrl
 ) {
   const warnings = [];
   for (const [
     fontUrl,
     seenAxisValuesByAxisName,
   ] of seenAxisValuesByFontUrlAndAxisName.entries()) {
-    if (!notFullyInstancedFontUrls.has(fontUrl)) {
-      continue;
-    }
     const outOfBoundsAxes = outOfBoundsAxesByFontUrl.get(fontUrl) || new Set();
     let fontInfo;
     try {
@@ -1030,7 +1042,7 @@ async function warnAboutUnusedVariationAxes(
       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/>
+Consider removing the unused axis ranges by specifying the --instance switch
 ${warnings.join('\n')}`)
     );
   }
@@ -1320,7 +1332,7 @@ async function subsetFonts(
     getVariationAxisUsage(htmlOrSvgAssetTextsWithProps);
 
   // Generate subsets:
-  const { notFullyInstancedFontUrls } = await getSubsetsForFontUsage(
+  await getSubsetsForFontUsage(
     assetGraph,
     htmlOrSvgAssetTextsWithProps,
     formats,
@@ -1329,12 +1341,13 @@ async function subsetFonts(
   );
 
   await warnAboutMissingGlyphs(htmlOrSvgAssetTextsWithProps, assetGraph);
-  await warnAboutUnusedVariationAxes(
-    assetGraph,
-    seenAxisValuesByFontUrlAndAxisName,
-    outOfBoundsAxesByFontUrl,
-    notFullyInstancedFontUrls
-  );
+  if (!instance) {
+    await warnAboutUnusedVariationAxes(
+      assetGraph,
+      seenAxisValuesByFontUrlAndAxisName,
+      outOfBoundsAxesByFontUrl
+    );
+  }
 
   // Insert subsets:
 
@@ -1475,9 +1488,11 @@ async function subsetFonts(
         .split(/\s+/)
         .map((token) => normalizeFontPropertyValue('font-weight', token))
         .join('_');
-      const fileNamePrefix = `${unquote(nameProps[0])
+      const fileNamePrefix = `${unquote(
+        cssFontParser.parseFontFamily(nameProps[0])[0]
+      )
         .replace(/__subset$/, '')
-        .replace(/ /g, '_')}-${fontWeightRangeStr}${
+        .replace(/[^a-z0-9_-]/gi, '_')}-${fontWeightRangeStr}${
         nameProps[2] === 'italic' ? 'i' : ''
       }`;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "subfont",
-  "version": "7.1.0",
+  "version": "7.2.0",
   "description": "Speeds up your pages initial paint by automatically subsetting local or Google fonts and loading them optimally",
   "engines": {
     "node": ">=10.0.0"
@@ -66,7 +66,7 @@
     "pretty-bytes": "^5.1.0",
     "puppeteer-core": "^19.8.5",
     "specificity": "^0.4.1",
-    "subset-font": "^2.1.0",
+    "subset-font": "^2.2.0",
     "urltools": "^0.4.1",
     "yargs": "^15.4.0"
   },