fix(export): keep WeChat pseudo-element styles aligned

Author: TuYv

next/src/lib/export/__tests__/wechat.test.ts

@@ -147,6 +147,46 @@ describe("toWechatHtmlFromDocument", () => {
     }
   });
 
+  it("keeps descendant styles aligned when an ancestor has generated content", () => {
+    document.body.innerHTML = `
+      <div class="card"><span class="label">Hello</span></div>
+    `;
+
+    const original = window.getComputedStyle.bind(window);
+    const stub = ((el: Element, pseudo?: string | null) => {
+      const base = original(el);
+      const overrides: Record<string, string> = {};
+      if (pseudo === "::before" && (el as HTMLElement).matches?.(".card")) {
+        overrides.content = '"Badge"';
+      } else if (!pseudo && (el as HTMLElement).matches?.(".label")) {
+        overrides.color = "rgb(255, 0, 0)";
+      }
+      return new Proxy(base, {
+        get(target, prop) {
+          if (prop === "getPropertyValue") {
+            return (name: string) => overrides[name] ?? target.getPropertyValue(name);
+          }
+          const value = (target as unknown as Record<string | symbol, unknown>)[prop];
+          return typeof value === "function" ? (value as () => unknown).bind(target) : value;
+        },
+      });
+    }) as typeof window.getComputedStyle;
+    window.getComputedStyle = stub;
+
+    try {
+      const body = parseFragment(toWechatHtmlFromDocument(document));
+      const card = body.querySelector(".card");
+      const pseudo = card?.querySelector("[data-pseudo='::before']");
+      const label = card?.querySelector(".label");
+
+      expect(pseudo?.textContent).toBe("Badge");
+      expect(pseudo?.getAttribute("style") ?? "").not.toContain("color: rgb(255, 0, 0)");
+      expect(label?.getAttribute("style") ?? "").toContain("color: rgb(255, 0, 0)");
+    } finally {
+      window.getComputedStyle = original as typeof window.getComputedStyle;
+    }
+  });
+
   it("clamps oversized spacing and drops negative margins", () => {
     document.head.innerHTML = `
       <style>

next/src/lib/export/wechat.ts

@@ -115,14 +115,16 @@ function inlineComputedTree(source: Element, clone: Element, view: Window): void
   if (styleText) clone.setAttribute("style", styleText);
   materializePseudos(source, clone, view);
 
-  const sourceEls = Array.from(source.querySelectorAll("*"));
-  const cloneEls = Array.from(clone.querySelectorAll("*"));
-  for (let i = 0; i < sourceEls.length; i++) {
-    const cloneEl = cloneEls[i];
-    if (!cloneEl) continue;
-    const childStyle = computedStyleText(sourceEls[i], view);
-    if (childStyle) cloneEl.setAttribute("style", childStyle);
-    materializePseudos(sourceEls[i], cloneEl, view);
+  // Pseudo-elements are materialized only in the clone, so global descendant
+  // lists no longer have matching indexes. Recurse through real element
+  // children in lockstep and ignore the generated pseudo spans when matching.
+  const sourceChildren = Array.from(source.children);
+  const cloneChildren = Array.from(clone.children).filter(
+    (child) => !child.hasAttribute("data-pseudo"),
+  );
+  for (let i = 0; i < sourceChildren.length; i++) {
+    const cloneChild = cloneChildren[i];
+    if (cloneChild) inlineComputedTree(sourceChildren[i], cloneChild, view);
   }
 }