@turntrout/subfont 1.0.0

package/lib/getCssRulesByProperty.js

@@ -0,0 +1,343 @@
+const specificity = require('specificity');
+const postcss = require('postcss');
+const postcssValueParser = require('postcss-value-parser');
+const unquote = require('./unquote');
+const parseAnimationShorthand = require('@hookun/parse-animation-shorthand');
+
+const counterRendererNames = new Set([
+  'none',
+  'disc',
+  'circle',
+  'square',
+  'decimal',
+  'decimal-leading-zero',
+  'lower-roman',
+  'upper-roman',
+  'lower-greek',
+  'lower-latin',
+  'lower-alpha',
+  'upper-latin',
+  'upper-alpha',
+  'armenian',
+  'georgian',
+  'hebrew',
+]);
+
+function unwrapNamespace(str) {
+  if (/^"/.test(str)) {
+    return unquote(str);
+  } else if (/^url\(.*\)$/i.test(str)) {
+    return unquote(str.replace(/^url\((.*)\)$/, '$1'));
+  } else {
+    throw new Error(`Cannot parse CSS namespace: ${str}`);
+  }
+}
+
+function getCssRulesByProperty(properties, cssSource, existingPredicates) {
+  if (!Array.isArray(properties)) {
+    throw new Error('properties argument must be an array');
+  }
+  if (typeof cssSource !== 'string') {
+    throw new Error('cssSource argument must be a string containing valid CSS');
+  }
+  existingPredicates = existingPredicates || {};
+
+  const parseTree = postcss.parse(cssSource);
+  let defaultNamespaceURI;
+  parseTree.walkAtRules('namespace', (rule) => {
+    const fragments = rule.params.split(/\s+/);
+    if (fragments.length === 1) {
+      defaultNamespaceURI = unwrapNamespace(rule.params);
+    }
+    // FIXME: Support registering namespace prefixes (fragments.length === 2):
+    // https://developer.mozilla.org/en-US/docs/Web/CSS/@namespace
+  });
+  const rulesByProperty = {
+    counterStyles: [],
+    keyframes: [],
+  };
+
+  for (const property of properties) {
+    rulesByProperty[property] = [];
+  }
+
+  const specificityCache = new Map();
+  function getSpecificity(selector) {
+    let cached = specificityCache.get(selector);
+    if (!cached) {
+      cached = specificity.calculate(selector);
+      specificityCache.set(selector, cached);
+    }
+    return cached;
+  }
+
+  const activeCssQueryPredicates = [];
+  function getCurrentPredicates() {
+    if (activeCssQueryPredicates.length > 0) {
+      const predicates = { ...existingPredicates };
+      for (const predicate of activeCssQueryPredicates) {
+        predicates[predicate] = true;
+      }
+      return predicates;
+    } else {
+      return existingPredicates;
+    }
+  }
+
+  (function visit(node) {
+    // Check for selector. We might be in an at-rule like @font-face
+    if (node.type === 'decl' && node.parent.selector) {
+      const isCustomProperty = /^--/.test(node.prop);
+      const propName = isCustomProperty ? node.prop : node.prop.toLowerCase(); // Custom properties ARE case sensitive
+      if (isCustomProperty || properties.includes(propName)) {
+        // Split up combined selectors as they might have different specificity
+        getSpecificity(node.parent.selector).forEach((specificityObject) => {
+          const isStyleAttribute =
+            specificityObject.selector === 'bogusselector';
+          (rulesByProperty[propName] = rulesByProperty[propName] || []).push({
+            predicates: getCurrentPredicates(),
+            namespaceURI: defaultNamespaceURI,
+            selector: isStyleAttribute
+              ? undefined
+              : specificityObject.selector.trim(),
+            specificityArray: isStyleAttribute
+              ? [1, 0, 0, 0]
+              : specificityObject.specificityArray,
+            prop: propName,
+            value: node.value,
+            important: !!node.important,
+          });
+        });
+      } else if (
+        propName === 'list-style' &&
+        properties.includes('list-style-type')
+      ) {
+        // Shorthand — use postcss-value-parser to properly handle quoted strings
+        let listStyleType;
+        for (const valueNode of postcssValueParser(node.value).nodes) {
+          if (valueNode.type === 'string') {
+            listStyleType = valueNode.value;
+          } else if (
+            valueNode.type === 'word' &&
+            counterRendererNames.has(valueNode.value)
+          ) {
+            listStyleType = valueNode.value;
+          }
+        }
+
+        if (typeof listStyleType !== 'undefined') {
+          // Split up combined selectors as they might have different specificity
+          getSpecificity(node.parent.selector).forEach((specificityObject) => {
+            const isStyleAttribute =
+              specificityObject.selector === 'bogusselector';
+
+            rulesByProperty['list-style-type'].push({
+              predicates: getCurrentPredicates(),
+              namespaceURI: defaultNamespaceURI,
+              selector: isStyleAttribute
+                ? undefined
+                : specificityObject.selector.trim(),
+              specificityArray: isStyleAttribute
+                ? [1, 0, 0, 0]
+                : specificityObject.specificityArray,
+              prop: 'list-style-type',
+              value: listStyleType,
+              important: !!node.important,
+            });
+          });
+        }
+      } else if (propName === 'animation') {
+        // Shorthand
+        const parsedAnimation = parseAnimationShorthand.parseSingle(
+          node.value
+        ).value;
+
+        if (properties.includes('animation-name')) {
+          // Split up combined selectors as they might have different specificity
+          getSpecificity(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: parsedAnimation.name,
+              important: !!node.important,
+            });
+          });
+        }
+        if (properties.includes('animation-timing-function')) {
+          // Split up combined selectors as they might have different specificity
+          getSpecificity(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 — use postcss-value-parser to correctly split on commas
+        // (regex split breaks on commas inside cubic-bezier() etc.)
+        const transitionProperties = [];
+        const transitionDurations = [];
+        const parsed = postcssValueParser(node.value);
+        // Split top-level nodes by dividers (commas)
+        let currentItem = [];
+        for (const valueNode of parsed.nodes) {
+          if (valueNode.type === 'div' && valueNode.value === ',') {
+            if (currentItem.length > 0) {
+              transitionProperties.push(currentItem[0]);
+            }
+            if (currentItem.length > 1) {
+              transitionDurations.push(currentItem[1]);
+            }
+            currentItem = [];
+          } else if (valueNode.type !== 'space') {
+            currentItem.push(postcssValueParser.stringify(valueNode));
+          }
+        }
+        // Handle last item
+        if (currentItem.length > 0) {
+          transitionProperties.push(currentItem[0]);
+        }
+        if (currentItem.length > 1) {
+          transitionDurations.push(currentItem[1]);
+        }
+
+        // Split up combined selectors as they might have different specificity
+        getSpecificity(node.parent.selector).forEach((specificityObject) => {
+          const isStyleAttribute =
+            specificityObject.selector === 'bogusselector';
+          if (properties.includes('transition-property')) {
+            rulesByProperty['transition-property'].push({
+              predicates: getCurrentPredicates(),
+              namespaceURI: defaultNamespaceURI,
+              selector: isStyleAttribute
+                ? undefined
+                : specificityObject.selector.trim(),
+              specificityArray: isStyleAttribute
+                ? [1, 0, 0, 0]
+                : specificityObject.specificityArray,
+              prop: 'transition-property',
+              value: transitionProperties.join(', '),
+              important: !!node.important,
+            });
+          }
+          if (properties.includes('transition-duration')) {
+            rulesByProperty['transition-duration'].push({
+              predicates: getCurrentPredicates(),
+              namespaceURI: defaultNamespaceURI,
+              selector: isStyleAttribute
+                ? undefined
+                : specificityObject.selector.trim(),
+              specificityArray: isStyleAttribute
+                ? [1, 0, 0, 0]
+                : specificityObject.specificityArray,
+              prop: 'transition-duration',
+              value: transitionDurations.join(', '),
+              important: !!node.important,
+            });
+          }
+        });
+      } else if (propName === 'font') {
+        getSpecificity(node.parent.selector).forEach((specificityObject) => {
+          const isStyleAttribute =
+            specificityObject.selector === 'bogusselector';
+          const value = {
+            predicates: getCurrentPredicates(),
+            namespaceURI: defaultNamespaceURI,
+            selector: isStyleAttribute
+              ? undefined
+              : specificityObject.selector.trim(),
+            specificityArray: isStyleAttribute
+              ? [1, 0, 0, 0]
+              : specificityObject.specificityArray,
+            prop: 'font',
+            value: node.value,
+            important: !!node.important,
+          };
+
+          for (const prop of [
+            'font-family',
+            'font-weight',
+            'font-size',
+            'font-style',
+          ]) {
+            if (properties.includes(prop)) {
+              rulesByProperty[prop].push(value);
+            }
+          }
+        });
+      }
+    } else if (
+      node.type === 'atrule' &&
+      node.name.toLowerCase() === 'counter-style'
+    ) {
+      const props = {};
+      for (const childNode of node.nodes) {
+        props[childNode.prop] = childNode.value;
+      }
+      rulesByProperty.counterStyles.push({
+        name: node.params,
+        predicates: getCurrentPredicates(),
+        props,
+      });
+    } else if (
+      node.type === 'atrule' &&
+      node.name.toLowerCase() === 'keyframes'
+    ) {
+      rulesByProperty.keyframes.push({
+        name: node.params,
+        namespaceURI: defaultNamespaceURI,
+        predicates: getCurrentPredicates(),
+        node,
+      });
+      return;
+    }
+
+    if (node.nodes) {
+      let popAfter = false;
+      if (node.type === 'atrule') {
+        const name = node.name.toLowerCase();
+        if (name === 'media' || name === 'supports') {
+          activeCssQueryPredicates.push(`${name}Query:${node.params}`);
+          popAfter = true;
+        }
+      }
+      for (const childNode of node.nodes) {
+        visit(childNode);
+      }
+      if (popAfter) {
+        activeCssQueryPredicates.pop();
+      }
+    }
+  })(parseTree);
+
+  // TODO: Collapse into a single object for duplicate values?
+
+  return rulesByProperty;
+}
+
+module.exports = getCssRulesByProperty;

