25976187252

Committed 16 May 2026 11:50PM UTC coverage: 90.27% (+1.6%) from 88.691%

Build # 25976187252

Build Type

Pull #620

github

Committed by

bezoerb

Commit Message

fix(ci): add @vitest/coverage-v8 and Node 24 to matrix

- Add missing @vitest/coverage-v8 devDependency for coverage reports
- Add Node.js 24 to CI test matrix

Pull Request Pull Request #620: vite+ & dependency update

Coverage Stats

535 of 611 branches covered (87.56%)

Branch coverage included in aggregate %.

163 of 176 new or added lines in 7 files covered. (92.61%)

1 existing line in 1 file now uncovered.

634 of 684 relevant lines covered (92.69%)

559.39 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

90.6

/src/file.js

/* eslint-disable complexity */
import { Buffer } from "node:buffer";
import fs from "node:fs";
import os from "node:os";
import path from "node:path";
import process from "node:process";
import url from "node:url";
import { promisify } from "node:util";
import parseCssUrls from "css-url-parser";
import { dataUriToBuffer } from "data-uri-to-buffer";
import debugBase from "debug";
import { findUpMultiple } from "find-up";
import { globby } from "globby";
import { parse } from "@adobe/css-tools";
import got from "got";
import isGlob from "is-glob";
import { makeDirectory } from "make-dir";
import oust from "oust";
import pico from "picocolors";
import postcss from "postcss";
import postcssUrl from "postcss-url";
import slash from "slash";
import { temporaryDirectory, temporaryFile } from "tempy";
import Vinyl from "vinyl";
import { filterAsync, forEachAsync, mapAsync, reduceAsync } from "./array.js";
import { FileNotFoundError } from "./errors.js";

const debug = debugBase("critical:file");

export const BASE_WARNING = `${pico.yellow(
  "Warning:",
)} Missing base path. Consider 'base' option. https://goo.gl/PwvFVb`;

const warn = (text) => process.stderr.write(pico.yellow(`${text}${os.EOL}`));

const unlinkAsync = promisify(fs.unlink);
const readFileAsync = promisify(fs.readFile);
const writeFileAsync = promisify(fs.writeFile);

export const checkCssOption = (css) =>
  Boolean((!Array.isArray(css) && css) || (Array.isArray(css) && css.length > 0));

export async function outputFileAsync(file, data) {
  const dir = path.dirname(file);

  if (!fs.existsSync(dir)) {
    await makeDirectory(dir);
  }

  return writeFileAsync(file, data);
}

/**
 * Fixup slashes in file paths for Windows and remove volume definition in front
 * @param {string} str Path
 * @returns {string} Normalized path
 */
export function normalizePath(str) {
  return process.platform === "win32" ? slash(str.replace(/^[a-zA-Z]:/, "")) : str;
}

/**
 * Check whether a resource is external or not
 * @param {string} href Path
 * @returns {boolean} True if the path is remote
 */
export function isRemote(href) {
  return typeof href === "string" && /(^\/\/)|(:\/\/)/.test(href) && !href.startsWith("file:");
}

/**
 * Parse Url
 * @param {string} str The URL
 * @returns {URL|object} return new URL Object
 */
export function urlParse(str = "") {
  if (/^\w+:\/\//.test(str)) {
    return new URL(str);
  }

  if (str.startsWith("//")) {
    return new URL(str, "https://ba.se");
  }

  return { pathname: str };
}

/**
 * Get file uri considering OS
 * @param {string} file Absolute filepath
 * @returns {string} file uri
 */
function getFileUri(file) {
  if (!isAbsolute(file)) {
    throw new Error("Path must be absolute to compute file uri. Received: " + file);
  }

  const fileUrl =
    process.platform === "win32" ? new URL(`file:///${file}`) : new URL(`file://${file}`);

  return fileUrl.href;
}

/**
 * Resolve Url
 * @param {string} from Resolve from
 * @param {string} to Resolve to
 * @returns {string} The resolved url
 */
export function urlResolve(from = "", to = "") {
  if (isRemote(from)) {
    const { href: base } = urlParse(from);
    const { href } = new URL(to, base);
    return href;
  }

  if (isAbsolute(to)) {
    return to;
  }

  return path.join(from.replace(/[^/]+$/, ""), to);
}

function isFilePath(href) {
  return typeof href === "string" && !isRemote(href);
}

export function isAbsolute(href) {
  return isFilePath(href) && path.isAbsolute(href);
}

