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 bubkoo/html-to-image#436

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')

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')

src/create-context.ts

@@ -56,6 +56,7 @@ export async function createContext<T extends Node>(node: T, options?: Options &
     onCloneNode: null,
     onEmbedNode: null,
     onCreateForeignObjectSvg: null,
+    includeStyleProperties: null,
     autoDestruct: false,
     ...options,
 

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
 }

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
 }