fix: get diff style error (closes #24 #25)

src/clone-node.ts

@@ -86,6 +86,9 @@ export async function cloneNode<T extends Node>(
   ) {
     const cloned = await cloneElement(node, context)
 
+    // fix abnormal attribute
+    cloned.removeAttribute('"')
+
     const diffStyle = copyCssStyles(node, cloned, isRoot, context)
 
     if (isRoot) applyCssStyleWithOptions(cloned, context)

src/copy-pseudo-class.ts

@@ -33,14 +33,18 @@ export function copyPseudoClass<T extends HTMLElement | SVGElement>(
 
   function copyBy(pseudoClass: string) {
     const computedStyle = ownerWindow!.getComputedStyle(node, pseudoClass)
-    const content = computedStyle.getPropertyValue('content')
+    let content = computedStyle.getPropertyValue('content')
 
     if (!content || content === 'none') return
 
+    content = content
+      // TODO support css.counter
+      .replace(/(')|(")|(counter\(.+\))/g, '')
+
     const klasses = [uuid()]
     const defaultStyle = getDefaultStyle(node, pseudoClass, context)
     const cloneStyle = [
-      `content: '${ content.replace(/'|"/g, '') }';`,
+      `content: '${ content }';`,
     ]
 
     const diffStyle = getDiffStyle(computedStyle, defaultStyle)

src/get-diff-style.ts

@@ -3,7 +3,7 @@ export function getDiffStyle(
   defaultStyle: Map<string, string>,
 ) {
   const diffStyle = new Map<string, [string, string]>()
-  const diffStylePrefixs: string[] = []
+  const prefixs: string[] = []
   const prefixTree = new Map<string, Map<string, [string, string]>>()
 
   for (let len = style.length, i = 0; i < len; i++) {
@@ -12,7 +12,7 @@ export function getDiffStyle(
     const priority = style.getPropertyPriority(name)
 
     const subIndex = name.lastIndexOf('-')
-    const prefix = subIndex > -1 ? undefined : name.substring(0, subIndex)
+    const prefix = subIndex > -1 ? name.substring(0, subIndex) : undefined
     if (prefix) {
       let map = prefixTree.get(prefix)
       if (!map) {
@@ -25,14 +25,14 @@ export function getDiffStyle(
     if (defaultStyle.get(name) === value && !priority) continue
 
     if (prefix) {
-      diffStylePrefixs.push(prefix)
+      prefixs.push(prefix)
     } else {
       diffStyle.set(name, [value, priority])
     }
   }
 
-  for (let len = diffStylePrefixs.length, i = 0; i < len; i++) {
-    prefixTree.get(diffStylePrefixs[i])
+  for (let len = prefixs.length, i = 0; i < len; i++) {
+    prefixTree.get(prefixs[i])
       ?.forEach((value, name) => diffStyle.set(name, value))
   }
 

test/fixtures/css.counter.html

@@ -0,0 +1,20 @@
+<style>
+  #root {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+  }
+
+  span {
+    content: counter(number);
+  }
+</style>
+
+<template>
+  <div id="root">
+    <span></span>
+    <span></span>
+    <span></span>
+    <span></span>
+  </div>
+</template>

test/fixtures/dom.attribute.html

@@ -0,0 +1,13 @@
+<style>
+  #root {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+  }
+</style>
+
+<template>
+  <div id="root">
+    <div class="abnormal-attribute" " ></div>
+  </div>
+</template>