feat: support css.-webkit-scrollbar (close #19)

src/clone-node.ts

@@ -1,4 +1,4 @@
-import { copyPseudoContent } from './copy-pseudo-content'
+import { copyPseudoClass } from './copy-pseudo-class'
 import { copyInputValue } from './copy-input-value'
 import { copyCssStyles } from './copy-css-styles'
 import {
@@ -103,7 +103,7 @@ export async function cloneNode<T extends Node>(
       .map(val => val.toLowerCase())
       .forEach(val => fontFamilies.add(val))
 
-    copyPseudoContent(node, clone, ownerWindow)
+    copyPseudoClass(node, clone, context)
 
     copyInputValue(node, clone)
 

src/copy-css-styles.ts

@@ -2,7 +2,7 @@ import { getDefaultStyle } from './get-default-style'
 import { IN_CHROME } from './utils'
 import type { Context } from './context'
 
-const ignored = [
+const ignoredStyle = [
   'transitionProperty',
   'all', // svg: all
   'd', // svg: d
@@ -17,20 +17,15 @@ export function copyCssStyles<T extends HTMLElement | SVGElement>(
   context: Context,
 ) {
   const cloneStyle = clone.style
-  const defaultStyle = getDefaultStyle(node.tagName, context)
+  const defaultStyle = getDefaultStyle(node.tagName, null, context)
 
   cloneStyle.transitionProperty = 'none'
 
   for (let i = style.length - 1; i >= 0; i--) {
     const name = style.item(i)
-
-    if (ignored.includes(name)) {
-      continue
-    }
-
+    if (ignoredStyle.includes(name)) continue
     const value = style.getPropertyValue(name)
     const priority = style.getPropertyPriority(name)
-
     // Clean "margin" of root node
     if (
       isRoot
@@ -40,12 +35,10 @@ export function copyCssStyles<T extends HTMLElement | SVGElement>(
       cloneStyle.setProperty(name, '0', priority)
       continue
     }
-
     // fix background-clip: text
     if (name === 'background-clip' && value === 'text') {
       clone.classList.add('______background-clip--text')
     }
-
     // Skip default style
     if (
       defaultStyle[name] === value
@@ -54,9 +47,7 @@ export function copyCssStyles<T extends HTMLElement | SVGElement>(
     ) {
       continue
     }
-
     cloneStyle.setProperty(name, value, priority)
-
     // fix border width
     if (name.startsWith('border') && name.endsWith('style')) {
       const widthName = name.replace('style', 'width')

src/copy-pseudo-class.ts

@@ -0,0 +1,65 @@
+import { getDefaultStyle } from './get-default-style'
+import { uuid } from './utils'
+import type { Context } from './context'
+
+const ignoredStyles = [
+  'content',
+  '-webkit-locale',
+]
+
+const pseudoClasses = [
+  ':before',
+  ':after',
+  ':-webkit-scrollbar',
+  ':-webkit-scrollbar-button',
+  // ':-webkit-scrollbar:horizontal', TODO
+  ':-webkit-scrollbar-thumb',
+  ':-webkit-scrollbar-track',
+  ':-webkit-scrollbar-track-piece',
+  // ':-webkit-scrollbar:vertical', TODO
+  ':-webkit-scrollbar-corner',
+  ':-webkit-resizer',
+]
+
+export function copyPseudoClass<T extends HTMLElement | SVGElement>(
+  node: T,
+  cloned: T,
+  context: Context,
+) {
+  const { ownerDocument, ownerWindow, svgStyleElement } = context
+
+  if (!svgStyleElement || !ownerDocument || !ownerWindow) return
+
+  pseudoClasses.forEach(pseudoClass => {
+    const style = ownerWindow.getComputedStyle(node, pseudoClass)
+    const content = style.getPropertyValue('content')
+    if (!content || content === 'none') return
+    const klasses = [uuid()]
+    const defaultStyle = getDefaultStyle(node.tagName, pseudoClass, context)
+    const cloneStyle = [
+      `content: '${ content.replace(/'|"/g, '') }';`,
+    ]
+    for (let i = style.length - 1; i >= 0; i--) {
+      const name = style.item(i)
+      if (ignoredStyles.includes(name)) continue
+      const value = style.getPropertyValue(name)
+      const priority = style.getPropertyPriority(name)
+      // fix background-clip: text
+      if (name === 'background-clip' && value === 'text') {
+        klasses.push(' ______background-clip--text')
+      }
+      // Skip default style
+      if (defaultStyle[name] === value && !priority) continue
+      cloneStyle.push(`${ name }: ${ value }${ priority ? ' !important' : '' };`)
+    }
+    if (cloneStyle.length === 1) return
+    try {
+      (cloned as any).className += ` ${ klasses.join(' ') }`
+    } catch (err) {
+      return
+    }
+    svgStyleElement.appendChild(
+      ownerDocument.createTextNode(`.${ klasses[0] }:${ pseudoClass } {\n  ${ cloneStyle.join('\n  ') }\n}\n`),
+    )
+  })
+}

src/get-default-style.ts

@@ -1,9 +1,10 @@
 import { uuid } from './utils'
 import type { Context } from './context'
 
-export function getDefaultStyle(tagName: string, context: Context) {
+export function getDefaultStyle(tagName: string, pseudoElement: string | null, context: Context) {
   const { defaultComputedStyles, ownerDocument } = context
-  if (defaultComputedStyles.has(tagName)) return defaultComputedStyles.get(tagName)!
+  const key = `${ tagName }${ pseudoElement ?? '' }`
+  if (defaultComputedStyles.has(key)) return defaultComputedStyles.get(key)!
   let sandbox = context.sandbox
   if (!sandbox) {
     if (ownerDocument) {
@@ -26,7 +27,7 @@ export function getDefaultStyle(tagName: string, context: Context) {
   sandboxDocument.body.appendChild(el)
   // Ensure that there is some content, so properties like margin are applied
   el.textContent = ' '
-  const style = sandboxWindow.getComputedStyle(el)
+  const style = sandboxWindow.getComputedStyle(el, pseudoElement)
   const styles: Record<string, any> = {}
   for (let i = style.length - 1; i >= 0; i--) {
     const name = style.item(i)
@@ -37,6 +38,6 @@ export function getDefaultStyle(tagName: string, context: Context) {
     }
   }
   sandboxDocument.body.removeChild(el)
-  defaultComputedStyles.set(tagName, styles)
+  defaultComputedStyles.set(key, styles)
   return styles
 }

test/fixtures/css.-webkit-scrollbar.html

@@ -0,0 +1,30 @@
+<style>
+  .scrollbar {
+    display: block;
+    width: 10em;
+    overflow: auto;
+    height: 2em;
+  }
+
+  /* Demonstrate a "mostly customized" scrollbar
+   * (won't be visible otherwise if width/height is specified) */
+  .scrollbar::-webkit-scrollbar {
+    width: 5px;
+    height: 8px;
+    background-color: #aaa; /* or add it to the track */
+  }
+
+  /* Add a thumb */
+  .scrollbar::-webkit-scrollbar-thumb {
+    background: #000;
+  }
+</style>
+
+<template>
+  <div id="root" class="scrollbar">
+    Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword<br />
+    And pretty tall<br />
+    thing with weird scrollbars.<br />
+    Who thought scrollbars could be made weird?
+  </div>
+</template>