@turntrout/subfont 1.0.0

package/lib/warnAboutMissingGlyphs.js

@@ -0,0 +1,145 @@
+const LinesAndColumns = require('lines-and-columns').default;
+const getFontInfo = require('./getFontInfo');
+const unicodeRange = require('./unicodeRange');
+
+async function warnAboutMissingGlyphs(
+  htmlOrSvgAssetTextsWithProps,
+  assetGraph
+) {
+  const missingGlyphsErrors = [];
+
+  // Collect all unique subset buffers and parse them concurrently.
+  // getFontInfo internally serializes harfbuzzjs WASM calls, so
+  // Promise.all just queues them up rather than running in parallel.
+  const uniqueSubsetBuffers = new Map();
+  for (const { fontUsages } of htmlOrSvgAssetTextsWithProps) {
+    for (const fontUsage of fontUsages) {
+      if (!fontUsage.subsets) continue;
+      const subsetBuffer = Object.values(fontUsage.subsets)[0];
+      if (!uniqueSubsetBuffers.has(subsetBuffer)) {
+        uniqueSubsetBuffers.set(
+          subsetBuffer,
+          getFontInfo(subsetBuffer)
+            .then((info) => new Set(info.characterSet))
+            .catch((err) => {
+              assetGraph.warn(err);
+              return null;
+            })
+        );
+      }
+    }
+  }
+  const subsetCharSetCache = new Map();
+  await Promise.all(
+    [...uniqueSubsetBuffers.entries()].map(async ([buffer, promise]) => {
+      subsetCharSetCache.set(buffer, await promise);
+    })
+  );
+
+  for (const {
+    htmlOrSvgAsset,
+    fontUsages,
+    accumulatedFontFaceDeclarations,
+  } of htmlOrSvgAssetTextsWithProps) {
+    let linesAndColumns;
+    for (const fontUsage of fontUsages) {
+      if (!fontUsage.subsets) continue;
+      const subsetBuffer = Object.values(fontUsage.subsets)[0];
+      const characterSetLookup = subsetCharSetCache.get(subsetBuffer);
+      if (!characterSetLookup) continue; // getFontInfo failed on subset; already warned
+
+      let missedAny = false;
+      // Note: location search below is best-effort — it searches the raw
+      // HTML source, so it may match characters inside <script>, attributes,
+      // or other non-rendered contexts rather than the actual styled text.
+      for (const char of fontUsage.pageText) {
+        // Turns out that browsers don't mind that these are missing:
+        if (char === '\t' || char === '\n') {
+          continue;
+        }
+
+        const codePoint = char.codePointAt(0);
+
+        const isMissing = !characterSetLookup.has(codePoint);
+
+        if (isMissing) {
+          // Find all occurrences of the missing character in the source,
+          // not just the first, so that every location is reported.
+          const locations = [];
+          const sourceText = htmlOrSvgAsset.text;
+          if (char.length > 0) {
+            let searchIdx = 0;
+            while (true) {
+              const charIdx = sourceText.indexOf(char, searchIdx);
+              if (charIdx === -1) break;
+              if (!linesAndColumns) {
+                linesAndColumns = new LinesAndColumns(sourceText);
+              }
+              const position = linesAndColumns.locationForIndex(charIdx);
+              locations.push(
+                `${htmlOrSvgAsset.urlOrDescription}:${position.line + 1}:${
+                  position.column + 1
+                }`
+              );
+              searchIdx = charIdx + char.length;
+            }
+          }
+
+          if (locations.length === 0) {
+            locations.push(
+              `${htmlOrSvgAsset.urlOrDescription} (generated content)`
+            );
+          }
+
+          for (const location of locations) {
+            missingGlyphsErrors.push({
+              codePoint,
+              char,
+              htmlOrSvgAsset,
+              fontUsage,
+              location,
+            });
+          }
+          missedAny = true;
+        }
+      }
+      if (missedAny) {
+        const fontFaces = accumulatedFontFaceDeclarations.filter((fontFace) =>
+          fontUsage.fontFamilies.has(fontFace['font-family'])
+        );
+        for (const fontFace of fontFaces) {
+          const cssFontFaceSrc = fontFace.relations[0];
+          const fontFaceDeclaration = cssFontFaceSrc.node;
+          if (
+            !fontFaceDeclaration.some((node) => node.prop === 'unicode-range')
+          ) {
+            fontFaceDeclaration.append({
+              prop: 'unicode-range',
+              value: unicodeRange(fontUsage.codepoints.original),
+            });
+            cssFontFaceSrc.from.markDirty();
+          }
+        }
+      }
+    }
+  }
+
+  if (missingGlyphsErrors.length) {
+    const errorLog = missingGlyphsErrors.map(
+      ({ char, fontUsage, location }) =>
+        `- \\u{${char.codePointAt(0).toString(16)}} (${char}) in font-family '${
+          fontUsage.props['font-family']
+        }' (${fontUsage.props['font-weight']}/${
+          fontUsage.props['font-style']
+        }) at ${location}`
+    );
+
+    const message = `Missing glyph fallback detected.
+When your primary webfont doesn't contain the glyphs you use, browsers that don't support unicode-range will load your fallback fonts, which will be a potential waste of bandwidth.
+These glyphs are used on your site, but they don't exist in the font you applied to them:`;
+
+    assetGraph.info(new Error(`${message}\n${errorLog.join('\n')}`));
+  }
+}
+
+module.exports = warnAboutMissingGlyphs;

