From f2f3f7e3934ecc11e550dc460238be139022e1bd Mon Sep 17 00:00:00 2001
From: 01zulfi <85733202+01zulfi@users.noreply.github.com>
Date: Tue, 10 Jun 2025 15:49:53 +0500
Subject: [PATCH] clipper: (wip) improve clip with styles Signed-off-by:
 01zulfi <85733202+01zulfi@users.noreply.github.com>

---
 packages/clipper/src/domtoimage.ts | 32 ++++++++++++++++--------------
 packages/clipper/src/index.ts      | 14 +++++++++++++
 packages/clipper/src/styles.ts     |  2 +-
 3 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/packages/clipper/src/domtoimage.ts b/packages/clipper/src/domtoimage.ts
index d20dc18c4..6ae09590d 100644
--- a/packages/clipper/src/domtoimage.ts
+++ b/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);
       }
     }
 
diff --git a/packages/clipper/src/index.ts b/packages/clipper/src/index.ts
index 0e72e0d7f..cfd56b319 100644
--- a/packages/clipper/src/index.ts
+++ b/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
diff --git a/packages/clipper/src/styles.ts b/packages/clipper/src/styles.ts
index fa69c55c6..e6fa50980 100644
--- a/packages/clipper/src/styles.ts
+++ b/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));