fix(export): preserve ::before/::after content in WeChat computed-style export

toWechatHtmlFromDocument only cloned real DOM nodes, dropping CSS-generated
pseudo content (e.g. li::before { content: "✓" }, .tier.featured::before
{ content: "Recommended" }) that the old juice path used to inline. Read
::before/::after via getComputedStyle on each source element and materialize
string-literal content as a real <span data-pseudo="::before|::after"> child
so the exported HTML keeps the badges and bullets WeChat receives.

Author: rick

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

@@ -91,6 +91,62 @@ describe("toWechatHtmlFromDocument", () => {
     );
   });
 
+  it("materializes ::before and ::after content into real DOM nodes", () => {
+    document.body.innerHTML = `
+      <ul>
+        <li class="check">Item one</li>
+      </ul>
+      <p class="tier">Pro plan</p>
+    `;
+
+    const original = window.getComputedStyle.bind(window);
+    const stub = ((el: Element, pseudo?: string | null) => {
+      const base = original(el);
+      if (!pseudo) return base;
+      const overrides: Record<string, string> = {};
+      if (pseudo === "::before" && (el as HTMLElement).matches?.(".check")) {
+        overrides.content = '"✓"';
+        overrides.color = "rgb(255, 0, 0)";
+      } else if (pseudo === "::before" && (el as HTMLElement).matches?.(".tier")) {
+        overrides.content = '"Recommended"';
+        overrides.color = "rgb(255, 255, 255)";
+      } else if (pseudo === "::after" && (el as HTMLElement).matches?.(".tier")) {
+        overrides.content = '"★"';
+      }
+      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 check = body.querySelector("li.check");
+      const tier = body.querySelector("p.tier");
+
+      const checkBefore = check?.firstElementChild;
+      expect(checkBefore?.getAttribute("data-pseudo")).toBe("::before");
+      expect(checkBefore?.textContent).toBe("✓");
+      expect(checkBefore?.getAttribute("style") ?? "").toContain("color: rgb(255, 0, 0)");
+
+      const tierBefore = tier?.firstElementChild;
+      expect(tierBefore?.getAttribute("data-pseudo")).toBe("::before");
+      expect(tierBefore?.textContent).toBe("Recommended");
+
+      const tierAfter = tier?.lastElementChild;
+      expect(tierAfter?.getAttribute("data-pseudo")).toBe("::after");
+      expect(tierAfter?.textContent).toBe("★");
+    } 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

@@ -113,6 +113,7 @@ export async function copyToWechat(fullHtml: string, renderedDoc?: Document | nu
 function inlineComputedTree(source: Element, clone: Element, view: Window): void {
   const styleText = computedStyleText(source, view);
   if (styleText) clone.setAttribute("style", styleText);
+  materializePseudos(source, clone, view);
 
   const sourceEls = Array.from(source.querySelectorAll("*"));
   const cloneEls = Array.from(clone.querySelectorAll("*"));
@@ -121,16 +122,68 @@ function inlineComputedTree(source: Element, clone: Element, view: Window): void
     if (!cloneEl) continue;
     const childStyle = computedStyleText(sourceEls[i], view);
     if (childStyle) cloneEl.setAttribute("style", childStyle);
+    materializePseudos(sourceEls[i], cloneEl, view);
   }
 }
 
-function computedStyleText(el: Element, view: Window, opts?: { skipMargin?: boolean }): string {
+/**
+ * WeChat strips pseudo-elements entirely, and our computed-style walk only sees
+ * real DOM nodes. Read ::before/::after from getComputedStyle and turn each into
+ * a real <span> child so the rendered content (✓, Recommended badge, etc.) survives.
+ */
+function materializePseudos(source: Element, clone: Element, view: Window): void {
+  const before = buildPseudoNode(source, view, "::before");
+  if (before) clone.insertBefore(before, clone.firstChild);
+  const after = buildPseudoNode(source, view, "::after");
+  if (after) clone.appendChild(after);
+}
+
+function buildPseudoNode(source: Element, view: Window, pseudo: "::before" | "::after"): HTMLElement | null {
   let computed: CSSStyleDeclaration;
   try {
-    computed = view.getComputedStyle(el);
+    computed = view.getComputedStyle(source, pseudo);
   } catch {
-    // Cross-origin frames or detached nodes throw here. Skip silently rather than abort the export.
-    return "";
+    return null;
+  }
+  const text = unquoteContent(computed.getPropertyValue("content").trim());
+  if (text === null) return null;
+
+  const span = document.createElement("span");
+  span.setAttribute("data-pseudo", pseudo);
+  if (text) span.textContent = text;
+  const style = computedStyleText(source, view, { pseudoComputed: computed });
+  if (style) span.setAttribute("style", style);
+  return span;
+}
+
+/**
+ * getComputedStyle returns `content` as a CSS token: a string literal (with quotes),
+ * `none`, `normal`, or a function like `attr()` / `counter()` / `url()`. We only
+ * materialize string-literal contents — anything else (including the no-content
+ * sentinels) returns null so the pseudo is skipped.
+ */
+function unquoteContent(value: string): string | null {
+  if (!value || value === "none" || value === "normal") return null;
+  const match = value.match(/^"((?:[^"\\]|\\.)*)"$/) ?? value.match(/^'((?:[^'\\]|\\.)*)'$/);
+  if (!match) return null;
+  return match[1].replace(/\\(.)/g, "$1");
+}
+
+function computedStyleText(
+  el: Element,
+  view: Window,
+  opts?: { skipMargin?: boolean; pseudoComputed?: CSSStyleDeclaration },
+): string {
+  let computed: CSSStyleDeclaration;
+  if (opts?.pseudoComputed) {
+    computed = opts.pseudoComputed;
+  } else {
+    try {
+      computed = view.getComputedStyle(el);
+    } catch {
+      // Cross-origin frames or detached nodes throw here. Skip silently rather than abort the export.
+      return "";
+    }
   }
   const styles: string[] = [];