@percy/dom 1.32.8-beta.2 → 1.32.8-beta.3

package/dist/bundle.js

@@ -209,7 +209,9 @@
       ignoreIframeSelectors,
       forceShadowAsLightDOM,
       maxIframeDepth,
-      iframeDepth = 0
+      iframeDepth = 0,
+      pseudoClassEnabledElements,
+      pseudoClassSerialization
     }) {
       maxIframeDepth = clampIframeDepth(maxIframeDepth);
       for (let frame of dom.querySelectorAll('iframe')) {
@@ -278,7 +280,9 @@
             forceShadowAsLightDOM,
             ignoreIframeSelectors,
             maxIframeDepth,
-            iframeDepth: iframeDepth + 1
+            iframeDepth: iframeDepth + 1,
+            pseudoClassEnabledElements,
+            enablePseudoClassSerialization: pseudoClassSerialization
           });
 
           // append serialized warnings and resources
@@ -778,6 +782,35 @@
         return re.test(selectorText);
       });
     }
+    function splitSelectorList(selectorText) {
+      const parts = [];
+      let depth = 0;
+      let quote = null;
+      let start = 0;
+      for (let i = 0; i < selectorText.length; i++) {
+        const char = selectorText[i];
+        if (quote) {
+          if (char === '\\') i++;else if (char === quote) quote = null;
+          continue;
+        }
+        if (char === '"' || char === "'") quote = char;else if (char === '(' || char === '[') depth++;else if (char === ')' || char === ']') depth--;else if (char === ',' && depth === 0) {
+          parts.push(selectorText.slice(start, i));
+          start = i + 1;
+        }
+      }
+      parts.push(selectorText.slice(start));
+      return parts;
+    }
+    function rewritePseudoSelectorList(selectorText, pseudoList) {
+      const pseudoParts = [];
+      for (const part of splitSelectorList(selectorText)) {
+        const trimmed = part.trim();
+        if (trimmed && selectorContainsPseudo(trimmed, pseudoList)) {
+          pseudoParts.push(rewritePseudoSelector(trimmed));
+        }
+      }
+      return pseudoParts.length ? pseudoParts.join(', ') : null;
+    }
     function rewritePseudoSelector(selectorText) {
       let out = selectorText;
       for (const [pseudo, re] of PSEUDO_RES) out = out.replace(re, PSEUDO_TO_ATTR[pseudo]);
@@ -978,8 +1011,9 @@
     // the data-attributes are copied through to the clone via cloneNode.
     function markPseudoClassElements(ctx, config) {
       ctx._liveMutations = [];
-      markInteractiveStates(ctx);
       markOpenPopovers(ctx);
+      if (!ctx.pseudoClassSerialization) return;
+      markInteractiveStates(ctx);
       if (config) getElementsToProcess(ctx, config, true);
     }
 
@@ -1118,8 +1152,8 @@
           // interactive pseudo. Skips most rules on most stylesheets without
           // touching the regex bank.
           if (!rule.selectorText.includes(':')) continue;
-          if (!selectorContainsPseudo(rule.selectorText, ALL_INTERACTIVE_PSEUDO)) continue;
-          const rewrittenSelector = rewritePseudoSelector(rule.selectorText);
+          const rewrittenSelector = rewritePseudoSelectorList(rule.selectorText, ALL_INTERACTIVE_PSEUDO);
+          if (!rewrittenSelector) continue;
           const cssText = `${rewrittenSelector} { ${rule.style.cssText} }`;
           const wrapped = rule.wrapper ? `${rule.wrapper} { ${cssText} }` : cssText;
           (rewrittenRules || (rewrittenRules = [])).push(wrapped);
@@ -1184,10 +1218,11 @@
       }
     }
     function serializePseudoClasses(ctx) {
-      // Auto-detect path runs unconditionally so `:focus`/`:focus-within`
-      // rules are rewritten regardless of whether the user configured a
-      // pseudoClassEnabledElements list (and regardless of whether that list
-      // matched anything on this page).
+      if (!ctx.pseudoClassSerialization) return;
+
+      // Auto-detect path rewrites `:focus`/`:focus-within` rules whether or not
+      // a pseudoClassEnabledElements list was configured (and regardless of
+      // whether that list matched anything on this page).
       extractPseudoClassRules(ctx);
       if (!ctx.pseudoClassEnabledElements) return;
       const elements = ctx.dom.querySelectorAll(`[${PSEUDO_ELEMENT_MARKER_ATTR}]`);
@@ -1614,8 +1649,10 @@
         ignoreIframeSelectors = options === null || options === void 0 ? void 0 : options.ignore_iframe_selectors,
         maxIframeDepth = options === null || options === void 0 ? void 0 : options.max_iframe_depth,
         iframeDepth = (options === null || options === void 0 ? void 0 : options.iframe_depth) ?? 0,
-        pseudoClassEnabledElements = options === null || options === void 0 ? void 0 : options.pseudo_class_enabled_elements
+        pseudoClassEnabledElements = options === null || options === void 0 ? void 0 : options.pseudo_class_enabled_elements,
+        enablePseudoClassSerialization = options === null || options === void 0 ? void 0 : options.enable_pseudo_class_serialization
       } = options || {};
+      const pseudoClassSerialization = !!(enablePseudoClassSerialization || pseudoClassEnabledElements);
 
       // keep certain records throughout serialization
       let ctx = {
@@ -1632,7 +1669,8 @@
         ignoreIframeSelectors,
         maxIframeDepth,
         iframeDepth,
-        pseudoClassEnabledElements
+        pseudoClassEnabledElements,
+        pseudoClassSerialization
       };
       ctx.dom = dom;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@percy/dom",
-  "version": "1.32.8-beta.2",
+  "version": "1.32.8-beta.3",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -35,5 +35,5 @@
   "devDependencies": {
     "interactor.js": "^2.0.0-beta.10"
   },
-  "gitHead": "3886c115aa583e2c5af3b16643dd34c379415f5b"
+  "gitHead": "719021a0565d18a6b47d9d494961eaccb6d63009"
 }