subfont 6.12.4 → 7.1.0

package/CHANGELOG.md

@@ -1,3 +1,26 @@
+### 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))
+
+### 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 +77,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 +370,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 +407,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/getFontInfo.js

@@ -0,0 +1,27 @@
+const fontverter = require('fontverter');
+
+async function getFontInfoFromBuffer(buffer) {
+  const harfbuzzJs = await require('harfbuzzjs');
+
+  const blob = harfbuzzJs.createBlob(await fontverter.convert(buffer, 'sfnt')); // Load the font data into something Harfbuzz can use
+  const face = harfbuzzJs.createFace(blob, 0); // Select the first font in the file (there's normally only one!)
+
+  const fontInfo = {
+    characterSet: Array.from(face.collectUnicodes()),
+    variationAxes: face.getAxisInfos(),
+  };
+
+  face.destroy();
+  blob.destroy();
+
+  return fontInfo;
+}
+
+const fontInfoPromiseByBuffer = new WeakMap();
+
+module.exports = function getFontInfo(buffer) {
+  if (!fontInfoPromiseByBuffer.has(buffer)) {
+    fontInfoPromiseByBuffer.set(buffer, getFontInfoFromBuffer(buffer));
+  }
+  return fontInfoPromiseByBuffer.get(buffer);
+};

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

@@ -20,13 +20,13 @@ const injectSubsetDefinitions = require('./injectSubsetDefinitions');
 const cssFontParser = require('css-font-parser');
 const cssListHelpers = require('css-list-helpers');
 const LinesAndColumns = require('lines-and-columns').default;
-const fontkit = require('fontkit');
 const crypto = require('crypto');
 
 const unquote = require('./unquote');
 const normalizeFontPropertyValue = require('./normalizeFontPropertyValue');
 const getCssRulesByProperty = require('./getCssRulesByProperty');
 const unicodeRange = require('./unicodeRange');
+const getFontInfo = require('./getFontInfo');
 
 const googleFontsCssUrlRegex = /^(?:https?:)?\/\/fonts\.googleapis\.com\/css/;
 
@@ -374,14 +374,59 @@ 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');
+}
+
+async function getFullyPinnedVariationAxes(
+  assetGraph,
+  fontUrl,
+  seenAxisValuesByFontUrlAndAxisName
+) {
+  const fontInfo = await getFontInfo(
+    assetGraph.findAssets({ url: fontUrl })[0].rawSrc
+  );
+
+  let variationAxes;
+  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 },
+    ] 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,
+  instance = false
 ) {
   const allFonts = [];
 
@@ -417,17 +462,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 = await getFullyPinnedVariationAxes(
+          assetGraph,
+          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 +514,7 @@ async function getSubsetsForFontUsage(
             ) {
               fontUsage.smallestSubsetSize = size;
               fontUsage.smallestSubsetFormat = targetFormat;
+              fontUsage.variationAxes = variationAxes;
             }
           }
         });
@@ -459,6 +523,8 @@ async function getSubsetsForFontUsage(
   }
 
   await Promise.all(Object.values(subsetPromiseMap));
+
+  return { notFullyInstancedFontUrls };
 }
 
 const fontOrder = ['woff2', 'woff', 'truetype'];
