subfont 6.9.0 → 6.10.0

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+### v6.10.0 (2022-08-29)
+
+- [Update @hookun\/parse-animation-shorthand to ^0.1.4 to make sure we get the fix for hookhookun\/parse-animation-shorthand\#16](https://github.com/Munter/subfont/commit/4db17826245e289e987c6dc02d3f67ebf5891e6f) ([Andreas Lind](mailto:andreas.lind@workday.com))
+- [Disable notice about unused variation axis ranges when there's an out-of-bounds cubic-bezier animation timing function in play](https://github.com/Munter/subfont/commit/1cf4ff46bb6099f8df8602968c7dc0fefb1c1f21) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
+- [Update font-tracer to ^3.6.0](https://github.com/Munter/subfont/commit/2a47adc03122aad50ba2a01f116a2d1fe0f2b29e) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
+- [Remove accidentally committed commented out code](https://github.com/Munter/subfont/commit/e0c677f9b2c7a9af123045cf29bc78a4f9a56550) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
+- [Warn about unused variation axis ranges, not just fully unused axes](https://github.com/Munter/subfont/commit/32fc472327b1c8fc87090d4c1e5f1085533ad8fa) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
+- [+13 more](https://github.com/Munter/subfont/compare/v6.9.0...v6.10.0)
+
 ### v6.9.0 (2022-08-07)
 
 - [Update font-tracer to ^3.3.0 Adds support for tracing ::marker, fixes \#166](https://github.com/Munter/subfont/commit/e46c79bac9cb3e62c70deb357823b7963114863b) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))

package/lib/getCssRulesByProperty.js

@@ -1,6 +1,7 @@
 const specificity = require('specificity');
 const postcss = require('postcss');
 const unquote = require('./unquote');
+const parseAnimationShorthand = require('@hookun/parse-animation-shorthand');
 
 const counterRendererNames = new Set([
   'none',
@@ -144,34 +145,59 @@ function getCssRulesByProperty(properties, cssSource, existingPredicates) {
               });
             });
         }
-      } else if (
-        propName === 'animation' &&
-        properties.includes('animation-name')
-      ) {
+      } else if (propName === 'animation') {
         // Shorthand
-        const animationName = node.value.split(' ').pop();
+        const parsedAnimation = parseAnimationShorthand.parseSingle(node.value);
 
-        // Split up combined selectors as they might have different specificity
-        specificity
-          .calculate(node.parent.selector)
-          .forEach((specificityObject) => {
-            const isStyleAttribute =
-              specificityObject.selector === 'bogusselector';
+        if (properties.includes('animation-name')) {
+          // Split up combined selectors as they might have different specificity
+          specificity
+            .calculate(node.parent.selector)
+            .forEach((specificityObject) => {
+              const isStyleAttribute =
+                specificityObject.selector === 'bogusselector';
 
-            rulesByProperty['animation-name'].push({
-              predicates: getCurrentPredicates(),
-              namespaceURI: defaultNamespaceURI,
-              selector: isStyleAttribute
-                ? undefined
-                : specificityObject.selector.trim(),
-              specificityArray: isStyleAttribute
-                ? [1, 0, 0, 0]
-                : specificityObject.specificityArray,
-              prop: 'animation-name',
-              value: animationName,
-              important: !!node.important,
+              rulesByProperty['animation-name'].push({
+                predicates: getCurrentPredicates(),
+                namespaceURI: defaultNamespaceURI,
+                selector: isStyleAttribute
+                  ? undefined
+                  : specificityObject.selector.trim(),
+                specificityArray: isStyleAttribute
+                  ? [1, 0, 0, 0]
+                  : specificityObject.specificityArray,
+                prop: 'animation-name',
+                value: parsedAnimation.name,
+                important: !!node.important,
+              });
             });
-          });
+        }
+        if (properties.includes('animation-timing-function')) {
+          // Split up combined selectors as they might have different specificity
+          specificity
+            .calculate(node.parent.selector)
+            .forEach((specificityObject) => {
+              const isStyleAttribute =
+                specificityObject.selector === 'bogusselector';
+
+              rulesByProperty['animation-timing-function'].push({
+                predicates: getCurrentPredicates(),
+                namespaceURI: defaultNamespaceURI,
+                selector: isStyleAttribute
+                  ? undefined
+                  : specificityObject.selector.trim(),
+                specificityArray: isStyleAttribute
+                  ? [1, 0, 0, 0]
+                  : specificityObject.specificityArray,
+                prop: 'animation-timing-function',
+                value: parseAnimationShorthand.serialize({
+                  name: '',
+                  timingFunction: parsedAnimation.timingFunction,
+                }),
+                important: !!node.important,
+              });
+            });
+        }
       } else if (propName === 'transition') {
         // Shorthand
         const transitionProperties = [];

package/lib/parseFontVariationSettings.js

@@ -0,0 +1,39 @@
+const postcssValueParser = require('postcss-value-parser');
+
+module.exports = function* parseFontVariationSettings(value) {
+  let state = 'BEFORE_AXIS_NAME';
+  let axisName;
+  for (const token of postcssValueParser(value).nodes) {
+    if (token.type === 'space') {
+      continue;
+    }
+    switch (state) {
+      case 'BEFORE_AXIS_NAME': {
+        if (token.type !== 'string') {
+          return;
+        }
+        axisName = token.value.toUpperCase();
+        state = 'AFTER_AXIS_NAME';
+        break;
+      }
+      case 'AFTER_AXIS_NAME': {
+        if (token.type === 'word') {
+          const axisValue = parseFloat(token.value);
+          if (!isNaN(axisValue)) {
+            yield [axisName, axisValue];
+          }
+        }
+        state = 'AFTER_AXIS_VALUE';
+        break;
+      }
+      case 'AFTER_AXIS_VALUE': {
+        if (token.type !== 'div' || token.value !== ',') {
+          return;
+        }
+        axisName = undefined;
+        state = 'BEFORE_AXIS_NAME';
+        break;
+      }
+    }
+  }
+};

package/lib/subsetFonts.js

@@ -13,13 +13,14 @@ const HeadlessBrowser = require('./HeadlessBrowser');
 const gatherStylesheetsWithPredicates = require('./gatherStylesheetsWithPredicates');
 const findCustomPropertyDefinitions = require('./findCustomPropertyDefinitions');
 const extractReferencedCustomPropertyNames = require('./extractReferencedCustomPropertyNames');
+const parseFontVariationSettings = require('./parseFontVariationSettings');
+const parseAnimationShorthand = require('@hookun/parse-animation-shorthand');
 const stripLocalTokens = require('./stripLocalTokens');
 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 fontFamily = require('font-family-papandreou');
 const crypto = require('crypto');
 
 const unquote = require('./unquote');
@@ -41,6 +42,14 @@ const contentTypeByFontFormat = {
   truetype: 'font/ttf',
 };
 
+function stringifyFontFamily(name) {
+  if (/[^a-z0-9_-]/i.test(name)) {
+    return name.replace(/\\/g, '\\\\').replace(/"/g, '\\"');
+  } else {
+    return name;
+  }
+}
+
 function uniqueChars(text) {
   return [...new Set([...text])].sort().join('');
 }
@@ -79,6 +88,21 @@ function getPreferredFontUrl(cssFontFaceSrcRelations = []) {
   }
 }
 
+function isOutOfBoundsAnimationTimingFunction(animationTimingFunctionStr) {
+  if (typeof animationTimingFunctionStr !== 'string') {
+    return false;
+  }
+  const { timingFunction } = parseAnimationShorthand.parseSingle(
+    `${animationTimingFunctionStr} ignored-name`
+  );
+
+  if (timingFunction.type === 'cubic-bezier') {
+    const [, y1, , y2] = timingFunction.value;
+    return y1 > 1 || y1 < 0 || y2 > 1 || y2 < 0;
+  }
+  return false;
+}
+
 // Hack to extract '@font-face { ... }' with all absolute urls
 function getFontFaceDeclarationText(node, relations) {
   const originalHrefTypeByRelation = new Map();
@@ -145,8 +169,8 @@ function groupTextsByFontFamilyProps(
         return [];
       }
       // Find all the families in the traced font-family that we have @font-face declarations for:
-      const families = fontFamily
-        .parse(family)
+      const families = cssFontParser
+        .parseFontFamily(family)
         .filter((family) =>
           availableFontFaceDeclarations.some(
             (fontFace) =>
@@ -159,7 +183,7 @@ function groupTextsByFontFamilyProps(
           availableFontFaceDeclarations,
           {
             ...textAndProps.props,
-            'font-family': fontFamily.stringify([family]),
+            'font-family': stringifyFontFamily(family),
           }
         );
 
@@ -173,6 +197,9 @@ function groupTextsByFontFamilyProps(
         return {
           htmlOrSvgAsset: textAndProps.htmlOrSvgAsset,
           text: textAndProps.text,
+          fontVariationSettings: textAndProps.props['font-variation-settings'],
+          animationTimingFunction:
+            textAndProps.props['animation-timing-function'],
           props,
           fontRelations: relations,
           fontUrl,
@@ -190,6 +217,18 @@ function groupTextsByFontFamilyProps(
     const fontFamilies = new Set(
       textsPropsArray.map((obj) => obj.props['font-family'])
     );
+    const fontVariationSettings = new Set(
+      textsPropsArray
+        .map((obj) => obj.fontVariationSettings)
+        .filter(
+          (fontVariationSettings) =>
+            fontVariationSettings &&
+            fontVariationSettings.toLowerCase() !== 'normal'
+        )
+    );
+    const hasOutOfBoundsAnimationTimingFunction = textsPropsArray.some((obj) =>
+      isOutOfBoundsAnimationTimingFunction(obj.animationTimingFunction)
+    );
 
     let smallestOriginalSize;
     let smallestOriginalFormat;
@@ -217,6 +256,8 @@ function groupTextsByFontFamilyProps(
       props: { ...textsPropsArray[0].props },
       fontUrl,
       fontFamilies,
+      fontVariationSettings,
+      hasOutOfBoundsAnimationTimingFunction,
       preload,
     };
   });
@@ -497,9 +538,9 @@ async function createSelfHostedGoogleFontsCssAsset(
   assetGraph,
   googleFontsCssAsset,
   formats,
-  hrefType
+  hrefType,
+  subsetUrl
 ) {
-  const baseUrl = assetGraph.resolveUrl(assetGraph.root, '/subfont/');
   const lines = [];
   for (const cssFontFaceSrc of assetGraph.findRelations({
     from: googleFontsCssAsset,
@@ -516,9 +557,12 @@ async function createSelfHostedGoogleFontsCssAsset(
     const srcFragments = [];
     for (const format of formats) {
       const rawSrc = await fontverter.convert(cssFontFaceSrc.to.rawSrc, format);
-      const url = `${assetGraph.root}subfont/${
-        cssFontFaceSrc.to.baseName
-      }-${md5HexPrefix(rawSrc)}${extensionByFormat[format]}`;
+      const url = assetGraph.resolveUrl(
+        subsetUrl,
+        `${cssFontFaceSrc.to.baseName}-${md5HexPrefix(rawSrc)}${
+          extensionByFormat[format]
+        }`
+      );
       const fontAsset =
         assetGraph.findAssets({ url })[0] ||
         (await assetGraph.addAsset({
@@ -526,7 +570,7 @@ async function createSelfHostedGoogleFontsCssAsset(
           rawSrc,
         }));
       srcFragments.push(
-        `url(${assetGraph.buildHref(fontAsset.url, baseUrl, {
+        `url(${assetGraph.buildHref(fontAsset.url, subsetUrl, {
           hrefType,
         })}) format('${format}')`
       );
@@ -542,7 +586,7 @@ async function createSelfHostedGoogleFontsCssAsset(
   const text = lines.join('\n');
   const fallbackAsset = assetGraph.addAsset({
     type: 'Css',
-    url: `/subfont/fallback-${md5HexPrefix(text)}.css`,
+    url: assetGraph.resolveUrl(subsetUrl, `fallback-${md5HexPrefix(text)}.css`),
     text,
   });
   return fallbackAsset;
@@ -664,6 +708,124 @@ These glyphs are used on your site, but they don't exist in the font you applied
   }
 }
 
+const standardVariationAxes = new Set(['WGHT', 'ITAL', 'SLNT', 'OPSZ']);
+
+function warnAboutUnusedCustomVariationAxes(
+  htmlOrSvgAssetTextsWithProps,
+  assetGraph
+) {
+  const seenAxisValuesByFontUrlAndAxisName = new Map();
+  const outOfBoundsAxesByFontUrl = new Map();
+
+  for (const { fontUsages } of htmlOrSvgAssetTextsWithProps) {
+    for (const {
+      fontUrl,
+      fontVariationSettings,
+      hasOutOfBoundsAnimationTimingFunction,
+    } of fontUsages) {
+      let seenAxes = seenAxisValuesByFontUrlAndAxisName.get(fontUrl);
+      if (!seenAxes) {
+        seenAxes = new Map();
+        seenAxisValuesByFontUrlAndAxisName.set(fontUrl, seenAxes);
+      }
+
+      for (const fontVariationSettingsValue of fontVariationSettings) {
+        for (const [axisName, axisValue] of parseFontVariationSettings(
+          fontVariationSettingsValue
+        )) {
+          const seenAxisValues = seenAxes.get(axisName);
+          if (seenAxisValues) {
+            seenAxisValues.push(axisValue);
+          } else {
+            seenAxes.set(axisName, [axisValue]);
+          }
+          if (hasOutOfBoundsAnimationTimingFunction) {
+            let outOfBoundsAxes = outOfBoundsAxesByFontUrl.get(fontUrl);
+            if (!outOfBoundsAxes) {
+              outOfBoundsAxes = new Set();
+              outOfBoundsAxesByFontUrl.set(fontUrl, outOfBoundsAxes);
+            }
+            outOfBoundsAxes.add(axisName);
+          }
+        }
+      }
+    }
+  }
+
+  const warnings = [];
+  for (const [
+    fontUrl,
+    seenAxisValuesByAxisName,
+  ] of seenAxisValuesByFontUrlAndAxisName.entries()) {
+    const outOfBoundsAxes = outOfBoundsAxesByFontUrl.get(fontUrl) || new Set();
+    let font;
+    try {
+      font = fontkit.create(assetGraph.findAssets({ url: fontUrl })[0].rawSrc);
+    } catch (err) {
+      // Don't break if we encounter an invalid font or one that's unsupported by fontkit
+      continue;
+    }
+    const unusedAxes = [];
+    const underutilizedAxes = [];
+    for (const { name, min, max, default: defaultValue } of Object.values(
+      font.variationAxes
+    )) {
+      const axisName = name.toUpperCase();
+      if (standardVariationAxes.has(axisName)) {
+        continue;
+      }
+      if (
+        seenAxisValuesByAxisName.has(axisName) &&
+        !outOfBoundsAxes.has(axisName)
+      ) {
+        const usedValues = [
+          defaultValue,
+          ...seenAxisValuesByAxisName.get(axisName),
+        ];
+        const minUsed = Math.min(...usedValues);
+        const maxUsed = Math.max(...usedValues);
+        if (minUsed > min || maxUsed < max) {
+          underutilizedAxes.push({
+            name: axisName,
+            minUsed,
+            maxUsed,
+            min,
+            max,
+          });
+        }
+      } else {
+        unusedAxes.push(axisName);
+      }
+    }
+
+    if (unusedAxes.length > 0 || underutilizedAxes.length > 0) {
+      let message = `${fontUrl}:\n`;
+      if (unusedAxes.length > 0) {
+        message += `  Unused axes: ${unusedAxes.join(', ')}\n`;
+      }
+      if (underutilizedAxes.length > 0) {
+        message += `  Underutilized axes:\n${underutilizedAxes
+          .map(
+            ({ name, min, max, minUsed, maxUsed }) =>
+              `    ${name}: ${minUsed}-${maxUsed} used (${min}-${max} available)`
+          )
+          .join('\n')}\n`;
+      }
+      warnings.push(message);
+    }
+  }
+
+  if (warnings.length > 0) {
+    assetGraph.info(
+      new Error(`🪓 Unused custom variation axes detected in your variable fonts.
+The below variable fonts contain custom axes that do not appear to be fully used on any of your pages.
+This bloats your fonts and also the subset fonts that subfont creates.
+Consider removing the unused axis ranges using a tool like Slice <https://slice-gui.netlify.app/>
+${warnings.join('\n')}`)
+    );
+  }
+}
+
 async function collectTextsByPage(
   assetGraph,
   htmlOrSvgAssets,
@@ -722,9 +884,8 @@ async function collectTextsByPage(
                 node.walkDecls((declaration) => {
                   const propName = declaration.prop.toLowerCase();
                   if (propName === 'font-family') {
-                    fontFaceDeclaration[propName] = fontFamily.parse(
-                      declaration.value
-                    )[0];
+                    fontFaceDeclaration[propName] =
+                      cssFontParser.parseFontFamily(declaration.value)[0];
                   } else {
                     fontFaceDeclaration[propName] = declaration.value;
                   }
@@ -951,6 +1112,7 @@ async function subsetFonts(
   );
 
   warnAboutMissingGlyphs(htmlOrSvgAssetTextsWithProps, assetGraph);
+  warnAboutUnusedCustomVariationAxes(htmlOrSvgAssetTextsWithProps, assetGraph);
 
   // Insert subsets:
 
@@ -1119,7 +1281,7 @@ async function subsetFonts(
 
       if (
         fontAsset.contentType === 'font/woff2' &&
-        fontRelation.to.path.startsWith('/subfont/')
+        fontRelation.to.url.startsWith(subsetUrl)
       ) {
         const fontFaceDeclaration = fontRelation.node;
         const originalFontFamily = unquote(
@@ -1323,7 +1485,8 @@ async function subsetFonts(
                 assetGraph,
                 googleFontStylesheetRelation.to,
                 formats,
-                hrefType
+                hrefType,
+                subsetUrl
               );
             await selfHostedGoogleFontsCssAsset.minify();
             selfHostedGoogleCssByUrl.set(
@@ -1388,7 +1551,9 @@ async function subsetFonts(
       );
       for (let i = 0; i < fontFamilies.length; i += 1) {
         const subsetFontFamily =
-          webfontNameMap[fontFamily.parse(fontFamilies[i])[0].toLowerCase()];
+          webfontNameMap[
+            cssFontParser.parseFontFamily(fontFamilies[i])[0].toLowerCase()
+          ];
         if (subsetFontFamily && !fontFamilies.includes(subsetFontFamily)) {
           fontFamilies.splice(
             i,
@@ -1448,7 +1613,7 @@ async function subsetFonts(
           for (let i = 0; i < fontFamilies.length; i += 1) {
             const subsetFontFamily =
               webfontNameMap[
-                fontFamily.parse(fontFamilies[i])[0].toLowerCase()
+                cssFontParser.parseFontFamily(fontFamilies[i])[0].toLowerCase()
               ];
             if (subsetFontFamily && !fontFamilies.includes(subsetFontFamily)) {
               fontFamilies.splice(
@@ -1462,7 +1627,7 @@ async function subsetFonts(
             }
           }
         } else if (propName === 'font') {
-          const fontProperties = cssFontParser(cssRule.value);
+          const fontProperties = cssFontParser.parseFont(cssRule.value);
           const fontFamilies =
             fontProperties && fontProperties['font-family'].map(unquote);
           if (fontFamilies) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "subfont",
-  "version": "6.9.0",
+  "version": "6.10.0",
   "description": "Speeds up your pages initial paint by automatically subsetting local or Google fonts and loading them optimally",
   "engines": {
     "node": ">=10.0.0"
@@ -47,14 +47,14 @@
   "homepage": "https://github.com/Munter/subfont#readme",
   "dependencies": {
     "@gustavnikolaj/async-main-wrap": "^3.0.1",
+    "@hookun/parse-animation-shorthand": "^0.1.4",
     "assetgraph": "^7.8.1",
     "browserslist": "^4.13.0",
-    "css-font-parser": "^0.3.0",
+    "css-font-parser": "^2.0.0",
     "css-font-weight-names": "^0.2.1",
     "css-list-helpers": "^2.0.0",
-    "font-family-papandreou": "^0.2.0-patch2",
     "font-snapper": "^1.2.0",
-    "font-tracer": "^3.3.0",
+    "font-tracer": "^3.6.0",
     "fontkit": "^1.8.0",
     "fontverter": "^2.0.0",
     "gettemporaryfilepath": "^1.0.1",