subfont 6.4.2 → 6.7.0

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+### v6.7.0 (2022-07-24)
+
+- [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))
+- [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)
+
+#### Pull requests
+
+- [#162](https://github.com/Munter/subfont/pull/162) update changelog with proper version for 6.5.0 ([Jacob Lamont](mailto:cob@jacoblamont.com))
+
+#### Commits to master
+
+- [Fix extractReferencedCustomPropertyNames when there's a default value](https://github.com/Munter/subfont/commit/506375504384c1c292348427e98213482aadcae0) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
+- [Update font-tracer to ^3.2.0](https://github.com/Munter/subfont/commit/5028f72482be20a72a1301c4218820f89a950bdf) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
+
+### v6.5.0 (2022-06-13)
+
+- [#161](https://github.com/Munter/subfont/pull/161) Add support for specifying additional characters to include in the subsets ([Andreas Lind](mailto:andreas.lind@workday.com), [Andreas Lind](mailto:andreaslindpetersen@gmail.com))
+
 ### v6.4.2 (2022-04-13)
 
 - [Handle escape sequences in CSS strings](https://github.com/Munter/subfont/commit/6c0493b3e0a96e2651e4c37cdf4e45fdb090acc4) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))

package/README.md

@@ -43,6 +43,24 @@ Run subfont on the files you are ready to deploy to a static file hosting servic
 
 If you want to run directly against your raw original files, it is recommended to create a recursive copy of your files which you run `subfont` on. This keeps your original authoring abstraction unchanged.
 
+## Including additional characters in the subsets
+
+If you have a use case where the automatic tracing doesn't find all the characters you need, you can tell subfont to include specific characters in the subsets by adding a custom `-subfont-text` property to the respective `@font-face` declarations.
+
+Example where all numerical digits are added to the bold italic Roboto variant:
+
+```css
+@font-face {
+  font-family: Roboto;
+  font-style: italic;
+  font-weight: 700;
+  src: url(roboto.woff) format('woff');
+  -subfont-text: '0123456789';
+}
+```
+
+An easier, but less fine-grained option is to use the `--text` switch to include a set of characters in all created subsets.
+
 ## Other usages
 
 You can have subfont output a copy of your input files to a new directory. This uses [Assetgraph](https://github.com/assetgraph/assetgraph) to trace a dependency graph of your website and writes it to your specified output directory. Be aware of any errors or warnings that might indicate Assetgraph having problems with your code, and be sure to double check that the expected files are in the output directory. Run `subfont path/to/index.html -o path/to/outputDir`.
@@ -72,6 +90,8 @@ Options:
                                      the formats based on the browser capabilities as specified
                                      via --browsers or the browserslist configuration.
                                                     [array] [choices: "woff2", "woff", "truetype"]
+  --text                             Additional characters to include in the subset for every
+                                     @font-face found on the page                         [string]
   --fallbacks                        Include fallbacks so the original font will be loaded when
                                      dynamic content gets injected at runtime. Disable with
                                      --no-fallbacks                      [boolean] [default: true]

package/lib/extractReferencedCustomPropertyNames.js

@@ -7,7 +7,7 @@ function extractReferencedCustomPropertyNames(cssValue) {
     if (
       node.type === 'function' &&
       node.value === 'var' &&
-      node.nodes.length === 1 &&
+      node.nodes.length >= 1 &&
       node.nodes[0].type === 'word' &&
       /^--/.test(node.nodes[0].value)
     ) {

package/lib/parseCommandLineOptions.js

@@ -46,6 +46,11 @@ module.exports = function parseCommandLineOptions(argv) {
         );
       },
     })
+    .options('text', {
+      describe:
+        'Additional characters to include in the subset for every @font-face found on the page',
+      type: 'string',
+    })
     .options('fallbacks', {
       describe:
         'Include fallbacks so the original font will be loaded when dynamic content gets injected at runtime. Disable with --no-fallbacks',

package/lib/subfont.js

@@ -24,6 +24,7 @@ module.exports = async function subfont(
     fallbacks = true,
     dynamic = false,
     browsers,
+    text,
   },
   console
 ) {
@@ -224,6 +225,7 @@ module.exports = async function subfont(
     formats,
     omitFallbacks: !fallbacks,
     hrefType: relativeUrls ? 'relative' : 'rootRelative',
+    text,
     dynamic,
     console,
   });

package/lib/subsetFonts.js

@@ -103,50 +103,84 @@ function groupTextsByFontFamilyProps(
   htmlOrSvgAsset,
   globalTextByPropsArray,
   pageTextByPropsArray,
-  availableFontFaceDeclarations
+  availableFontFaceDeclarations,
+  text
 ) {
-  const snappedTexts = _.flatMapDeep(globalTextByPropsArray, (textAndProps) => {
-    const isOnPage = pageTextByPropsArray.includes(textAndProps);
-    const family = textAndProps.props['font-family'];
-    if (family === undefined) {
-      return [];
+  const snappedTexts = [];
+
+  for (const fontFaceDeclaration of availableFontFaceDeclarations) {
+    const {
+      relations,
+      '-subfont-text': subfontText,
+      ...props
+    } = fontFaceDeclaration;
+    if (subfontText !== undefined) {
+      delete fontFaceDeclaration['-subfont-text'];
+      snappedTexts.push({
+        htmlOrSvgAsset,
+        fontRelations: relations,
+        fontUrl: getPreferredFontUrl(relations),
+        preload: false,
+        text: unquote(subfontText),
+        props,
+      });
     }
-    // Find all the families in the traced font-family that we have @font-face declarations for:
-    const families = fontFamily
-      .parse(family)
-      .filter((family) =>
-        availableFontFaceDeclarations.some(
-          (fontFace) =>
-            fontFace['font-family'].toLowerCase() === family.toLowerCase()
-        )
-      );
-
-    return families.map((family) => {
-      const activeFontFaceDeclaration = fontSnapper(
-        availableFontFaceDeclarations,
-        {
-          ...textAndProps.props,
-          'font-family': fontFamily.stringify([family]),
-        }
-      );
+    if (text !== undefined) {
+      snappedTexts.push({
+        htmlOrSvgAsset,
+        fontRelations: relations,
+        fontUrl: getPreferredFontUrl(relations),
+        preload: false,
+        text,
+        props,
+      });
+    }
+  }
 
-      if (!activeFontFaceDeclaration) {
+  snappedTexts.push(
+    ..._.flatMapDeep(globalTextByPropsArray, (textAndProps) => {
+      const isOnPage = pageTextByPropsArray.includes(textAndProps);
+      const family = textAndProps.props['font-family'];
+      if (family === undefined) {
         return [];
       }
+      // Find all the families in the traced font-family that we have @font-face declarations for:
+      const families = fontFamily
+        .parse(family)
+        .filter((family) =>
+          availableFontFaceDeclarations.some(
+            (fontFace) =>
+              fontFace['font-family'].toLowerCase() === family.toLowerCase()
+          )
+        );
 
-      const { relations, ...props } = activeFontFaceDeclaration;
-      const fontUrl = getPreferredFontUrl(relations);
+      return families.map((family) => {
+        const activeFontFaceDeclaration = fontSnapper(
+          availableFontFaceDeclarations,
+          {
+            ...textAndProps.props,
+            'font-family': fontFamily.stringify([family]),
+          }
+        );
 
-      return {
-        htmlOrSvgAsset: textAndProps.htmlOrSvgAsset,
-        text: textAndProps.text,
-        props,
-        fontRelations: relations,
-        fontUrl,
-        preload: isOnPage,
-      };
-    });
-  }).filter((textByProps) => textByProps && textByProps.fontUrl);
+        if (!activeFontFaceDeclaration) {
+          return [];
+        }
+
+        const { relations, ...props } = activeFontFaceDeclaration;
+        const fontUrl = getPreferredFontUrl(relations);
+
+        return {
+          htmlOrSvgAsset: textAndProps.htmlOrSvgAsset,
+          text: textAndProps.text,
+          props,
+          fontRelations: relations,
+          fontUrl,
+          preload: isOnPage,
+        };
+      });
+    }).filter((textByProps) => textByProps && textByProps.fontUrl)
+  );
 
   const textsByFontUrl = _.groupBy(snappedTexts, 'fontUrl');
 
@@ -546,6 +580,7 @@ async function subsetFonts(
     onlyInfo,
     dynamic,
     console = global.console,
+    text,
   } = {}
 ) {
   if (!validFontDisplayValues.includes(fontDisplay)) {
@@ -713,10 +748,27 @@ async function subsetFonts(
       htmlOrSvgAsset,
       globalTextByProps,
       textByProps,
-      accumulatedFontFaceDeclarations
+      accumulatedFontFaceDeclarations,
+      text
     );
   }
 
+  for (const fontFaceDeclarations of fontFaceDeclarationsByHtmlOrSvgAsset.values()) {
+    for (const fontFaceDeclaration of fontFaceDeclarations) {
+      const firstRelation = fontFaceDeclaration.relations[0];
+      const subfontTextNode = firstRelation.node.nodes.find(
+        (childNode) =>
+          childNode.type === 'decl' &&
+          childNode.prop.toLowerCase() === '-subfont-text'
+      );
+
+      if (subfontTextNode) {
+        subfontTextNode.remove();
+        firstRelation.from.markDirty();
+      }
+    }
+  }
+
   if (omitFallbacks) {
     for (const htmlOrSvgAsset of htmlOrSvgAssets) {
       const accumulatedFontFaceDeclarations =
@@ -865,7 +917,7 @@ async function subsetFonts(
   if (missingGlyphsErrors.length) {
     const errorLog = missingGlyphsErrors.map(
       ({ char, fontUsage, location }) =>
-        `- \\u{${char.charCodeAt(0).toString(16)}} (${char}) in font-family '${
+        `- \\u{${char.codePointAt(0).toString(16)}} (${char}) in font-family '${
           fontUsage.props['font-family']
         }' (${fontUsage.props['font-weight']}/${
           fontUsage.props['font-style']

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "subfont",
-  "version": "6.4.2",
+  "version": "6.7.0",
   "description": "Speeds up your pages initial paint by automatically subsetting local or Google fonts and loading them optimally",
   "engines": {
     "node": ">=10.0.0"
@@ -10,7 +10,7 @@
     "test": "mocha && npm run lint",
     "travis": "npm run coverage && npm run lint",
     "coverage": "nyc --reporter=lcov --reporter=text -- mocha",
-    "preversion": "offline-github-changelog --next=${npm_package_version} > CHANGELOG.md && git add CHANGELOG.md"
+    "preversion": "offline-github-changelog --next=${npm_new_version} > CHANGELOG.md && git add CHANGELOG.md"
   },
   "bin": {
     "subfont": "lib/cli.js"
@@ -54,7 +54,7 @@
     "css-list-helpers": "^2.0.0",
     "font-family-papandreou": "^0.2.0-patch2",
     "font-snapper": "^1.2.0",
-    "font-tracer": "^3.1.0",
+    "font-tracer": "^3.2.0",
     "fontkit": "^1.8.0",
     "fontverter": "^2.0.0",
     "gettemporaryfilepath": "^1.0.1",
@@ -66,7 +66,7 @@
     "pretty-bytes": "^5.1.0",
     "puppeteer-core": "^8.0.0",
     "specificity": "^0.4.1",
-    "subset-font": "^1.4.0",
+    "subset-font": "^1.5.0",
     "urltools": "^0.4.1",
     "yargs": "^15.4.0"
   },