subfont 6.4.1 → 6.6.0

package/CHANGELOG.md

@@ -1,4 +1,23 @@
-### v6.4.1 (2022-01-10)
+### v6.5.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))
+
+### v6.4.1 (2022-01-11)
 
 - [Update font-tracer to ^3.1.0, fixes \#157](https://github.com/Munter/subfont/commit/c98c0d8a2723c2f68b11dadb6c33c34c708355f4) ([Andreas Lind](mailto:andreas.lind@workday.com))
 
@@ -264,16 +283,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))
@@ -304,8 +320,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

@@ -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 =

package/lib/unquote.js

@@ -1,3 +1,13 @@
+function unescapeCssString(str) {
+  return str.replace(
+    /\\([0-9a-f]{1,6})(\s?)/gi,
+    ($0, hexChars, followingWhitespace) =>
+      `${String.fromCharCode(parseInt(hexChars, 16))}${
+        hexChars.length === 6 ? followingWhitespace : ''
+      }`
+  );
+}
+
 module.exports = function unquote(str) {
   if (typeof str !== 'string') {
     return str;
@@ -7,7 +17,7 @@ module.exports = function unquote(str) {
     /^'([^']*)'$|^"([^"]*)"$/,
     ($0, singleQuoted, doubleQuoted) =>
       typeof singleQuoted === 'string'
-        ? singleQuoted.replace(/\\'/g, "'")
-        : doubleQuoted.replace(/\\"/g, '"')
+        ? unescapeCssString(singleQuoted.replace(/\\'/g, "'"))
+        : unescapeCssString(doubleQuoted.replace(/\\"/g, '"'))
   );
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "subfont",
-  "version": "6.4.1",
+  "version": "6.6.0",
   "description": "Speeds up your pages initial paint by automatically subsetting local or Google fonts and loading them optimally",
   "engines": {
     "node": ">=10.0.0"
@@ -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",