feat: Support pseudo elements with data (#762)

Author: fb55

src/__fixtures__/tests.ts

@@ -411,6 +411,33 @@ export const tests: [
                 {
                     type: SelectorType.PseudoElement,
                     name: "foo",
+                    data: null,
+                },
+            ],
+        ],
+        "pseudo-element",
+    ],
+    [
+        "::foo()",
+        [
+            [
+                {
+                    type: SelectorType.PseudoElement,
+                    name: "foo",
+                    data: "",
+                },
+            ],
+        ],
+        "pseudo-element",
+    ],
+    [
+        "::foo(bar())",
+        [
+            [
+                {
+                    type: SelectorType.PseudoElement,
+                    name: "foo",
+                    data: "bar()",
                 },
             ],
         ],
@@ -485,7 +512,7 @@ export const tests: [
                 {
                     type: SelectorType.Pseudo,
                     name: "contains",
-                    data: "(a((foo\\))))",
+                    data: "(a((foo))))",
                 },
             ],
         ],

src/parse.ts

@@ -175,6 +175,38 @@ function parseSelector(
         }
     }
 
+    function readValueWithParenthesis(): string {
+        selectorIndex += 1;
+        const start = selectorIndex;
+        let counter = 1;
+
+        for (
+            ;
+            counter > 0 && selectorIndex < selector.length;
+            selectorIndex++
+        ) {
+            if (
+                selector.charCodeAt(selectorIndex) ===
+                    CharCode.LeftParenthesis &&
+                !isEscaped(selectorIndex)
+            ) {
+                counter++;
+            } else if (
+                selector.charCodeAt(selectorIndex) ===
+                    CharCode.RightParenthesis &&
+                !isEscaped(selectorIndex)
+            ) {
+                counter--;
+            }
+        }
+
+        if (counter) {
+            throw new Error("Parenthesis not matched");
+        }
+
+        return unescapeCSS(selector.slice(start, selectorIndex - 1));
+    }
+
     function isEscaped(pos: number): boolean {
         let slashCount = 0;
 
@@ -434,6 +466,11 @@ function parseSelector(
                     tokens.push({
                         type: SelectorType.PseudoElement,
                         name: getName(2).toLowerCase(),
+                        data:
+                            selector.charCodeAt(selectorIndex) ===
+                            CharCode.LeftParenthesis
+                                ? readValueWithParenthesis()
+                                : null,
                     });
                     continue;
                 }
@@ -470,35 +507,7 @@ function parseSelector(
 
                         selectorIndex += 1;
                     } else {
-                        selectorIndex += 1;
-                        const start = selectorIndex;
-                        let counter = 1;
-
-                        for (
-                            ;
-                            counter > 0 && selectorIndex < selector.length;
-                            selectorIndex++
-                        ) {
-                            if (
-                                selector.charCodeAt(selectorIndex) ===
-                                    CharCode.LeftParenthesis &&
-                                !isEscaped(selectorIndex)
-                            ) {
-                                counter++;
-                            } else if (
-                                selector.charCodeAt(selectorIndex) ===
-                                    CharCode.RightParenthesis &&
-                                !isEscaped(selectorIndex)
-                            ) {
-                                counter--;
-                            }
-                        }
-
-                        if (counter) {
-                            throw new Error("Parenthesis not matched");
-                        }
-
-                        data = selector.slice(start, selectorIndex - 1);
+                        data = readValueWithParenthesis();
 
                         if (stripQuotesFromPseudos.has(name)) {
                             const quot = data.charCodeAt(0);

src/stringify.ts

@@ -69,20 +69,25 @@ function stringifyToken(
             return getNamespacedName(token);
 
         case SelectorType.PseudoElement:
-            return `::${escapeName(token.name, charsToEscapeInName)}`;
+            return `::${escapeName(token.name, charsToEscapeInName)}${
+                token.data === null
+                    ? ""
+                    : `(${escapeName(token.data, charsToEscapeInPseudoValue)})`
+            }`;
 
         case SelectorType.Pseudo:
-            if (token.data === null)
-                return `:${escapeName(token.name, charsToEscapeInName)}`;
-            if (typeof token.data === "string") {
-                return `:${escapeName(
-                    token.name,
-                    charsToEscapeInName
-                )}(${escapeName(token.data, charsToEscapeInPseudoValue)})`;
-            }
-            return `:${escapeName(token.name, charsToEscapeInName)}(${stringify(
-                token.data
-            )})`;
+            return `:${escapeName(token.name, charsToEscapeInName)}${
+                token.data === null
+                    ? ""
+                    : `(${
+                          typeof token.data === "string"
+                              ? escapeName(
+                                    token.data,
+                                    charsToEscapeInPseudoValue
+                                )
+                              : stringify(token.data)
+                      })`
+            }`;
 
         case SelectorType.Attribute: {
             if (

src/types.ts

@@ -56,6 +56,7 @@ export interface PseudoSelector {
 export interface PseudoElement {
     type: SelectorType.PseudoElement;
     name: string;
+    data: string | null;
 }
 
 export interface TagSelector {