@@ -605,7 +671,7 @@ async function createSelfHostedGoogleFontsCssAsset(
     lines.push(`  src: ${srcFragments.join(', ')};`);
     lines.push(
       `  unicode-range: ${unicodeRange(
-        fontkit.create(cssFontFaceSrc.to.rawSrc).characterSet
+        (await getFontInfo(cssFontFaceSrc.to.rawSrc)).characterSet
       )};`
     );
     lines.push('}');
@@ -685,7 +751,10 @@ function parseFontStretchRange(str) {
   return [minFontStretch, maxFontStretch];
 }
 
-function warnAboutMissingGlyphs(htmlOrSvgAssetTextsWithProps, assetGraph) {
+async function warnAboutMissingGlyphs(
+  htmlOrSvgAssetTextsWithProps,
+  assetGraph
+) {
   const missingGlyphsErrors = [];
 
   for (const {
@@ -695,9 +764,9 @@ function warnAboutMissingGlyphs(htmlOrSvgAssetTextsWithProps, assetGraph) {
   } of htmlOrSvgAssetTextsWithProps) {
     for (const fontUsage of fontUsages) {
       if (fontUsage.subsets) {
-        const characterSet = fontkit.create(
+        const { characterSet } = await getFontInfo(
           Object.values(fontUsage.subsets)[0]
-        ).characterSet;
+        );
 
         let missedAny = false;
         for (const char of [...fontUsage.pageText]) {
@@ -788,10 +857,7 @@ function renderNumberRange(min, max) {
   }
 }
 
-function warnAboutUnusedVariationAxes(
-  htmlOrSvgAssetTextsWithProps,
-  assetGraph
-) {
+function getVariationAxisUsage(htmlOrSvgAssetTextsWithProps) {
   const seenAxisValuesByFontUrlAndAxisName = new Map();
   const outOfBoundsAxesByFontUrl = new Map();
 
@@ -802,9 +868,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,23 +943,38 @@ function warnAboutUnusedVariationAxes(
     }
   }
 
+  return { seenAxisValuesByFontUrlAndAxisName, outOfBoundsAxesByFontUrl };
+}
+
+async function warnAboutUnusedVariationAxes(
+  assetGraph,
+  seenAxisValuesByFontUrlAndAxisName,
+  outOfBoundsAxesByFontUrl,
+  notFullyInstancedFontUrls
+) {
   const warnings = [];
   for (const [
     fontUrl,
     seenAxisValuesByAxisName,
   ] of seenAxisValuesByFontUrlAndAxisName.entries()) {
+    if (!notFullyInstancedFontUrls.has(fontUrl)) {
+      continue;
+    }
     const outOfBoundsAxes = outOfBoundsAxesByFontUrl.get(fontUrl) || new Set();
-    let font;
+    let fontInfo;
     try {
-      font = fontkit.create(assetGraph.findAssets({ url: fontUrl })[0].rawSrc);
+      fontInfo = await getFontInfo(
+        assetGraph.findAssets({ url: fontUrl })[0].rawSrc
+      );
     } catch (err) {
-      // Don't break if we encounter an invalid font or one that's unsupported by fontkit
+      // Don't break if we encounter an invalid font
       continue;
     }
+
     const unusedAxes = [];
     const underutilizedAxes = [];
     for (const [name, { min, max, default: defaultValue }] of Object.entries(
-      font.variationAxes
+      fontInfo.variationAxes
     )) {
       if (ignoredVariationAxes.has(name)) {
         continue;
@@ -1110,6 +1191,7 @@ async function subsetFonts(
     formats = ['woff2', 'woff'],
     subsetPath = 'subfont/',
     omitFallbacks = false,
+    instance = false,
     inlineCss,
     fontDisplay,
     hrefType = 'rootRelative',
@@ -1203,7 +1285,8 @@ async function subsetFonts(
         let originalCodepoints;
         try {
           // Guard against 'Unknown font format' errors
-          originalCodepoints = fontkit.create(originalFont.rawSrc).characterSet;
+          originalCodepoints = (await getFontInfo(originalFont.rawSrc))
+            .characterSet;
         } catch (err) {}
         if (originalCodepoints) {
           const usedCodepoints = getCodepoints(fontUsage.text);
@@ -1233,15 +1316,25 @@ async function subsetFonts(
     };
   }
 
+  const { seenAxisValuesByFontUrlAndAxisName, outOfBoundsAxesByFontUrl } =
+    getVariationAxisUsage(htmlOrSvgAssetTextsWithProps);
+
   // Generate subsets:
-  await getSubsetsForFontUsage(
+  const { notFullyInstancedFontUrls } = await getSubsetsForFontUsage(
     assetGraph,
     htmlOrSvgAssetTextsWithProps,
-    formats
+    formats,
+    seenAxisValuesByFontUrlAndAxisName,
+    instance
   );
 
-  warnAboutMissingGlyphs(htmlOrSvgAssetTextsWithProps, assetGraph);
-  warnAboutUnusedVariationAxes(htmlOrSvgAssetTextsWithProps, assetGraph);
+  await warnAboutMissingGlyphs(htmlOrSvgAssetTextsWithProps, assetGraph);
+  await warnAboutUnusedVariationAxes(
+    assetGraph,
+    seenAxisValuesByFontUrlAndAxisName,
+    outOfBoundsAxesByFontUrl,
+    notFullyInstancedFontUrls
+  );
 
   // Insert subsets:
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "subfont",
-  "version": "6.12.4",
+  "version": "7.1.0",
   "description": "Speeds up your pages initial paint by automatically subsetting local or Google fonts and loading them optimally",
   "engines": {
     "node": ">=10.0.0"
@@ -55,18 +55,18 @@
     "css-list-helpers": "^2.0.0",
     "font-snapper": "^1.2.0",
     "font-tracer": "^3.6.0",
-    "fontkit": "^1.8.0",
     "fontverter": "^2.0.0",
     "gettemporaryfilepath": "^1.0.1",
+    "harfbuzzjs": "^0.3.3",
     "lines-and-columns": "^1.1.6",
     "lodash": "^4.17.15",
     "memoizesync": "^1.1.1",
     "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"
   }