fix: improve psuedo element printing

Author: DylanPiercey

src/__tests__/index.ts

@@ -290,21 +290,25 @@ test("includes pseudo elements", () => {
     p::selection {
       background: green;
     }
+
+    div ::before {
+      display: block;
+    }
   `;
 
   expect(testHTML(html, styles)).toMatchInlineSnapshot(`
     "<div>
-      <style scoped>
-        ::after {
+      <style>@scope{:scope{
+        &::after {
           color: green;
           content: \\"hello\\"
         }
-        ::selection {background: red}
-      </style>
+        &::selection {background: red}
+      }}</style>
       <span>
-        <style scoped>
-          ::selection {background: blue}
-        </style>
+        <style>@scope{:scope{
+          &::selection {background: blue}
+        }}</style>
         Content
       </span>
     </div>"

src/stringify.ts

@@ -72,10 +72,12 @@ function printPseudoElements(data: VisualData) {
     return "";
   }
 
-  return `<style scoped>\n${Object.keys(pseudoStyles)
+  return `<style>@scope{:scope{\n${Object.keys(pseudoStyles)
     .sort()
-    .map((name) => indent(`${name} {${printProperties(pseudoStyles[name])}}`))
-    .join("\n")}\n</style>`;
+    .map((name) =>
+      indent(`&${name} {${printProperties(pseudoStyles[name])}}`)
+    )
+    .join("\n")}\n}}</style>`;
 }
 
 function printProperties(styles: { [x: string]: string }) {

src/stylesheets.ts

@@ -3,7 +3,7 @@ import splitSelectors from "./split-selector";
 import { SelectorWithStyles } from "./types";
 import { getDefaultStyles } from "./default-styles";
 const pseudoElementRegex =
-  /::?(before|after|first-letter|first-line|selection|backdrop|placeholder|marker|spelling-error|grammar-error)/gi;
+  /([>~|+\s])?\s*::?(before|after|first-letter|first-line|selection|backdrop|placeholder|marker|spelling-error|grammar-error|target(?:-text)?)/gi;
 
 /**
  * Given a document, reads all style sheets returns extracts all CSSRules
@@ -52,8 +52,9 @@ export function getPseudoElementStyles(
     let match: RegExpExecArray | null = null;
     let seenPseudos: string[] | null = null;
 
-    while ((match = pseudoElementRegex.exec(selectorText))) {
-      const name = `::${match[1]}`;
+    while ((match = pseudoElementRegex.exec(baseSelector))) {
+      const name = `::${match[2]}`;
+      const childCombinator = match[1];
 
       if (seenPseudos) {
         if (!seenPseudos.includes(name)) {
@@ -64,8 +65,8 @@ export function getPseudoElementStyles(
       }
 
       baseSelector =
-        selectorText.slice(0, match.index) +
-        selectorText.slice(match.index + match[0].length);
+        baseSelector.slice(0, match.index) + (childCombinator || "");
+      baseSelector.slice(match.index + match[0].length);
     }
 
     if (seenPseudos && el.matches(baseSelector || "*")) {
@@ -79,20 +80,23 @@ export function getPseudoElementStyles(
     return rulesByPseudoElement;
   }, {});
 
-  const foundPseudoElements = Object.keys(stylesByPseudoElement);
+  let appliedPseudoElementStyles: null | {
+    [name: string]: { [property: string]: string };
+  } = null;
 
-  if (!foundPseudoElements.length) {
-    return null;
-  }
-
-  return foundPseudoElements.reduce((styleByPseudoElement, name) => {
-    styleByPseudoElement[name] = getAppliedStylesForElement(
+  for (const name in stylesByPseudoElement) {
+    const styles = getAppliedStylesForElement(
       el,
       name,
       stylesByPseudoElement[name]
-    )!;
-    return styleByPseudoElement;
-  }, {} as { [x: string]: { [x: string]: string } });
+    );
+    if (styles) {
+      appliedPseudoElementStyles ||= {};
+      appliedPseudoElementStyles[name] = styles;
+    }
+  }
+
+  return appliedPseudoElementStyles;
 }
 
 /**