clipper: ignore stylesheets that throw cors error

streetwriters · Aug 13, 2024 · f111119 · f111119
1 parent 529e2a4
commit f111119
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 17 deletions.
diff --git a/packages/clipper/src/domtoimage.ts b/packages/clipper/src/domtoimage.ts
@@ -37,7 +37,9 @@ async function getInlinedNode(node: HTMLElement, options: Options) {
 
   const documentStyles = getComputedStyle(document.documentElement);
 
-  const styleCache = stylesheets ? cacheStylesheets(documentStyles) : undefined;
+  const styleCache = stylesheets
+    ? await cacheStylesheets(documentStyles)
+    : undefined;
 
   let clone = await cloneNode(node, {
     styles: options.styles,

diff --git a/packages/clipper/src/styles.ts b/packages/clipper/src/styles.ts
@@ -70,26 +70,15 @@ const SHORTHANDS = [
 
 export async function inlineStylesheets(options?: FetchOptions) {
   for (const sheet of document.styleSheets) {
-    if (skipStyleSheet(sheet)) continue;
-
-    const node = sheet.ownerNode;
-    if (sheet.href && node instanceof HTMLLinkElement) {
-      try {
-        sheet.cssRules.length;
-      } catch (_e) {
-        const styleNode = await downloadStylesheet(node.href, options);
-        if (styleNode) node.replaceWith(styleNode);
-        console.error("Failed to access sheet", node.href, _e);
-      }
-    }
+    if (await skipStyleSheet(sheet, options)) continue;
   }
   await resolveImports(options);
 }
 
 async function resolveImports(options?: FetchOptions) {
   for (const sheet of document.styleSheets) {
     const rulesToDelete = [];
-    if (skipStyleSheet(sheet)) continue;
+    if (await skipStyleSheet(sheet, options)) continue;
 
     for (let i = 0; i < sheet.cssRules.length; ++i) {
       const rule = sheet.cssRules.item(i);
@@ -137,12 +126,12 @@ type PseudoElementStyle = BaseStyle & {
 type CSSStyledElements = Map<StyleableElement, SpecifiedStyle[]>;
 type CSSPseudoElements = Map<StyleableElement, PseudoElementStyle[]>;
 
-export function cacheStylesheets(documentStyles: CSSStyleDeclaration) {
+export async function cacheStylesheets(documentStyles: CSSStyleDeclaration) {
   const styledElements: CSSStyledElements = new Map();
   const styledPseudoElements: CSSPseudoElements = new Map();
 
   for (const sheet of document.styleSheets) {
-    if (skipStyleSheet(sheet)) continue;
+    if (await skipStyleSheet(sheet)) continue;
     let href = sheet.href || undefined;
     if (!href && sheet.ownerNode instanceof HTMLElement)
       href = sheet.ownerNode.getAttribute("href") || undefined;
@@ -339,7 +328,18 @@ function lazyComputedStyle(element: StyleableElement) {
   }) as { style: CSSStyleDeclaration };
 }
 
-function skipStyleSheet(sheet: StyleSheet) {
+async function skipStyleSheet(sheet: CSSStyleSheet, options?: FetchOptions) {
+  try {
+    sheet.cssRules.length;
+  } catch (_e) {
+    const node = sheet.ownerNode;
+    if (sheet.href && node instanceof HTMLLinkElement) {
+      const styleNode = await downloadStylesheet(node.href, options);
+      if (styleNode) node.replaceWith(styleNode);
+    }
+    return true;
+  }
+
   return sheet.media.mediaText
     .split(",")
     .map((t) => t.trim())