package/lib/getFontInfo.js

@@ -0,0 +1,36 @@
+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();
+
+const enqueueWasm = require('./wasmQueue');
+
+module.exports = function getFontInfo(buffer) {
+  if (!fontInfoPromiseByBuffer.has(buffer)) {
+    const promise = enqueueWasm(() => getFontInfoFromBuffer(buffer)).catch(
+      (err) => {
+        // Evict rejected promises so retries with the same buffer aren't stuck
+        fontInfoPromiseByBuffer.delete(buffer);
+        throw err;
+      }
+    );
+    fontInfoPromiseByBuffer.set(buffer, promise);
+  }
+  return fontInfoPromiseByBuffer.get(buffer);
+};

package/lib/initialValueByProp.js

@@ -0,0 +1,18 @@
+module.exports = {
+  // 'font-family': 'serif'
+  'font-weight': 'normal',
+  'font-style': 'normal',
+  'font-stretch': 'normal',
+  content: 'normal',
+  quotes: '"«" "»" "‹" "›" "‘" "’" "\'" "\'" "\\"" "\\""', // Wide default set to account for browser differences
+  'list-style-type': 'none',
+  display: 'inline',
+  'animation-name': 'none',
+  'text-transform': 'none',
+  'transition-property': 'all',
+  'transition-duration': '0s',
+  'counter-increment': 'none',
+  'counter-reset': 'none',
+  'counter-set': 'none',
+  'white-space': 'normal',
+};

