From 933af2e7381c066f8be958831970d292f68f9db5 Mon Sep 17 00:00:00 2001
From: Alexander Harding <2166114+aeharding@users.noreply.github.com>
Date: Mon, 4 Dec 2023 20:54:10 -0600
Subject: [PATCH] feat: add `includeStyleProperties` option

* the full list of computedStyle properties can be cached
* users can now manually specify which style properties are included

This commit is applied from https://github.com/bubkoo/html-to-image/pull/436
---
 src/copy-css-styles.ts   |  2 +-
 src/copy-pseudo-class.ts |  2 +-
 src/create-context.ts    |  2 ++
 src/get-diff-style.ts    | 27 +++++++++++++++++++--------
 src/options.ts           |  8 ++++++++
 5 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/src/copy-css-styles.ts b/src/copy-css-styles.ts
index feaff1c..407ce9b 100644
--- a/src/copy-css-styles.ts
+++ b/src/copy-css-styles.ts
@@ -13,7 +13,7 @@ export function copyCssStyles<T extends HTMLElement | SVGElement>(
   const clonedStyle = cloned.style
   const computedStyle = ownerWindow!.getComputedStyle(node)
   const defaultStyle = getDefaultStyle(node, null, context)
-  const diffStyle = getDiffStyle(computedStyle, defaultStyle)
+  const diffStyle = getDiffStyle(computedStyle, defaultStyle, context.includeStyleProperties)
 
   // fix
   diffStyle.delete('transition-property')
diff --git a/src/copy-pseudo-class.ts b/src/copy-pseudo-class.ts
index 8c51bd9..98288a9 100644
--- a/src/copy-pseudo-class.ts
+++ b/src/copy-pseudo-class.ts
@@ -47,7 +47,7 @@ export function copyPseudoClass<T extends HTMLElement | SVGElement>(
       `content: '${ content }';`,
     ]
 
-    const diffStyle = getDiffStyle(computedStyle, defaultStyle)
+    const diffStyle = getDiffStyle(computedStyle, defaultStyle, context.includeStyleProperties)
 
     // fix
     diffStyle.delete('content')
diff --git a/src/create-context.ts b/src/create-context.ts
index 81352bf..d7cda29 100644
--- a/src/create-context.ts
+++ b/src/create-context.ts
@@ -49,6 +49,8 @@ export async function createContext<T extends Node>(node: T, options?: Options &
       bypassingCache: false,
       ...options?.fetch,
     },
+    fetchFn: null,
+    includeStyleProperties: null,
     font: {},
     drawImageInterval: 100,
     workerUrl: null,
diff --git a/src/get-diff-style.ts b/src/get-diff-style.ts
index 73c1058..f0a2359 100644
--- a/src/get-diff-style.ts
+++ b/src/get-diff-style.ts
@@ -1,13 +1,29 @@
 export function getDiffStyle(
   style: CSSStyleDeclaration,
   defaultStyle: Map<string, string>,
+  includeStyleProperties?: string[] | null,
 ) {
   const diffStyle = new Map<string, [string, string]>()
   const prefixs: string[] = []
   const prefixTree = new Map<string, Map<string, [string, string]>>()
 
-  for (let len = style.length, i = 0; i < len; i++) {
-    const name = style.item(i)
+  if (includeStyleProperties) {
+    for (const name of includeStyleProperties) {
+      applyTo(name)
+    }
+  } else {
+    for (let len = style.length, i = 0; i < len; i++) {
+      const name = style.item(i)
+      applyTo(name)
+    }
+  }
+
+  for (let len = prefixs.length, i = 0; i < len; i++) {
+    prefixTree.get(prefixs[i])
+      ?.forEach((value, name) => diffStyle.set(name, value))
+  }
+
+  function applyTo(name: string) {
     const value = style.getPropertyValue(name)
     const priority = style.getPropertyPriority(name)
 
@@ -22,7 +38,7 @@ export function getDiffStyle(
       map.set(name, [value, priority])
     }
 
-    if (defaultStyle.get(name) === value && !priority) continue
+    if (defaultStyle.get(name) === value && !priority) return
 
     if (prefix) {
       prefixs.push(prefix)
@@ -31,10 +47,5 @@ export function getDiffStyle(
     }
   }
 
-  for (let len = prefixs.length, i = 0; i < len; i++) {
-    prefixTree.get(prefixs[i])
-      ?.forEach((value, name) => diffStyle.set(name, value))
-  }
-
   return diffStyle
 }
diff --git a/src/options.ts b/src/options.ts
index 8df9e27..9e41670 100644
--- a/src/options.ts
+++ b/src/options.ts
@@ -183,4 +183,12 @@ export interface Options {
    * Triggered after a ForeignObjectSvg is created
    */
   onCreateForeignObjectSvg?: ((svg: SVGSVGElement) => void) | null
+
+  /**
+   * An array of style property names.
+   * Can be used to manually specify which style properties are
+   * included when cloning nodes.
+   * This can be useful for performance-critical scenarios.
+   */
+  includeStyleProperties?: string[] | null
 }