penthouse/lib/postformatting/criticalCssImages.js

Generate critical path CSS for web pages

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = criticalCssImages;

var _cssTree = _interopRequireDefault(require("css-tree"));

var _debug = _interopRequireDefault(require("debug"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

const debuglog = (0, _debug.default)('penthouse:criticalCssImages');

function requiresRequest(src) {
  return src && src.indexOf('data:') === -1;
}

function criticalCssImages(ast, url) {
  // TODO: use Set instead
  const imgUrls = []; // find images used in css

  _cssTree.default.walk(ast, {
    visit: 'Declaration',
    parseValue: true,
    enter: node => {
      if ((node.property === 'background' || node.property === 'background-image') && node.value.children && node.value.children.eachRight) {
        node.value.children.eachRight(childNode => {
          const {
            value
          } = childNode;

          if (!requiresRequest(value && value.value)) {
            if (value && value.value) {
              debuglog('ignore image not requering request', value.value);
            }

            return;
          }

          if (value.type === 'Raw') {
            const relativeUrl = value.value;
            imgUrls.push(new URL(relativeUrl, url).href);
          } else {
            // absolute url, use as is
            imgUrls.push(value.value.substr(1, value.value.length - 2));
          }
        });
      }
    }
  });

  const result = Array.from(new Set(imgUrls));
  return result;
} // too broad - would also capture f.e. font urls
// visit: 'Url',
//     enter: (node, item) => {
//       const { value } = node
//       if (value.type === 'Raw') {
//         images.push(value.value)
//         debuglog('RAW url declaration', value.value)
//       } else {
//         images.push(value.value.substr(1, value.value.length - 2))
//         debuglog('whats the value of this URL?', images[images.length - 1])
//       }
//     }