package/lib/injectSubsetDefinitions.js

@@ -0,0 +1,65 @@
+const postcssValueParser = require('postcss-value-parser');
+
+function injectSubsetDefinitions(cssValue, webfontNameMap, replaceOriginal) {
+  const subsetFontNames = new Set(
+    Object.values(webfontNameMap).map((name) => name.toLowerCase())
+  );
+  const rootNode = postcssValueParser(cssValue);
+  let isPreceededByWords = false;
+  for (const [i, node] of rootNode.nodes.entries()) {
+    let possibleFontFamily;
+    let lastFontFamilyTokenIndex = i;
+    if (node.type === 'string') {
+      possibleFontFamily = node.value;
+    } else if (node.type === 'word' || node.type === 'space') {
+      if (!isPreceededByWords) {
+        const wordSequence = [];
+        for (let j = i; j < rootNode.nodes.length; j += 1) {
+          if (rootNode.nodes[j].type === 'word') {
+            wordSequence.push(rootNode.nodes[j].value);
+            lastFontFamilyTokenIndex = j;
+          } else if (rootNode.nodes[j].type !== 'space') {
+            break;
+          }
+        }
+        possibleFontFamily = wordSequence.join(' ');
+      }
+      isPreceededByWords = true;
+    } else {
+      isPreceededByWords = false;
+    }
+    if (possibleFontFamily) {
+      const possibleFontFamilyLowerCase = possibleFontFamily.toLowerCase();
+      if (subsetFontNames.has(possibleFontFamilyLowerCase)) {
+        // Bail out, a subset font is already listed
+        return cssValue;
+      } else if (webfontNameMap[possibleFontFamilyLowerCase]) {
+        const newToken = {
+          type: 'string',
+          value: webfontNameMap[possibleFontFamilyLowerCase].replace(
+            /'/g,
+            "\\'"
+          ),
+          quote: "'",
+        };
+        if (replaceOriginal) {
+          rootNode.nodes.splice(
+            rootNode.nodes.indexOf(node),
+            lastFontFamilyTokenIndex - i + 1,
+            newToken
+          );
+        } else {
+          rootNode.nodes.splice(rootNode.nodes.indexOf(node), 0, newToken, {
+            type: 'div',
+            value: ',',
+            after: ' ',
+          });
+        }
+        return postcssValueParser.stringify(rootNode);
+      }
+    }
+  }
+  return cssValue;
+}
+
+module.exports = injectSubsetDefinitions;