/**
 * Check whether a resource is relative or not
 * @param {string} href Path
 * @returns {boolean} True if the path is relative
 */
function isRelative(href) {
  return isFilePath(href) && !isAbsolute(href);
}

/**
 * Wrapper for File.isVinyl to detect vinyl objects generated by gulp (vinyl < v0.5.6)
 * @param {*} file Object to check
 * @returns {boolean} True if it's a valid vinyl object
 */
function isVinyl(file) {
  return (
    Vinyl.isVinyl(file) ||
    file instanceof Vinyl ||
    (file && /function File\(/.test(file.constructor.toString()) && file.contents && file.path)
  );
}

/**
 * Check if a file exists (remote & local)
 * @param {string} href Path
 * @param {object} options Critical options
 * @returns {Promise<boolean>} Resolves to true if the file exists
 */
export async function fileExists(href, options = {}) {
  if (isVinyl(href)) {
    return !href.isNull();
  }

  if (Buffer.isBuffer(href)) {
    return true;
  }

  if (isRemote(href)) {
    const { request = {} } = options;
    const method = request.method || "head";
    try {
      const response = await fetch(href, { ...options, request: { ...request, method } });
      const { statusCode } = response;

      if (method === "head") {
        return Number.parseInt(statusCode, 10) < 400;
      }

      return Boolean(response);
    } catch {
      return false;
    }
  }

  return fs.existsSync(href) || fs.existsSync(href.replace(/\?.*$/, ""));
}

/**
 * Remove temporary files
 * @param {array} files Array of temp files
 * @returns {Promise<void>|*} Promise resolves when all files removed
 */
const getCleanup = (files) => () =>
  forEachAsync(files, (file) => {
    try {
      unlinkAsync(file);
    } catch {
      debug(`${file} was already deleted`);
    }
  });

/**
 * Path join considering urls
 * @param {string} base Base path part
 * @param {string} part Path part to append
 * @returns {string} Joined path/url
 */
export function joinPath(base, part) {
  if (!part) {
    return base;
  }

  if (isRemote(base)) {
    return urlResolve(base, part);
  }

  return path.join(base, part.replace(/\?.*$/, ""));
}

/**
 * Resolve path
 * @param {string} href Path
 * @param {[string]} search Paths to search in
 * @param {object} options Critical options
 * @returns {Promise<string>} Resolves to found path, rejects with FileNotFoundError otherwise
 */
export async function resolve(href, search = [], options = {}) {
  let exists = await fileExists(href, options);
  if (exists) {
    return href;
  }

  for (const ref of search) {
    const checkPath = joinPath(ref, href);
    exists = await fileExists(checkPath, options); /* eslint-disable-line no-await-in-loop */
    if (exists) {
      return checkPath;
    }
  }

  throw new FileNotFoundError(href, search);
}

/**
 * Glob pattern
 * @param {array|string} pattern Glob pattern
 * @param {string} base Critical base option
 * @returns {Promise<[string]>} Found files
 */
function glob(pattern, { base } = {}) {
  // Evaluate globs based on base path
  const patterns = Array.isArray(pattern) ? pattern : [pattern];
  // Prepend base if it's not empty & not remote
  const prependBase = (pattern) => (base && !isRemote(base) ? [path.join(base, pattern)] : []);

  return reduceAsync([], patterns, async (files, pattern) => {
    if (isGlob(pattern)) {
      const result = await globby([...prependBase(pattern), pattern]);
      return [...files, ...result];
    }

    return [...files, pattern];
  });
}

/**
 * Rebase image url in css
 *
 * @param {Buffer|string} css Stylesheet
 * @param {string} from Rebase from url
 * @param {string} to Rebase to url
 * @param {opject} options
 *    method: {string|function} method Rebase method. See https://github.com/postcss/postcss-url#options-combinations
 *    strict: fail on invalid css
 *    inlined: boolean flag indicating inlined css
 * @param {boolean} strict fail on invalid css
 * @returns {Buffer} Rebased css
 */
async function rebaseAssets(css, from, to, options = {}) {
  const { method = "rebase", strict = false, inlined = false } = options;
  let rebased = css.toString();

  debug("Rebase assets", { from, to });

  if (to.endsWith("/")) {
    to += "temp.html";
  }

  if (from.endsWith("/")) {
    from += "temp.css";
  }

  if (isRemote(from)) {
    const { pathname } = urlParse(from);
    from = pathname;
  }

  try {
    if (typeof method === "function") {
      const transform = (asset, ...rest) => {
        const assetNormalized = {
          ...asset,
          absolutePath: normalizePath(asset.absolutePath),
          relativePath: normalizePath(asset.relativePath),
        };

        return method(assetNormalized, ...rest);
      };

      const result = await postcss()
        .use(postcssUrl({ url: transform }))
        .process(css, { from, to });
      rebased = result.css;
    } else if (from && to) {
      const result = await postcss()
        .use(postcssUrl({ url: method }))
        .process(css, { from, to });
      rebased = result.css;
    }
  } catch (error) {
    if (strict) {
      if (inlined) {
        error.message = error.message.replace(from, "Inlined stylesheet");
      }

      throw error;
    }

    debug(`CSS parse error: ${error.message}`);
    rebased = "";
  }

  return Buffer.from(rebased);
}

/**
 * Token generated by concatenating username and password with `:` character within a base64 encoded string.
 * @param  {String} user User identifier.
 * @param  {String} pass Password.
 * @returns {String} Base64 encoded authentication token.
 */
export const token = (user, pass) => Buffer.from([user, pass].join(":")).toString("base64");

/**
 * Get external resource. Try https and falls back to http
 * @param {string} uri Source uri
 * @param {object} options Options passed to critical
 * @param {boolean} secure Use https?
 * @returns {Promise<Buffer|response>} Resolves to fetched content or response object for HEAD request
 */
async function fetch(uri, options = {}, secure = true) {
  const { user, pass, userAgent, request: requestOptions = {} } = options;
  const { headers = {}, method = "get", https } = requestOptions;
  let resourceUrl = uri;
  let protocolRelative = false;

  // Consider protocol-relative urls
  if (uri.startsWith("//")) {
    protocolRelative = true;
    resourceUrl = urlResolve(`http${secure ? "s" : ""}://te.st`, uri);
  }

  requestOptions.https = { rejectUnauthorized: true, ...https };
  if (user && pass) {
    headers.Authorization = `Basic ${token(user, pass)}`;
  }

  if (userAgent) {
    headers["User-Agent"] = userAgent;
  }

  debug(`Fetching resource: ${resourceUrl}`, { ...requestOptions, headers });

  try {
    const response = await got(resourceUrl, { ...requestOptions, headers });
    if (method === "head") {
      return response;
    }

    return Buffer.from(response.body || "");
  } catch (error) {
    // Try again with http
    if (secure && protocolRelative) {
      debug(`${error.message} - trying again over http`);
      return fetch(uri, options, false);
    }

    debug(`${resourceUrl} failed: ${error.message}`);

    if (method === "head") {
      return error.response;
    }

    if (error.response) {
      return Buffer.from(error.response.body || "");
    }

    throw error;
  }
}

/**
 * Extract stylesheet urls from html document
 * @param {Vinyl} file Vinyl file object (document)
 * @param {object} options Options passed to critical
 * @returns {[string]} Stylesheet urls from document source
 */
function getStylesheetObjects(file, options) {
  const { ignoreInlinedStyles } = options || {};
  if (!isVinyl(file)) {
    throw new Error("Parameter file needs to be a vinyl object");
  }

  // Already computed stylesheetObjects
  if (file.stylesheetObjects) {
    return file.stylesheetObjects;
  }

  const stylesheets = oust.raw(file.contents.toString(), ["stylesheets", "preload", "styles"]);

  const isNotPrint = (el) =>
    el.attr("media") !== "print" ||
    (Boolean(el.attr("onload")) && el.attr("onload").includes("media"));

  const isMediaQuery = (media) =>
    typeof media === "string" && !["all", "print", "screen"].includes(media);

  const allowedInlinedStylesheet = (type) => type !== "styles" || !ignoreInlinedStyles;

  const objects = stylesheets
    .filter(
      (link) => isNotPrint(link.$el) && Boolean(link.value) && allowedInlinedStylesheet(link.type),
    )
    .map((link) => {
      const media = isMediaQuery(link.$el.attr("media")) ? link.$el.attr("media") : "";

      // support base64 encoded styles
      if (link.value.startsWith("data:")) {
        const parsed = dataUriToBuffer(link.value);
        return {
          media,
          value: Buffer.from(parsed.buffer),
        };
      }

      if (link.type === "styles") {
        return {
          media,
          value: Buffer.from(link.value),
        };
      }

      return {
        media,
        value: link.value,
      };
    });

  const isEqual = (a, b) => Buffer.from(a).compare(Buffer.from(b)) === 0;
  const compare = (a, b) => isEqual(a.media, b.media) && isEqual(a.value, b.value);
  // Make objects unique
  const stylesheetObjects = objects.filter((a, index, array) => {
    return array.findIndex((b) => compare(a, b)) === index;
  });

  // cache them for later use
  file.stylesheetObjects = stylesheetObjects;

  return stylesheetObjects;
}

/**
 * Extract stylesheet urls from html document
 * @param {Vinyl} file Vinyl file object (document)
 * @param {object} options Options passed to critical
 * @returns {[string]} Stylesheet urls from document source
 */
export function getStylesheetHrefs(file, options) {
  return getStylesheetObjects(file, options).map((object) => object.value);
}

/**
 * Extract stylesheet urls from html document
 * @param {Vinyl} file Vinyl file object (document)
 * @param {object} options Options passed to critical
 * @returns {[string]} Stylesheet urls from document source
 */
export function getStylesheetsMedia(file, options) {
  return getStylesheetObjects(file, options).map((object) => object.media);
}

/**
 * Extract asset urls from stylesheet
 * @param {Vinyl} file Vinyl file object (stylesheet)
 * @returns {[string]} Asset urls from stylesheet source
 */
export function getAssets(file) {
  if (!isVinyl(file)) {
    throw new Error("Parameter file needs to be a vinyl object");
  }

  return parseCssUrls(file.contents.toString());
}

/**
 * Compute Path to Html document based on docroot
 * @param {Vinyl} file The file we want to check
 * @param {object} options Critical options object
 * @returns {Promise<string>} Computed path
 */
export async function getDocumentPath(file, options = {}) {
  let { base } = options;

  // Check remote
  if (file.remote) {
    let { pathname } = file.urlObj;
    if (pathname.endsWith("/")) {
      pathname += "index.html";
    }

    return pathname;
  }

  // If we don't have a file path and
  if (!file.path) {
    return "";
  }

  if (base) {
    base = path.resolve(base);
    return normalizePath(`/${path.relative(base, file.path || base)}`);
  }

  // Check local and assume base path based on relative stylesheets
  if (file.stylesheets) {
    const relativeRefs = file.stylesheets.filter((href) => isRelative(href));
    const absoluteRefs = file.stylesheets.filter((href) => isAbsolute(href));

    // If we have no stylesheets inside, fall back to path relative to process cwd
    if (relativeRefs.length === 0 && absoluteRefs.length === 0) {
      process.stderr.write(BASE_WARNING);

      return normalizePath(`/${path.relative(process.cwd(), file.path)}`);
    }

    // Compute base path based on absolute links
    if (relativeRefs.length === 0) {
      const [ref] = absoluteRefs;
      const paths = await getAssetPaths(file, ref, options);
      try {
        const filepath = await resolve(ref, paths, options);
        return normalizePath(
          `/${path.relative(normalizePath(filepath).replace(ref, ""), file.path)}`,
        );
      } catch {
        process.stderr.write(BASE_WARNING);

        return normalizePath(`/${path.relative(process.cwd(), file.path)}`);
      }
    }

    // Compute path based on relative stylesheet links
    const dots = relativeRefs.reduce((res, href) => {
      const match = /^(\.\.\/)+/.exec(href);

      return match && match[0].length > res.length ? match[0] : res;
    }, "./");

    const tmpBase = path.resolve(path.dirname(file.path), dots);

    return normalizePath(`/${path.relative(tmpBase, file.path)}`);
  }

  return "";
}

/**
 * Get path for remote stylesheet. Compares document host with stylesheet host
 * @param {object} fileObj Result of urlParse(style url)
 * @param {object} documentObj Result of urlParse(document url)
 * @param {string} filename Filename
 * @returns {string} Path to css (can be remote or local relative to document base)
 */
function getRemoteStylesheetPath(fileObj, documentObj, filename) {
  let { hostname: styleHost, port: stylePort, pathname } = fileObj;
  const { hostname: docHost, port: docPort } = documentObj || {};

  if (filename) {
    pathname = joinPath(path.dirname(pathname), path.basename(filename));
    fileObj.pathname = normalizePath(pathname);
  }

  if (`${styleHost}:${stylePort}` === `${docHost}:${docPort}`) {
    return pathname;
  }

  return url.format(fileObj);
}

/**
 * Get path to stylesheet based on docroot
 * @param {Vinyl} document Optional reference document
 * @param {Vinyl} file the file we want to check
 * @param {object} options Critical options object
 * @returns {Promise<string>} Computed path
 */
export function getStylesheetPath(document, file, options = {}) {
  let { base } = options;

  // Check inline styles
  if (file.inline) {
    return normalizePath(`${document.virtualPath}.css`);
  }

  // Check remote
  if (file.remote) {
    return getRemoteStylesheetPath(file.urlObj, document.urlObj);
  }

  // Generate path relative to document if stylesheet is referenced relative
  //
  if (isRelative(file.path) && document.virtualPath) {
    return normalizePath(joinPath(path.dirname(document.virtualPath), file.path));
  }

  if (base && path.resolve(file.path).includes(path.resolve(base))) {
    base = path.resolve(base);
    return normalizePath(`/${path.relative(path.resolve(base), path.resolve(file.path))}`);
  }

  // Try to compute path based on document link tags with same name
  const stylesheet = document.stylesheets
    .filter((href) => !Buffer.isBuffer(href))
    .find((href) => {
      const { pathname } = urlParse(href);
      const name = path.basename(pathname);
      return name === path.basename(file.path);
    });

  if (stylesheet && isRelative(stylesheet) && document.virtualPath) {
    return normalizePath(joinPath(path.dirname(document.virtualPath), stylesheet));
  }

  if (stylesheet && isRemote(stylesheet)) {
    return getRemoteStylesheetPath(urlParse(stylesheet), document.urlObj);
  }

  if (stylesheet) {
    return stylesheet;
  }

  // Try to find stylesheet path based on document link tags
  const [unsafestylesheet] = document.stylesheets
    .filter((href) => !Buffer.isBuffer(href))
    .sort((a) => (isRemote(a) ? 1 : -1));
  if (unsafestylesheet && isRelative(unsafestylesheet) && document.virtualPath) {
    return normalizePath(
      joinPath(
        path.dirname(document.virtualPath),
        joinPath(path.dirname(unsafestylesheet), path.basename(file.path)),
      ),
    );
  }

  if (unsafestylesheet && isRemote(unsafestylesheet)) {
    return getRemoteStylesheetPath(
      urlParse(unsafestylesheet),
      document.urlObj,
      path.basename(file.path),
    );
  }

  if (stylesheet) {
    return stylesheet;
  }

  process.stderr.write(BASE_WARNING);
  if (document.virtualPath && file.path) {
    return normalizePath(joinPath(path.dirname(document.virtualPath), path.basename(file.path)));
  }

  return "";
}

/**
 * Get a list of possible asset paths
 * Guess this is rather expensive so this method should only be used if
 * there's no other possible way
 *
 * @param {Vinyl} document Html document
 * @param {string} file File path
 * @param {object} options Critical options
 * @param {boolean} strict Check for file existence
 * @returns {Promise<[string]>} List of asset paths
 */
export async function getAssetPaths(document, file, options = {}, strict = true) {
  const { base, rebase = {}, assetPaths = [] } = options;
  const { history = [], url: docurl = "", urlObj } = document;
  const { from, to } = rebase;
  const { pathname: urlPath } = urlObj || {};
  const [docpath] = history;

  if (isVinyl(file)) {
    return [];
  }

  // consider base tag in document
  const baseTagHref = document?.contents?.toString()?.match(/<base\s+href=['"]([^'"]+)['"]/)?.[1];
  // Remove double dots in the middle
  const normalized = path.join(file);
  // Count directory hops
  const hops = normalized.split(path.sep).reduce((cnt, part) => (part === ".." ? cnt + 1 : cnt), 0);
  // Also findup first real dir path
  const [first] = normalized.split(path.sep).filter((p) => p && p !== ".."); // eslint-disable-line unicorn/prefer-array-find
  const mappedAssetPaths = base ? assetPaths.map((a) => joinPath(base, a)) : [];

  // Make a list of possible paths
  const paths = [
    ...new Set([
      base,
      baseTagHref,
      baseTagHref && !isRemote(baseTagHref) && path.join(base, baseTagHref),
      base && isRelative(base) && path.join(process.cwd(), base),
      docurl,
      urlPath && urlResolve(urlObj.href, path.dirname(urlPath)),
      urlPath &&
        !path.dirname(urlPath).endsWith("/") &&
        urlResolve(urlObj.href, `${path.dirname(urlPath)}/`),
      docurl && urlResolve(docurl, file),
      docpath && path.dirname(docpath),
      ...assetPaths,
      ...mappedAssetPaths,
      to,
      from,
      base && docpath && path.join(base, path.dirname(docpath)),
      base && to && path.join(base, path.dirname(to)),
      base && from && path.join(base, path.dirname(from)),
      base && isRelative(file) && hops
        ? path.join(base, ...Array.from({ length: hops }).fill("tmpdir"), file)
        : "",
      process.cwd(),
    ]),
  ];

  // Filter non-existent paths
  const filtered = await filterAsync(paths, (f) => {
    if (!f || (isAbsolute(f) && !f?.includes(process.cwd()))) {
      return false;
    }

    return !strict || fileExists(f, options);
  });

  // Findup first directory in search path and add to the list if available
  const all = await reduceAsync(filtered, [...new Set(filtered)], async (result, cwd) => {
    if (isRemote(cwd)) {
      return [...result, cwd];
    }

    // const up = await findUp(first, {cwd, type: 'directory'});
    const up = await findUpMultiple(first, { cwd, type: "directory", stopAt: process.cwd() });
    const additionalDirectories = up.flatMap((u) => {
      const upDir = path.dirname(u);

      if (hops) {
        // Add additional directories based on dirHops
        const additional = path.relative(upDir, cwd).split(path.sep).slice(0, hops);

        return [upDir, path.join(upDir, ...additional)];
      }

      return [upDir];
    });

    return [...result, ...additionalDirectories];
  });

  debug(`(getAssetPaths) Search file "${file}" in:`, [...new Set(all)]);

  // Return uniquq result
  return [...new Set(all)];
}

/**
 * Create vinyl object from filepath
 * @param {object} src File descriptor either pass "filepath" or "html"
 * @param {object} options Critical options
 * @returns {Promise<Vinyl>} The vinyl object
 */
export async function vinylize(src, options = {}) {
  const { filepath, html } = src;
  const { rebase = {}, request = {} } = options;
  const file = new Vinyl();
  file.cwd = "/";
  file.remote = false;
  file.inline = false;

  if (html) {
    const { to } = rebase;
    file.contents = Buffer.from(html);
    file.path = to || "";
    file.virtualPath = to || "";
  } else if (filepath && Buffer.isBuffer(filepath)) {
    file.path = "";
    file.virtualPath = "";
    file.contents = filepath;
    file.inline = true;
  } else if (filepath && isVinyl(filepath)) {
    return filepath;
  } else if (filepath && isRemote(filepath)) {
    let url = filepath;
    try {
      const response = await fetch(filepath, {
        ...options,
        request: { ...request, method: "head" },
      });
      if (response.url !== url) {
        debug(`(vinylize) found redirect from ${url} to ${response.url}`);
        url = response.url;
      }
    } catch {}

    file.remote = true;
    file.url = url;
    file.urlObj = urlParse(url);
    file.contents = await fetch(url, options);
    file.virtualPath = file.urlObj.pathname;
  } else if (filepath && fs.existsSync(filepath)) {
    file.path = filepath;
    file.virtualPath = filepath;
    file.contents = await readFileAsync(filepath);
  } else {
    throw new FileNotFoundError(filepath);
  }

  return file;
}

/**
 * Get stylesheet file object
 * @param {Vinyl} document Document vinyl object
 * @param {string} filepath Path/Url to css file
 * @param {object} options Critical options
 * @returns {Promise<Vinyl>} Vinyl representation fo the stylesheet
 */
export async function getStylesheet(document, filepath, options = {}) {
  const { rebase = {}, css, strict, media } = options;
  const originalPath = filepath;

  const exists = await fileExists(filepath, options);

  if (!exists) {
    const searchPaths = await getAssetPaths(document, filepath, options);
    try {
      filepath = await resolve(filepath, searchPaths, options);
    } catch (error) {
      if (!isRemote(filepath) || strict) {
        throw error;
      }

      return new Vinyl();
    }
  }

  // Create absolute file paths for local files passed via css option
  // to prevent document relative stylesheet paths if they are not relative specified
  if (
    !Buffer.isBuffer(originalPath) &&
    !isVinyl(filepath) &&
    !isRemote(filepath) &&
    checkCssOption(css)
  ) {
    filepath = path.resolve(filepath);
  }

  const file = await vinylize({ filepath }, options);
  if (media) {
    file.contents = Buffer.from(`@media ${media} { ${file.contents.toString()} }`);
  }

  // Restore original path for local files referenced from document and not from options
  if (!Buffer.isBuffer(originalPath) && !isRemote(originalPath) && !checkCssOption(css)) {
    file.path = originalPath;
  }

  // Get stylesheet path. Keeps stylesheet url if it differs from document url
  const stylepath = await getStylesheetPath(document, file, options);
  if (Buffer.isBuffer(originalPath)) {
    file.path = stylepath;
    file.virtualPath = stylepath;
  }

  debug("(getStylesheet) Virtual Stylesheet Path:", stylepath);
  // We can safely rebase assets if we have:
  // - a url to the stylesheet
  // - if rebase.from and rebase.to is specified
  // - a valid document path and a stylesheet path
  // - an absolute positioned stylesheet so we can make the images absolute
  // - and rebase is not disabled (#359)
  // First respect the user input
  if (rebase === false) {
    return file;
  }

  if (rebase.from && rebase.to) {
    file.contents = await rebaseAssets(file.contents, rebase.from, rebase.to, {
      method: "rebase",
      strict: options.strict,
      inlined: Buffer.isBuffer(originalPath),
    });
  } else if (typeof rebase === "function") {
    file.contents = await rebaseAssets(file.contents, stylepath, document.virtualPath, {
      method: rebase,
      strict: options.strict,
      inlined: Buffer.isBuffer(originalPath),
    });
    // Next rebase to the stylesheet url
  } else if (isRemote(rebase.to || stylepath)) {
    const from = rebase.from || stylepath;
    const to = rebase.to || stylepath;
    const method = (asset) =>
      isRemote(asset.originUrl) ? asset.originUrl : urlResolve(to, asset.originUrl);
    file.contents = await rebaseAssets(file.contents, from, to, {
      method,
      strict: options.strict,
      inlined: Buffer.isBuffer(originalPath),
    });

    // Use relative path to document (local)
  } else if (document.virtualPath) {
    file.contents = await rebaseAssets(
      file.contents,
      rebase.from || stylepath,
      rebase.to || document.virtualPath,
      {
        method: "rebase",
        strict: options.strict,
        inlined: Buffer.isBuffer(originalPath),
      },
    );
  } else if (document.remote) {
    const { pathname } = document.urlObj;
    file.contents = await rebaseAssets(
      file.contents,
      rebase.from || stylepath,
      rebase.to || pathname,
      {
        method: "rebase",
        strict: options.strict,
        inlined: Buffer.isBuffer(originalPath),
      },
    );

    // Make images absolute if we have an absolute positioned stylesheet
  } else if (isAbsolute(stylepath)) {
    file.contents = await rebaseAssets(
      file.contents,
      rebase.from || stylepath,
      rebase.to || "/index.html",
      {
        method: (asset) => normalizePath(asset.absolutePath),
        strict: options.strict,
        inlined: Buffer.isBuffer(originalPath),
      },
    );
  } else {
    warn(`Not rebasing assets for ${originalPath}. Use "rebase" option`);
  }

  debug("(getStylesheet) Result:", file);

  return file;
}

const isCssSource = (string) => {
  try {
    parse(string);
    return true;
  } catch {
    return false;
  }
};

/**
 * Get css for document
 * @param {Vinyl} document Vinyl representation of HTML document
 * @param {object} options Critical options
 * @returns {Promise<string>} Css string unoptimized, Multiple stylesheets are concatenated with EOL
 */
export async function getCss(document, options = {}) {
  const { css } = options;
  let stylesheets = [];

  if (checkCssOption(css)) {
    const cssArray = Array.isArray(css) ? css : [css];

    // merge css files & css source strings passed as css option
    const filesRaw = await Promise.all(
      cssArray.map((value) => {
        if (isCssSource(value)) {
          return Buffer.from(value);
        }

        return glob(value, options);
      }),
    );

    const files = filesRaw.flat();
    stylesheets = await mapAsync(files, (file) => getStylesheet(document, file, options));
    debug("(getCss) css option set", files, stylesheets);
  } else {
    stylesheets = await mapAsync(document.stylesheets, (file, index) => {
      const media = (document.stylesheetsMedia || [])[index];
      return getStylesheet(document, file, { ...options, media });
    });
    debug("(getCss) extract from document", document.stylesheets, stylesheets);
  }

  return stylesheets
    .filter((stylesheet) => !stylesheet.isNull())
    .map((stylesheet) => stylesheet.contents.toString())
    .join(os.EOL);
}

/**
 * We need to make sure the html file is available alongside the relative css files
 * as they are required by penthouse/puppeteer to render the html correctly
 * @see https://github.com/pocketjoso/penthouse/issues/280
 *
 * @param {Vinyl} document Vinyl representation of HTML document
 * @returns {Promise<string>} File url to html file for use in penthouse
 */
async function preparePenthouseData(document) {
  const tmp = [];
  const stylesheets = document.stylesheets || [];
  const [stylesheet, ...canBeEmpty] = stylesheets
    .filter((file) => isRelative(file))
    .map((file) => file.replace(/\?.*$/, ""));

  // Make sure we go as deep inside the temp folder as required by relative stylesheet hrefs
  const subfolders = [stylesheet, ...canBeEmpty]
    .reduce((res, href) => {
      const match = /^(\.\.\/)+/.exec(href || "");
      return match && match[0].length > res.length ? match[0] : res;
    }, "./")
    .replaceAll("../", "sub/");
  const dir = path.join(temporaryDirectory(), subfolders);
  const filename = path.basename(temporaryFile({ extension: "html" }));
  const file = path.join(dir, filename);

  const htmlContent = document.contents.toString();
  // Inject all styles to make sure we have everything in place
  // because puppeteer doesn't seem to fetch protocol relative links
  // when served from file://
  const injected = htmlContent.replaceAll(
    /(<head(?:\s[^>]*)?>)/gi,
    `$1<style>${document.css.toString()}</style>`,
  );
  // Write html to temp file
  await outputFileAsync(file, injected);

  tmp.push(file);

  // Write styles to first stylesheet
  if (stylesheet) {
    const filename = path.join(dir, stylesheet);
    tmp.push(filename);
    await outputFileAsync(filename, document.css);
  }

  // Write empty string to rest of the linked stylesheets
  await forEachAsync(canBeEmpty, (dummy) => {
    const filename = path.join(dir, dummy);
    tmp.push(filename);
    outputFileAsync(filename, "");
  });

  return [getFileUri(file), getCleanup(tmp)];
}

/**
 * Get document file object
 * @param {string} filepath Path/Url to html file
 * @param {object} options Critical options
 * @returns {Promise<Vinyl>} Vinyl representation of HTML document
 */
export async function getDocument(filepath, options = {}) {
  const { rebase = {}, base } = options;

  if (!isVinyl(filepath) && !isRemote(filepath) && !fs.existsSync(filepath) && base) {
    filepath = joinPath(base, filepath);
  }

  const document = await vinylize({ filepath }, options);

  document.stylesheets = await getStylesheetHrefs(document, options);
  document.stylesheetsMedia = await getStylesheetsMedia(document, options);
  document.virtualPath = rebase.to || (await getDocumentPath(document, options));

  document.cwd = base || process.cwd();
  if (!base && document.path) {
    document.cwd = document.path.replace(document.virtualPath, "");
  }

  debug("(getDocument) Result: ", {
    path: document.path,
    url: document.url,
    remote: Boolean(document.remote),
    virtualPath: document.virtualPath,
    stylesheets: document.stylesheets,
    cwd: document.cwd,
  });

  document.css = await getCss(document, options);

  const [url, cleanup] = await preparePenthouseData(document);
  document.url = url;
  document.cleanup = cleanup;

  return document;
}

/**
 * Get document file object from raw html source
 * @param {string} html HTML source
 * @param {object} options Critical options
 * @returns {Promise<*>} Vinyl representation of HTML document
 */
export async function getDocumentFromSource(html, options = {}) {
  const { rebase = {}, base } = options;
  const document = await vinylize({ html }, options);

  document.stylesheets = await getStylesheetHrefs(document);
  document.stylesheetsMedia = await getStylesheetsMedia(document);
  document.virtualPath = rebase.to || (await getDocumentPath(document, options));
  document.cwd = base || process.cwd();

  debug("(getDocumentFromSource) Result: ", {
    path: document.path,
    url: document.url,
    remote: Boolean(document.remote),
    virtualPath: document.virtualPath,
    stylesheets: document.stylesheets,
    cwd: document.cwd,
  });

  document.css = await getCss(document, options);

  const [url, cleanup] = await preparePenthouseData(document);
  document.url = url;
  document.cleanup = cleanup;

  return document;
}

addyosmani / critical / 25976187252

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous