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

@percy/dom 1.32.6-beta.2 → 1.32.6

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 +59 -64
package/package.json +3 -3

package/dist/bundle.js CHANGED Viewed

@@ -359,7 +359,13 @@
       // Mark elements that are to be serialized later with a data attribute.
       // Custom elements with ElementInternals or closed shadow roots also get
       // stamped so the post-clone state-fallback can locate their clones.
-      if (['input', 'textarea', 'select', 'iframe', 'canvas', 'video', 'style', 'dialog'].includes((_domElement$tagName = domElement.tagName) === null || _domElement$tagName === void 0 ? void 0 : _domElement$tagName.toLowerCase()) || isCustomElement(domElement)) {
+      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 (!domElement.getAttribute('data-percy-element-id')) {
           domElement.setAttribute('data-percy-element-id', uid());
         }
@@ -752,16 +758,12 @@
     const POPOVER_OPEN_ATTR = 'data-percy-popover-open';
     const FOCUS_ATTR = 'data-percy-focus';
     const FOCUS_WITHIN_ATTR = 'data-percy-focus-within';
-    const CHECKED_ATTR = 'data-percy-checked';
-    const DISABLED_ATTR = 'data-percy-disabled';
     const HOVER_ATTR = 'data-percy-hover';
     const ACTIVE_ATTR = 'data-percy-active';
-    const ALL_INTERACTIVE_PSEUDO = [':focus', ':focus-within', ':checked', ':disabled', ':hover', ':active'];
+    const ALL_INTERACTIVE_PSEUDO = [':focus', ':focus-within', ':hover', ':active'];
     const PSEUDO_TO_ATTR = {
       ':focus': '[data-percy-focus]',
       ':focus-within': '[data-percy-focus-within]',
-      ':checked': '[data-percy-checked]',
-      ':disabled': '[data-percy-disabled]',
       ':hover': '[data-percy-hover]',
       ':active': '[data-percy-active]'
     };
@@ -769,7 +771,7 @@
     // Boundary regex per pseudo-class. Lookahead `(?![-\w])` prevents :focus
     // from matching the start of :focus-within / :focus-visible. Order matters:
     // longer pseudos (:focus-within) are listed first so they win over :focus.
-    const PSEUDO_RES = [[':focus-within', /:focus-within(?![-\w])/g], [':focus', /:focus(?![-\w])/g], [':checked', /:checked(?![-\w])/g], [':disabled', /:disabled(?![-\w])/g], [':hover', /:hover(?![-\w])/g], [':active', /:active(?![-\w])/g]];
+    const PSEUDO_RES = [[':focus-within', /:focus-within(?![-\w])/g], [':focus', /:focus(?![-\w])/g], [':hover', /:hover(?![-\w])/g], [':active', /:active(?![-\w])/g]];
     function selectorContainsPseudo(selectorText, pseudoList) {
       return pseudoList.some(pc => {
         const re = PSEUDO_RES.find(([p]) => p === pc)[1];
@@ -830,30 +832,6 @@
         stampOnce(ctx, focused, FOCUS_ATTR, 'true');
         markFocusWithinAncestors(ctx, focused);
       }
-      // Single walk of ctx.dom + shadow roots collecting BOTH :checked and
-      // :disabled in one pass. Previously two separate queryShadowAll calls
-      // each walked the tree and re-traversed every [data-percy-shadow-host]
-      // — on pages with many shadow hosts this doubled the per-snapshot
-      // walk cost. Also tracks which states were observed so the CSS rule
-      // extractor can skip work for selectors that have no matched elements.
-      ctx._stampedInteractive = ctx._stampedInteractive || new Set();
-      // walkShadowDOM only invokes the visitor with Document/Element/ShadowRoot
-      // scopes — each has querySelectorAll, so no defensive guard is needed here.
-      walkShadowDOM(ctx.dom, scope => {
-        try {
-          for (const el of scope.querySelectorAll(':checked')) {
-            stampOnce(ctx, el, CHECKED_ATTR, 'true');
-            ctx._stampedInteractive.add('checked');
-          }
-        } catch (e) {/* selector unsupported in this scope */}
-        try {
-          for (const el of scope.querySelectorAll(':disabled')) {
-            stampOnce(ctx, el, DISABLED_ATTR, 'true');
-            ctx._stampedInteractive.add('disabled');
-          }
-        } catch (e) {/* selector unsupported in this scope */}
-      });
     }
     // Walk the LIVE document and every shadow root (open, or closed via the CDP
@@ -871,8 +849,8 @@
     }
     // Auto-detect open native popovers page-wide, INCLUDING inside shadow roots.
-    // `:popover-open` is an unambiguous serialize-time state (like :checked /
-    // :disabled), so it is stamped automatically rather than only on
+    // `:popover-open` is an unambiguous serialize-time state, so it is
+    // stamped automatically rather than only on
     // pseudoClassEnabledElements. The renderer's popover-element-helper already
     // re-opens any [popover][data-percy-popover-open] across shadow boundaries;
     // without this stamp a popover open at snapshot time renders hidden via the
@@ -919,8 +897,8 @@
     }
     // Configured elements get :hover/:active stamped unconditionally — opting in
