subfont 6.12.4 → 7.0.0

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+### v7.0.0 (2023-04-08)
+
+#### Pull requests
+
+- [#169](https://github.com/Munter/subfont/pull/169) Support full instancing of variable fonts ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
+
+#### Commits to master
+
+- [Also tell prettier to ignore the puppeteer-browsers dir](https://github.com/Munter/subfont/commit/0e55e8838902d4c4730176313359abbda1c8ebd6) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
+- [Revert "Drop node.js 14"](https://github.com/Munter/subfont/commit/5e54905f05bc398b4aebdbefeb766c42664866b3) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
+- [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)
+
+### v6.12.4 (2023-01-06)
+
+- [Adapt to a backwards incompatible change in @hookun\/parse-animation-shorthand 0.1.5](https://github.com/Munter/subfont/commit/0d024aeaca1ac4ebb52ecacf9e20151d3102b1df) ([Andreas Lind](mailto:andreas.lind@workday.com))
+
 ### v6.12.3 (2023-01-06)
 
 - [Update @hookun\/parse-animation-shorthand to ^0.1.5, fixes \#168](https://github.com/Munter/subfont/commit/ec19b28392e02c2a4cc42e0124cca5fce4c2ba32) ([Andreas Lind](mailto:andreas.lind@workday.com))
@@ -54,9 +73,13 @@
 - [Update subset-font to ^1.5.0](https://github.com/Munter/subfont/commit/ba79ef6db81cedfd0e52672b530ca3afddd68a94) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
 - [Fix warning about missing glyphs for BMP chars](https://github.com/Munter/subfont/commit/5ba0168f35bfef33f9bb9cc8a6d64de8fa1d5585) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
 - [Fix CHANGELOG generation in preversion script](https://github.com/Munter/subfont/commit/3ea696f8c336c6072411c9817c0c2f5b8d8d61b9) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
+
+### v6.6.1 (2022-07-09)
+
+- [ugrvw](https://github.com/Munter/subfont/commit/5ccb873025f9790faf65641551df1a7e65fbfdbf) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
 - [Fix CHANGELOG https:\/\/github.com\/Munter\/subfont\/commit\/5365689a5a925304a158fddef2b6af702857371c\#r78084394](https://github.com/Munter/subfont/commit/d42c7a2cffd33662d42d4532c45cb8b90080f128) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
 - [Expect browserslist to only prescribe woff I guess the browser features + usage statistics finally changed so woff isn't needed](https://github.com/Munter/subfont/commit/b70db9b769955cabbda2f2a76f2e7758f9968ec7) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
-- [+1 more](https://github.com/Munter/subfont/compare/v6.6.0...v6.7.0)
+- [Tests: Tolerate u+ in unicode-range \(I guess an in-range dep changed\)](https://github.com/Munter/subfont/commit/92a7871457246b64a997c0bffd9bb2766655d811) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
 
 ### v6.6.0 (2022-07-09)
 
@@ -343,16 +366,13 @@
 #### Pull requests
 
 - [#76](https://github.com/Munter/subfont/pull/76) Fix the prettier setup ([Andreas Lind](mailto:andreas.lind@peakon.com))
+- [#75](https://github.com/Munter/subfont/pull/75) Fix omitFallbacks with Google Web Fonts ([Andreas Lind](mailto:andreas.lind@peakon.com))
 
 #### Commits to master
 
 - [Switch to the official css-font-parser now that bramstein\/css-font-parser\#7 has been merged and released](https://github.com/Munter/subfont/commit/457c7f0e4cef0a8c1bd8f816c23ace64c9987424) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
 - [Don't populate source map relations](https://github.com/Munter/subfont/commit/5c07218b6f1dcc6fad88702a3bcb7b33bf9df54e) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
 
-### v4.1.2 (2020-01-09)
-
-- [#75](https://github.com/Munter/subfont/pull/75) Fix omitFallbacks with Google Web Fonts ([Andreas Lind](mailto:andreas.lind@peakon.com))
-
 ### v4.1.1 (2020-01-04)
 
 - [Add regression test](https://github.com/Munter/subfont/commit/46eddce9c09268dbde459b1f98fe5cec9e4c98f5) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
@@ -383,8 +403,7 @@
 - [Add vscode debugger launch configuration for the test suite](https://github.com/Munter/subfont/commit/f8f9abc42909c556765555cc49f44eb40a9194db) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
 - [Guard against an already detached relation when cleaning up](https://github.com/Munter/subfont/commit/6392fc359222772c9033a58a9020e3b35487d019) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
 
-### v4.0.3 (2019-11-02)
-
+### v4.0.3
 #### Pull requests
 
 - [#67](https://github.com/Munter/subfont/pull/67) Only warn about missing fonttools install if we are actually trying t… ([Peter Müller](mailto:munter@fumle.dk))

package/README.md

@@ -3,7 +3,6 @@
 [![NPM version](https://badge.fury.io/js/subfont.svg)](http://badge.fury.io/js/subfont)
 [![Build Status](https://travis-ci.org/Munter/subfont.svg?branch=master)](https://travis-ci.org/Munter/subfont)
 [![Coverage Status](https://img.shields.io/coveralls/Munter/subfont.svg)](https://coveralls.io/r/Munter/subfont?branch=master)
-[![Dependency Status](https://david-dm.org/Munter/subfont.svg)](https://david-dm.org/Munter/subfont) [![Greenkeeper badge](https://badges.greenkeeper.io/Munter/subfont.svg)](https://greenkeeper.io/)
 
 A command line tool to statically analyse your page in order to generate the most optimal web font subsets, then inject them into your page.
 
@@ -25,7 +24,7 @@ Subfont will:
 Currently supported font services:
 
 - Google fonts
-- Local fonts (with [fonttools](https://github.com/fonttools/fonttools))
+- Local fonts
 
 **If you know of font services with liberal font usage licenses, open an issue and we'll add support for them**
 

package/lib/HeadlessBrowser.js

@@ -1,5 +1,6 @@
 const urlTools = require('urltools');
 const puppeteer = require('puppeteer-core');
+const pathModule = require('path');
 
 async function transferResults(jsHandle) {
   const results = await jsHandle.jsonValue();
@@ -12,8 +13,10 @@ async function transferResults(jsHandle) {
 }
 
 async function downloadOrLocatePreferredBrowserRevision() {
-  const browserFetcher = puppeteer.createBrowserFetcher();
-  const preferredRevision = puppeteer._launcher._preferredRevision;
+  const browserFetcher = new puppeteer.BrowserFetcher({
+    path: pathModule.resolve(__dirname, '..', 'puppeteer-browsers'),
+  });
+  const preferredRevision = puppeteer.default.defaultBrowserRevision;
   const localRevisions = await browserFetcher.localRevisions();
   let revisionInfo;
   if (localRevisions.includes(preferredRevision)) {

package/lib/parseCommandLineOptions.js

@@ -92,6 +92,12 @@ module.exports = function parseCommandLineOptions(argv) {
       type: 'boolean',
       default: false,
     })
+    .options('instance', {
+      describe:
+        'Experimentally instance variable fonts when every variation axis only has one value (only supports full instancing for now)',
+      type: 'boolean',
+      default: false,
+    })
     .options('silent', {
       alias: 's',
       describe: `Do not write anything to stdout`,

package/lib/subfont.js

@@ -23,6 +23,7 @@ module.exports = async function subfont(
     relativeUrls = false,
     fallbacks = true,
     dynamic = false,
+    instance = false,
     browsers,
     text,
   },
@@ -227,6 +228,7 @@ module.exports = async function subfont(
     hrefType: relativeUrls ? 'relative' : 'rootRelative',
     text,
     dynamic,
+    instance,
     console,
   });
 
@@ -357,6 +359,9 @@ module.exports = async function subfont(
           fontUsage.smallestOriginalSize !== undefined &&
           fontUsage.smallestSubsetSize !== undefined
         ) {
+          if (fontUsage.variationAxes) {
+            status += ', fully instanced';
+          }
           status += `, ${prettyBytes(fontUsage.smallestOriginalSize)} (${
             fontUsage.smallestOriginalFormat
           }) => ${prettyBytes(fontUsage.smallestSubsetSize)} (${

package/lib/subsetFonts.js

@@ -374,14 +374,69 @@ function asyncLoadStyleRelationWithFallback(
   htmlOrSvgAsset.markDirty();
 }
 
-function getSubsetPromiseId(fontUsage, format) {
-  return [fontUsage.text, fontUsage.fontUrl, format].join('\x1d');
+function getSubsetPromiseId(fontUsage, format, variationAxes = null) {
+  return [
+    fontUsage.text,
+    fontUsage.fontUrl,
+    format,
+    JSON.stringify(variationAxes),
+  ].join('\x1d');
+}
+
+function createFontkitMemoizer(assetGraph) {
+  return memoizeSync(function (url) {
+    return fontkit.create(assetGraph.findAssets({ url })[0].rawSrc);
+  });
+}
+
+function getFullyPinnedVariationAxes(
+  fontkitMemoizer,
+  fontUrl,
+  seenAxisValuesByFontUrlAndAxisName
+) {
+  let font;
+  try {
+    font = fontkitMemoizer(fontUrl);
+  } catch (err) {
+    // Don't break if we encounter an invalid font or one that's unsupported by fontkit
+    return;
+  }
+  let variationAxes;
+  const fontVariationEntries = Object.entries(font.variationAxes);
+  const seenAxisValuesByAxisName =
+    seenAxisValuesByFontUrlAndAxisName.get(fontUrl);
+  if (fontVariationEntries.length > 0 && seenAxisValuesByAxisName) {
+    variationAxes = {};
+    let everyAxisPinned = true;
+    for (const [
+      axisName,
+      { min, max, default: defaultValue },
+    ] of fontVariationEntries) {
+      let seenAxisValues = seenAxisValuesByAxisName.get(axisName);
+      if (!seenAxisValues && !ignoredVariationAxes.has(axisName)) {
+        seenAxisValues = new Set([defaultValue]);
+      }
+      if (seenAxisValues && seenAxisValues.size === 1) {
+        variationAxes[axisName] = _.clamp([...seenAxisValues][0], min, max);
+      } else {
+        everyAxisPinned = false;
+      }
+    }
+    if (!everyAxisPinned) {
+      // Not all variation axes can be fully pinned, bail out
+      variationAxes = undefined;
+    }
+  }
+  return variationAxes;
 }
 
 async function getSubsetsForFontUsage(
   assetGraph,
   htmlOrSvgAssetTextsWithProps,
-  formats
+  formats,
+  seenAxisValuesByFontUrlAndAxisName,
+  fontkitMemoizer,
+  instance = false
 ) {
   const allFonts = [];
 
@@ -417,17 +472,35 @@ 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;
+      if (instance) {
+        variationAxes = getFullyPinnedVariationAxes(
+          fontkitMemoizer,
+          fontUsage.fontUrl,
+          seenAxisValuesByFontUrlAndAxisName
+        );
+      }
+      if (!variationAxes) {
+        notFullyInstancedFontUrls.add(fontUsage.fontUrl);
+      }
+
       for (const targetFormat of formats) {
-        const promiseId = getSubsetPromiseId(fontUsage, targetFormat);
+        const promiseId = getSubsetPromiseId(
+          fontUsage,
+          targetFormat,
+          variationAxes
+        );
 
         if (!subsetPromiseMap[promiseId]) {
           subsetPromiseMap[promiseId] = subsetFont(fontBuffer, text, {
             targetFormat,
+            variationAxes,
           }).catch((err) => {
             const error = new Error(err.message);
             error.asset = assetGraph.findAssets({
@@ -451,6 +524,7 @@ async function getSubsetsForFontUsage(
             ) {
               fontUsage.smallestSubsetSize = size;
               fontUsage.smallestSubsetFormat = targetFormat;
+              fontUsage.variationAxes = variationAxes;
             }
           }
         });
@@ -459,6 +533,8 @@ async function getSubsetsForFontUsage(
   }
 
   await Promise.all(Object.values(subsetPromiseMap));
+
+  return { notFullyInstancedFontUrls };
 }
 
 const fontOrder = ['woff2', 'woff', 'truetype'];
@@ -788,10 +864,7 @@ function renderNumberRange(min, max) {
   }
 }
 
-function warnAboutUnusedVariationAxes(
-  htmlOrSvgAssetTextsWithProps,
-  assetGraph
-) {
+function getVariationAxisUsage(htmlOrSvgAssetTextsWithProps) {
   const seenAxisValuesByFontUrlAndAxisName = new Map();
   const outOfBoundsAxesByFontUrl = new Map();
 
@@ -802,9 +875,9 @@ function warnAboutUnusedVariationAxes(
       seenAxisValuesByFontUrlAndAxisName.set(fontUrl, seenAxes);
     }
     if (seenAxes.has(axisName)) {
-      seenAxes.get(axisName).push(axisValue);
+      seenAxes.get(axisName).add(axisValue);
     } else {
-      seenAxes.set(axisName, [axisValue]);
+      seenAxes.set(axisName, new Set([axisValue]));
     }
   }
 
@@ -877,15 +950,28 @@ function warnAboutUnusedVariationAxes(
     }
   }
 
+  return { seenAxisValuesByFontUrlAndAxisName, outOfBoundsAxesByFontUrl };
+}
+
+function warnAboutUnusedVariationAxes(
+  assetGraph,
+  seenAxisValuesByFontUrlAndAxisName,
+  outOfBoundsAxesByFontUrl,
+  notFullyInstancedFontUrls,
+  fontkitMemoizer
+) {
   const warnings = [];
   for (const [
     fontUrl,
     seenAxisValuesByAxisName,
   ] of seenAxisValuesByFontUrlAndAxisName.entries()) {
+    if (!notFullyInstancedFontUrls.has(fontUrl)) {
+      continue;
+    }
     const outOfBoundsAxes = outOfBoundsAxesByFontUrl.get(fontUrl) || new Set();
     let font;
     try {
-      font = fontkit.create(assetGraph.findAssets({ url: fontUrl })[0].rawSrc);
+      font = fontkitMemoizer(fontUrl);
     } catch (err) {
       // Don't break if we encounter an invalid font or one that's unsupported by fontkit
       continue;
@@ -1110,6 +1196,7 @@ async function subsetFonts(
     formats = ['woff2', 'woff'],
     subsetPath = 'subfont/',
     omitFallbacks = false,
+    instance = false,
     inlineCss,
     fontDisplay,
     hrefType = 'rootRelative',
@@ -1233,15 +1320,29 @@ async function subsetFonts(
     };
   }
 
+  const { seenAxisValuesByFontUrlAndAxisName, outOfBoundsAxesByFontUrl } =
+    getVariationAxisUsage(htmlOrSvgAssetTextsWithProps);
+
+  const fontkitMemoizer = createFontkitMemoizer(assetGraph);
+
   // Generate subsets:
-  await getSubsetsForFontUsage(
+  const { notFullyInstancedFontUrls } = await getSubsetsForFontUsage(
     assetGraph,
     htmlOrSvgAssetTextsWithProps,
-    formats
+    formats,
+    seenAxisValuesByFontUrlAndAxisName,
+    fontkitMemoizer,
+    instance
   );
 
   warnAboutMissingGlyphs(htmlOrSvgAssetTextsWithProps, assetGraph);
-  warnAboutUnusedVariationAxes(htmlOrSvgAssetTextsWithProps, assetGraph);
+  warnAboutUnusedVariationAxes(
+    assetGraph,
+    seenAxisValuesByFontUrlAndAxisName,
+    outOfBoundsAxesByFontUrl,
+    notFullyInstancedFontUrls,
+    fontkitMemoizer
+  );
 
   // Insert subsets:
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "subfont",
-  "version": "6.12.4",
+  "version": "7.0.0",
   "description": "Speeds up your pages initial paint by automatically subsetting local or Google fonts and loading them optimally",
   "engines": {
     "node": ">=10.0.0"
@@ -64,9 +64,9 @@
     "postcss": "^8.3.11",
     "postcss-value-parser": "^4.0.2",
     "pretty-bytes": "^5.1.0",
-    "puppeteer-core": "^8.0.0",
+    "puppeteer-core": "^19.8.5",
     "specificity": "^0.4.1",
-    "subset-font": "^1.5.0",
+    "subset-font": "^2.1.0",
     "urltools": "^0.4.1",
     "yargs": "^15.4.0"
   },
@@ -90,11 +90,11 @@
     "offline-github-changelog": "^1.6.1",
     "prettier": "~2.3.0",
     "proxyquire": "^2.1.1",
-    "puppeteer": "^8.0.0",
+    "puppeteer": "^19.8.5",
     "sinon": "^9.0.2",
     "unexpected": "^11.8.1",
     "unexpected-check": "^2.3.1",
-    "unexpected-resemble": "^4.3.0",
+    "unexpected-resemble": "^5.0.1",
     "unexpected-set": "^2.0.1",
     "unexpected-sinon": "^10.11.2"
   }