Serialize programmatic CSS style sheets (stylesheets that use CSSOM API)?

Question

You can use document.documentElement.outerHTML in order to serialize a document to a HTML string.

However, if we paste the result into a file and try to render it as HTML, it will not be always be faithful to the original display (ignoring truly dynamic elements like canvas). Why? Any website that uses CSS in JS will have empty style tags that effect the styling of the web-page. These stylesheets are manipulated using the CSSOM API.

I want to serialize web-pages while also including stylesheets that are programatically manipulated. What would be the best way to do this?

Answer 1

My solution:

export function getCSSOMStyles(): string {
  const { styleSheets } = document;
  const CSSOMSheets = Array.from(styleSheets).filter((sheet) => {
    const hasHref = Boolean(sheet.href);
    //@ts-expect-error - too hard to Typescriptify
    const hasStylesInDOM = (sheet.ownerNode?.innerText?.length || 0) > 0;
    return sheet.cssRules && !hasHref! && !hasStylesInDOM;
  });

  const CSSOMStylesText = CSSOMSheets.map((sheet) =>
    Array.from(sheet.cssRules)
      .map((rule) => rule.cssText)
      .join("")
  ).join("");
  return CSSOMStylesText;
}

export const injectCSSOMStyles = (document: Document) => {
  const styles = getCSSOMStyles();
  if (styles.length === 0) return;

  const styleSheet = document.createElement("style");
  // TODO: Why is this deprecated?
  styleSheet.type = "text/css";
  const stylesText = document.createTextNode(getCSSOMStyles());
  styleSheet.appendChild(stylesText);
  document.head.appendChild(styleSheet);
};

export const serializeCSSInJSStyles = injectCSSOMStyles;