-    // IS the request to capture those forced states. :focus/:checked/:disabled
-    // are already covered by the page-wide markInteractiveStates pass.
+    // IS the request to capture those forced states. :focus is already
+    // covered by the page-wide markInteractiveStates pass.
     function markElementInteractiveStates(ctx, element) {
       stampOnce(ctx, element, HOVER_ATTR, 'true');
       stampOnce(ctx, element, ACTIVE_ATTR, 'true');
@@ -1118,22 +1096,11 @@
     }
     function extractPseudoClassRules(ctx) {
       const sheetEntries = collectStyleSheets(ctx.dom);
-      const rulesByOwner = new Map();
-      // Short-circuit per pseudo: when markInteractiveStates ran first (the
-      // production path via markPseudoClassElements), `ctx._stampedInteractive`
-      // records which interactive states were actually observed. Rules for
-      // `:checked` / `:disabled` selectors that found no live elements can't
-      // match anything in the clone after rewriting, so we drop them from the
-      // filter and avoid the rewrite cost. When the marker is absent (unit
-      // tests that call serializePseudoClasses directly), fall back to the
-      // full pseudo list to preserve prior behavior. `:focus`, `:focus-within`,
-      // `:hover`, `:active` are kept regardless either way.
-      const activePseudos = ctx._stampedInteractive ? ALL_INTERACTIVE_PSEUDO.filter(p => {
-        if (p === ':checked') return ctx._stampedInteractive.has('checked');
-        if (p === ':disabled') return ctx._stampedInteractive.has('disabled');
-        return true;
-      }) : ALL_INTERACTIVE_PSEUDO;
+      // Collect rewritten rules PER SOURCE SHEET (not merged per owner scope) so
+      // each sheet's copies can be anchored back at that sheet's cascade position.
+      // Discovery order is document order, which is also the order we inject in.
+      const perSheet = [];
       for (const {
         sheet,
         owner
@@ -1146,24 +1113,32 @@
           continue;
         }
         if (!rules) continue;
+        let rewrittenRules = null;
         for (const rule of walkCSSRules(rules)) {
           // Cheapest possible filter: a selector with no `:` can't contain any
           // interactive pseudo. Skips most rules on most stylesheets without
           // touching the regex bank.
           if (!rule.selectorText.includes(':')) continue;
-          if (!selectorContainsPseudo(rule.selectorText, activePseudos)) continue;
+          if (!selectorContainsPseudo(rule.selectorText, ALL_INTERACTIVE_PSEUDO)) continue;
           const rewrittenSelector = rewritePseudoSelector(rule.selectorText);
           const cssText = `${rewrittenSelector} { ${rule.style.cssText} }`;
           const wrapped = rule.wrapper ? `${rule.wrapper} { ${cssText} }` : cssText;
-          if (!rulesByOwner.has(owner)) rulesByOwner.set(owner, []);
-          rulesByOwner.get(owner).push(wrapped);
+          (rewrittenRules || (rewrittenRules = [])).push(wrapped);
         }
+        if (rewrittenRules) perSheet.push({
+          sheet,
+          owner,
+          rewrittenRules
+        });
       }
+      if (!perSheet.length) return;
-      // Build a percyId → cloneEl index once for shadow-host injection — only
-      // when there is at least one non-null owner in the collected rules.
+      // Build a percyId → cloneEl index once for shadow-host injection — only when
+      // at least one collected sheet lives inside a shadow root.
       let cloneByPercyId = null;
-      for (const owner of rulesByOwner.keys()) {
+      for (const {
+        owner
+      } of perSheet) {
         if (owner !== null) {
           cloneByPercyId = new Map();
           for (const el of ctx.clone.querySelectorAll('[data-percy-element-id]')) {
@@ -1172,25 +1147,45 @@
           break;
         }
       }
-      for (const [owner, rewrittenRules] of rulesByOwner) {
+      for (const {
+        sheet,
+        owner,
+        rewrittenRules
+      } of perSheet) {
         const styleElement = ctx.clone.createElement ? ctx.clone.createElement('style') : ctx.dom.createElement('style');
         styleElement.setAttribute('data-percy-interactive-states', 'true');
         // nosemgrep: javascript.browser.security.insecure-document-method.insecure-document-method
         styleElement.textContent = rewrittenRules.join('\n');
         if (owner === null) {
-          const head = ctx.clone.head || ctx.clone.querySelector('head');
-          if (head) head.appendChild(styleElement);
+          injectAtSheetPosition(ctx.clone, sheet, styleElement, ctx.clone.head || ctx.clone.querySelector('head'));
         } else {
-          const percyId = owner.getAttribute('data-percy-element-id');
-          const cloneHost = cloneByPercyId.get(percyId);
+          const cloneHost = cloneByPercyId.get(owner.getAttribute('data-percy-element-id'));
           if (cloneHost && cloneHost.shadowRoot) {
-            cloneHost.shadowRoot.appendChild(styleElement);
+            injectAtSheetPosition(cloneHost.shadowRoot, sheet, styleElement, cloneHost.shadowRoot);
           }
         }
       }
     }
+    // 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;
+      const anchorParent = anchor ? anchor.parentNode : null;
+      if (anchorParent) {
+        anchorParent.insertBefore(styleElement, anchor.nextSibling);
+      } else if (fallbackTarget) {
+        fallbackTarget.appendChild(styleElement);
+      }
+    }
     function serializePseudoClasses(ctx) {
-      // Auto-detect path runs unconditionally so `:focus`/`:checked`/`:disabled`
+      // 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).

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@percy/dom",
-  "version": "1.32.6-beta.2",
+  "version": "1.32.6",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -9,7 +9,7 @@
   },
   "publishConfig": {
     "access": "public",
-    "tag": "beta"
+    "tag": "latest"
   },
   "main": "dist/bundle.js",
   "browser": "dist/bundle.js",
@@ -35,5 +35,5 @@
   "devDependencies": {
     "interactor.js": "^2.0.0-beta.10"
   },
-  "gitHead": "11bfa3bf3daebe5ae0b07999054be412e9995a02"
+  "gitHead": "e7dd935acf71273fd045ccceda6d1a37db8e4600"
 }