npm - @percy/dom - Versions diffs - 1.32.8-beta.2 → 1.32.8-beta.4 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2) hide show

package/dist/bundle.js +70 -28
package/package.json +2 -2

package/dist/bundle.js CHANGED Viewed

@@ -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
@@ -360,12 +364,7 @@
       // Custom elements with ElementInternals or closed shadow roots also get
       // stamped so the post-clone state-fallback can locate their clones.
       let tagName = (_domElement$tagName = domElement.tagName) === null || _domElement$tagName === void 0 ? void 0 : _domElement$tagName.toLowerCase();
-      // Stylesheet <link>s are stamped so the pseudo-class serializer can locate
-      // the sheet's clone element and anchor its rewritten interactive-state rules
-      // immediately after it — preserving the sheet's original cascade position
-      // instead of appending at the end of <head> (PER-10077).
-      let isStylesheetLink = tagName === 'link' && /(^|\s)stylesheet(\s|$)/i.test(domElement.getAttribute('rel') || '');
-      if (['input', 'textarea', 'select', 'iframe', 'canvas', 'video', 'style', 'dialog'].includes(tagName) || isStylesheetLink || isCustomElement(domElement)) {
+      if (['input', 'textarea', 'select', 'iframe', 'canvas', 'video', 'style', 'dialog'].includes(tagName) || isCustomElement(domElement)) {
         if (!domElement.getAttribute('data-percy-element-id')) {
           domElement.setAttribute('data-percy-element-id', uid());
         }
@@ -433,7 +432,8 @@
         resources,
         cache,
         warnings,
-        ignoreStyleSheetSerializationErrors
+        ignoreStyleSheetSerializationErrors,
+        styleSheetClones
       } = ctx;
       // in-memory CSSOM into their respective DOM nodes.
       let styleSheets = null;
@@ -462,6 +462,7 @@
               style.textContent = Array.from(styleSheet.cssRules).map(cssRule => cssRule.cssText).join('\n');
               cloneOwnerNode.parentNode.insertBefore(style, cloneOwnerNode.nextSibling);
               cloneOwnerNode.remove();
+              styleSheetClones === null || styleSheetClones === void 0 || styleSheetClones.set(styleSheet.ownerNode, style);
             } catch (err) {
               handleErrors(err, 'Error serializing stylesheet: ', cloneOwnerNode, {
                 styleId: styleId
@@ -778,6 +779,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 +1008,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 +1149,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);
@@ -1156,11 +1187,11 @@
         // nosemgrep: javascript.browser.security.insecure-document-method.insecure-document-method
         styleElement.textContent = rewrittenRules.join('\n');
         if (owner === null) {
-          injectAtSheetPosition(ctx.clone, sheet, styleElement, ctx.clone.head || ctx.clone.querySelector('head'));
+          injectAtSheetPosition(ctx, ctx.clone, sheet, styleElement, ctx.clone.head || ctx.clone.querySelector('head'));
         } else {
           const cloneHost = cloneByPercyId.get(owner.getAttribute('data-percy-element-id'));
           if (cloneHost && cloneHost.shadowRoot) {
-            injectAtSheetPosition(cloneHost.shadowRoot, sheet, styleElement, cloneHost.shadowRoot);
+            injectAtSheetPosition(ctx, cloneHost.shadowRoot, sheet, styleElement, cloneHost.shadowRoot);
           }
         }
       }
@@ -1169,13 +1200,15 @@
     // Insert an interactive-states <style> immediately AFTER its source sheet's
     // clone element so the copy keeps the sheet's original source-order rank —
     // later stylesheets still win equal-specificity ties, exactly as on the live
-    // page (PER-10077). The sheet's ownerNode (<style> / <link rel=stylesheet>) is
-    // stamped with a data-percy-element-id, which serialize-cssom preserves on any
-    // node it rebuilds in place. Falls back to appending at the scope's end when
-    // the sheet has no locatable clone anchor.
-    function injectAtSheetPosition(scopeRoot, sheet, styleElement, fallbackTarget) {
-      const anchorId = sheet.ownerNode.getAttribute('data-percy-element-id');
-      const anchor = anchorId ? scopeRoot.querySelector(`[data-percy-element-id="${anchorId}"]`) : null;
+    // page (PER-10077).
+    function injectAtSheetPosition(ctx, scopeRoot, sheet, styleElement, fallbackTarget) {
+      var _ctx$styleSheetClones, _anchor;
+      const ownerNode = sheet.ownerNode;
+      let anchor = ownerNode ? (_ctx$styleSheetClones = ctx.styleSheetClones) === null || _ctx$styleSheetClones === void 0 ? void 0 : _ctx$styleSheetClones.get(ownerNode) : null;
+      if (!((_anchor = anchor) !== null && _anchor !== void 0 && _anchor.parentNode) && ownerNode) {
+        const anchorId = ownerNode.getAttribute('data-percy-element-id');
+        anchor = anchorId ? scopeRoot.querySelector(`[data-percy-element-id="${anchorId}"]`) : null;
+      }
       const anchorParent = anchor ? anchor.parentNode : null;
       if (anchorParent) {
         anchorParent.insertBefore(styleElement, anchor.nextSibling);
@@ -1184,10 +1217,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}]`);
@@ -1384,7 +1418,8 @@
         forceShadowAsLightDOM,
         resources,
         cache,
-        enableJavaScript
+        enableJavaScript,
+        styleSheetClones
       } = ctx;
       // clones shadow DOM and light DOM for a given node
       let cloneNode = (node, parent) => {
@@ -1406,6 +1441,9 @@
           // mark the node before cloning
           markElement(node, disableShadowDOM, forceShadowAsLightDOM);
           let clone = cloneElementWithoutLifecycle(node);
+          if (styleSheetClones && (node.nodeName === 'LINK' || node.nodeName === 'STYLE')) {
+            styleSheetClones.set(node, clone);
+          }
           // Custom-element :state() is captured by the fallback path in
           // serialize-custom-states.js (live el.matches against state names
@@ -1614,8 +1652,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 = {
@@ -1623,6 +1663,7 @@
         warnings: new Set(),
         hints: new Set(),
         cache: new Map(),
+        styleSheetClones: new WeakMap(),
         shadowRootElements: [],
         enableJavaScript,
         disableShadowDOM,
@@ -1632,7 +1673,8 @@
         ignoreIframeSelectors,
         maxIframeDepth,
         iframeDepth,
-        pseudoClassEnabledElements
+        pseudoClassEnabledElements,
+        pseudoClassSerialization
       };
       ctx.dom = dom;

package/package.json CHANGED Viewed

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