package/lib/normalizeFontPropertyValue.js

@@ -0,0 +1,34 @@
+const cssFontWeightNames = require('css-font-weight-names');
+const initialValueByProp = require('./initialValueByProp');
+const unquote = require('./unquote');
+const normalizeFontStretch = require('font-snapper/lib/normalizeFontStretch');
+
+function normalizeFontPropertyValue(propName, value) {
+  const propNameLowerCase = propName.toLowerCase();
+  if (value === undefined) {
+    return initialValueByProp[propName];
+  }
+  if (propNameLowerCase === 'font-family') {
+    return unquote(value);
+  } else if (propNameLowerCase === 'font-weight') {
+    let parsedValue = value;
+    if (typeof parsedValue === 'string') {
+      // FIXME: Stripping the +bolder... suffix here will not always yield the correct result
+      // when expanding animations and transitions
+      parsedValue = parsedValue.replace(/\+.*$/, '').toLowerCase();
+    }
+    parsedValue = parseFloat(cssFontWeightNames[parsedValue] || parsedValue);
+    if (parsedValue >= 1 && parsedValue <= 1000) {
+      return parsedValue;
+    } else {
+      return value;
+    }
+  } else if (propNameLowerCase === 'font-stretch') {
+    return normalizeFontStretch(value);
+  } else if (typeof value === 'string' && propNameLowerCase !== 'src') {
+    return value.toLowerCase();
+  }
+  return value;
+}
+
+module.exports = normalizeFontPropertyValue;

package/lib/parseCommandLineOptions.js

@@ -0,0 +1,131 @@
+module.exports = function parseCommandLineOptions(argv) {
+  let yargs = require('yargs');
+  if (argv) {
+    yargs = yargs(argv);
+  }
+  yargs
+    .usage(
+      'Create optimal font subsets from your actual font usage.\n$0 [options] <htmlFile(s) | url(s)>'
+    )
+    .options('root', {
+      describe:
+        'Path to your web root (will be deduced from your input files if not specified)',
+      type: 'string',
+      demand: false,
+    })
+    .options('canonical-root', {
+      describe:
+        'URI root where the site will be deployed. Must be either an absolute, a protocol-relative, or a root-relative url',
+      type: 'string',
+      demand: false,
+    })
+    .options('output', {
+      alias: 'o',
+      describe: 'Directory where results should be written to',
+      type: 'string',
+      demand: false,
+    })
+    .options('text', {
+      describe:
+        'Additional characters to include in the subset for every @font-face found on the page',
+      type: 'string',
+    })
+    .options('fallbacks', {
+      describe:
+        'Async-load the full original font as a fallback for dynamic content. Disable with --no-fallbacks',
+      type: 'boolean',
+      default: true,
+    })
+    .options('dynamic', {
+      describe:
+        'Also trace the usage of fonts in a headless browser with JavaScript enabled',
+      type: 'boolean',
+      default: false,
+    })
+    .options('in-place', {
+      alias: 'i',
+      describe: 'Modify HTML-files in-place. Only use on build artifacts',
+      type: 'boolean',
+      default: false,
+    })
+    .options('inline-css', {
+      describe: 'Inline CSS that declares the @font-face for the subset fonts',
+      type: 'boolean',
+      default: false,
+    })
+    .options('font-display', {
+      describe: 'Injects a font-display value into the @font-face CSS',
+      type: 'string',
+      default: 'swap',
+      choices: ['auto', 'block', 'swap', 'fallback', 'optional'],
+    })
+    .options('recursive', {
+      alias: 'r',
+      describe:
+        'Crawl all HTML-pages linked with relative and root relative links. This stays inside your domain',
+      type: 'boolean',
+      default: false,
+    })
+    .options('relative-urls', {
+      describe: 'Issue relative urls instead of root-relative ones',
+      type: 'boolean',
+      default: false,
+    })
+    .options('silent', {
+      alias: 's',
+      describe: `Do not write anything to stdout`,
+      type: 'boolean',
+      default: false,
+    })
+    .options('debug', {
+      alias: 'd',
+      describe: 'Verbose insights into font glyph detection',
+      type: 'boolean',
+      default: false,
+    })
+    .options('dry-run', {
+      describe: `Don't write anything to disk. Shows a preview of files, sizes, and CSS changes that would be made`,
+      type: 'boolean',
+      default: false,
+    })
+    .options('cache', {
+      describe:
+        'Enable disk caching of subset font results between runs. Pass a directory path or use without a value for the default .subfont-cache directory',
+      type: 'string',
+      default: false,
+      coerce(val) {
+        if (val === '' || val === true) return true;
+        return val;
+      },
+    })
+    .options('chrome-flags', {
+      alias: ['chromeFlags'],
+      describe:
+        'Custom flags to pass to the Chrome/Chromium browser for dynamic tracing (comma-separated)',
+      type: 'string',
+      coerce(flags) {
+        if (!flags) return [];
+        return flags.split(',').map((f) => f.trim());
+      },
+    })
+    .options('concurrency', {
+      describe:
+        'Maximum number of worker threads for parallel font tracing. Defaults to the number of CPU cores (max 8)',
+      type: 'number',
+      demand: false,
+    })
+    .options('source-maps', {
+      describe: 'Preserve CSS source maps through subfont processing',
+      type: 'boolean',
+      default: false,
+    })
+    .wrap(require('yargs').terminalWidth());
+
+  const { _: inputFiles, ...rest } = yargs.argv;
+
+  return {
+    yargs,
+    inputFiles,
+    ...rest,
+  };
+};

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;
+        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/sfntCache.js

@@ -0,0 +1,29 @@
+const fontverter = require('fontverter');
+
+// Cache sfnt conversions by source buffer to avoid redundant work
+// when the same font is processed by collectFeatureGlyphIds and
+// subsetFontWithGlyphs.
+const sfntPromiseByBuffer = new WeakMap();
+
+function toSfnt(buffer) {
+  if (sfntPromiseByBuffer.has(buffer)) {
+    return sfntPromiseByBuffer.get(buffer);
+  }
+  let promise;
+  try {
+    const format = fontverter.detectFormat(buffer);
+    promise =
+      format === 'sfnt'
+        ? Promise.resolve(buffer)
+        : fontverter.convert(buffer, 'sfnt');
+  } catch (err) {
+    // Unrecognized format — don't cache so retries work
+    return fontverter.convert(buffer, 'sfnt');
+  }
+  // Evict on rejection so retries with the same buffer aren't stuck
+  promise.catch(() => sfntPromiseByBuffer.delete(buffer));
+  sfntPromiseByBuffer.set(buffer, promise);
+  return promise;
+}
+
+module.exports = { toSfnt };