gatsby-plugin-prefetch-google-fonts/merge-css.js

A Gatsby plugin to download and prefetch [Google Fonts](https://fonts.google.com/). Can increase performance as opposed to loading webfonts from Google's external stylesheet.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));

var _require = require("fs-extra"),
    readFile = _require.readFile,
    outputFile = _require.outputFile;

var CleanCss = require("clean-css");

var path = require("path");

module.exports =
/*#__PURE__*/
function () {
  var _ref = (0, _asyncToGenerator2.default)(
  /*#__PURE__*/
  _regenerator.default.mark(function _callee(config) {
    var cachedPath, _ref2, _ref3, woff2, woff, woff2Lines, woffLines, css;

    return _regenerator.default.wrap(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
            cachedPath = path.join("./.cache/google-fonts/", config.pathPrefix); // Read files

            _context.next = 3;
            return Promise.all([readFile("".concat(cachedPath, "/woff2.css"), "utf8"), readFile("".concat(cachedPath, "/woff.css"), "utf8")]);

          case 3:
            _ref2 = _context.sent;
            _ref3 = (0, _slicedToArray2.default)(_ref2, 2);
            woff2 = _ref3[0];
            woff = _ref3[1];
            woff2Lines = getLines(woff2);
            woffLines = getLines(woff);
            mergeLines(woff2Lines, woffLines);
            css = createCssString(woff2, woff2Lines);
            css = new CleanCss().minify(css).styles; // Add font-display swap as recommended here https://css-tricks.com/font-display-masses/.

            css = css.replace(/}/g, ";font-display: swap;}");
            _context.next = 15;
            return outputFile("".concat(cachedPath, "/google-fonts.css"), css);

          case 15:
          case "end":
            return _context.stop();
        }
      }
    }, _callee, this);
  }));

  return function (_x) {
    return _ref.apply(this, arguments);
  };
}();

function getLines(data) {
  var lines = {};
  data.split("\n").forEach(function (line) {
    line = line.trim();

    if (line.indexOf("src:") === 0) {
      var items = line.replace(";", "").replace("src:", "").split(",").map(function (item) {
        return item.trim();
      });
      var name = items.shift();
      lines[name] = {
        items: items,
        line: line.replace(";", "")
      };
    }
  });
  return lines;
}

function mergeLines(origin, newLines) {
  for (var i in origin) {
    if (newLines[i]) {
      origin[i].newLine = "".concat(origin[i].newLine || origin[i].line, ", ").concat(newLines[i].items[newLines[i].items.length - 1]);
    }
  }
}

function createCssString(str, obj) {
  for (var i in obj) {
    str = str.replace(obj[i].line, obj[i].newLine);
  }

  return str;
}