clipper: (wip) improve clip with styles

Signed-off-by: 01zulfi <85733202+01zulfi@users.noreply.github.com>

packages/clipper/src/domtoimage.ts

@@ -35,22 +35,24 @@ async function getInlinedNode(node: HTMLElement, options: Options) {
 
   if (stylesheets) await inlineStylesheets(options.fetchOptions);
 
-  const documentStyles = getComputedStyle(document.documentElement);
+  // const documentStyles = getComputedStyle(document.documentElement);
 
-  const styleCache = stylesheets
-    ? await cacheStylesheets(documentStyles)
-    : undefined;
+  // const styleCache = stylesheets
+  //   ? await cacheStylesheets(documentStyles)
+  //   : undefined;
 
-  let clone = await cloneNode(node, {
-    styles: options.styles,
-    filter: options.filter,
-    root: true,
-    vector: !options.raster,
-    fetchOptions: options.fetchOptions,
-    getElementStyles: styleCache?.get,
-    getPseudoElementStyles: styleCache?.getPseudo,
-    images: images
-  });
+  // let clone = await cloneNode(node, {
+  //   styles: options.styles,
+  //   filter: options.filter,
+  //   root: true,
+  //   vector: !options.raster,
+  //   fetchOptions: options.fetchOptions,
+  //   getElementStyles: styleCache?.get,
+  //   getPseudoElementStyles: styleCache?.getPseudo,
+  //   images: images
+  // });
+  // let clone = node.cloneNode(true) as HTMLElement;
+  let clone = node.cloneNode(true) as HTMLElement;
 
   if (!clone || clone instanceof Text) return;
 
@@ -213,7 +215,7 @@ function finalize(root: HTMLElement) {
         continue;
 
       if (!VALID_ATTRIBUTES.includes(attribute.name)) {
-        element.removeAttribute(attribute.name);
+        // element.removeAttribute(attribute.name);
       }
     }
 

packages/clipper/src/index.ts

@@ -23,6 +23,7 @@ import { app, h, text } from "hyperapp";
 import { getInlinedNode, toBlob, toJpeg, toPng } from "./domtoimage.js";
 import { Config, InlineOptions } from "./types.js";
 import { FetchOptions } from "./fetch.js";
+import { downloadStylesheet } from "./styles.js";
 
 type ReadabilityEnhanced = Readability<string> & {
   PRESENTATIONAL_ATTRIBUTES: string[];
@@ -476,6 +477,19 @@ async function getPage(
   title.innerText = document.title;
   head.appendChild(title);
 
+  for (const sheet of document.styleSheets) {
+    const node = sheet.ownerNode;
+    if (sheet.href && node instanceof HTMLLinkElement) {
+      const styleNode = await downloadStylesheet(
+        node.href,
+        resolveFetchOptions(config)
+      );
+      if (styleNode) {
+        head.appendChild(styleNode);
+      }
+    }
+  }
+
   return {
     body,
     head

packages/clipper/src/styles.ts

@@ -100,7 +100,7 @@ async function resolveImports(options?: FetchOptions) {
   }
 }
 
-async function downloadStylesheet(href: string, options?: FetchOptions) {
+export async function downloadStylesheet(href: string, options?: FetchOptions) {
   try {
     const style = document.createElement("style");
     const response = await fetch(constructUrl(href, options));