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)];
}
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