package/lib/wasmQueue.js

@@ -0,0 +1,11 @@
+// Shared serialization queue for harfbuzzjs WASM calls.
+// harfbuzzjs returns corrupt results when multiple calls run concurrently
+// on the shared module instance. This queue ensures only one WASM
+// operation runs at a time across getFontInfo and collectFeatureGlyphIds.
+let queue = Promise.resolve();
+
+function enqueue(fn) {
+  return (queue = queue.then(fn, fn));
+}
+
+module.exports = enqueue;

package/package.json

@@ -0,0 +1,113 @@
+{
+  "name": "@turntrout/subfont",
+  "version": "1.0.0",
+  "description": "Automatically subset web fonts to only the characters used on your pages. Fork of Munter/subfont with modern defaults.",
+  "packageManager": "pnpm@10.29.3",
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "scripts": {
+    "lint": "eslint . && prettier --check '**/*.{js,md}'",
+    "test": "mocha && npm run lint",
+    "coverage": "nyc --reporter=lcov --reporter=text -- mocha",
+    "check-coverage": "nyc check-coverage",
+    "preversion": "offline-github-changelog --next=${npm_new_version} > CHANGELOG.md && git add CHANGELOG.md",
+    "prepare": "husky || true"
+  },
+  "bin": {
+    "subfont": "lib/cli.js"
+  },
+  "main": "lib/subfont.js",
+  "files": [
+    "lib",
+    "*.md"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/alexander-turner/subfont.git"
+  },
+  "keywords": [
+    "google",
+    "font",
+    "fonts",
+    "webfont",
+    "webfonts",
+    "subset",
+    "subsetting",
+    "commandline",
+    "cli",
+    "automation",
+    "woff",
+    "woff2",
+    "preload"
+  ],
+  "author": "Alexander Turner",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/alexander-turner/subfont/issues"
+  },
+  "homepage": "https://github.com/alexander-turner/subfont#readme",
+  "dependencies": {
+    "@gustavnikolaj/async-main-wrap": "^3.0.1",
+    "@hookun/parse-animation-shorthand": "^0.1.5",
+    "@puppeteer/browsers": "^2.0.0",
+    "assetgraph": "7.13.0",
+    "css-font-parser": "^2.0.0",
+    "css-font-weight-names": "^0.2.1",
+    "css-list-helpers": "^2.0.0",
+    "font-snapper": "^1.2.0",
+    "font-tracer": "^3.7.0",
+    "fontverter": "^2.0.0",
+    "gettemporaryfilepath": "^1.0.1",
+    "harfbuzzjs": "^0.5.0",
+    "lines-and-columns": "^1.1.6",
+    "memoizesync": "^1.1.1",
+    "p-limit": "^3.0.0",
+    "parse5": "^7.0.0",
+    "postcss": "^8.3.11",
+    "postcss-value-parser": "^4.0.2",
+    "pretty-bytes": "^5.1.0",
+    "puppeteer-core": "^24.39.1",
+    "specificity": "^0.4.1",
+    "subset-font": "~2.3.0",
+    "urltools": "^0.4.1",
+    "yargs": "^15.4.0"
+  },
+  "devDependencies": {
+    "canvas": "npm:@napi-rs/canvas@^0.1.97",
+    "combos": "^0.2.0",
+    "coveralls": "^3.0.9",
+    "css-generators": "^0.2.0",
+    "eslint": "^9.0.0",
+    "eslint-config-prettier": "^10.0.0",
+    "eslint-plugin-mocha": "^10.0.0",
+    "neostandard": "^0.12.0",
+    "html-generators": "^1.0.3",
+    "httpception": "^3.0.0",
+    "husky": "^9.1.7",
+    "magicpen-prism": "^3.0.2",
+    "mocha": "^11.0.0",
+    "nyc": "^15.1.0",
+    "offline-github-changelog": "^1.6.1",
+    "prettier": "^3.0.0",
+    "proxyquire": "^2.1.1",
+    "puppeteer": "^24.39.1",
+    "sinon": "^19.0.0",
+    "unexpected": "^11.8.1",
+    "unexpected-check": "^2.3.1",
+    "unexpected-resemble": "^5.0.1",
+    "unexpected-set": "^2.0.1",
+    "unexpected-sinon": "^10.11.2"
+  },
+  "pnpm": {
+    "overrides": {
+      "canvas": "npm:@napi-rs/canvas@^0.1.97"
+    },
+    "onlyBuiltDependencies": [
+      "core-js",
+      "es5-ext",
+      "puppeteer",
+      "unrs-resolver"
+    ]
+  }
+}