@percy/dom 1.30.8 → 1.30.9-alpha-1.0

package/dist/bundle.js

@@ -314,9 +314,21 @@
           /* istanbul ignore next: tested, but coverage is stripped */
           if (clone.constructor.name === 'HTMLDocument' || clone.constructor.name === 'DocumentFragment') {
             // handle document and iframe
-            clone.body.prepend(styleLink);
+            // We are checking if we have multiple stylesheets present for the same clone or clone.body then we add
+            // them in the same order in which we receive them.
+            const lastLink = clone.body.querySelector('link[data-percy-adopted-stylesheets-serialized]:last-of-type');
+            if (lastLink) {
+              lastLink.after(styleLink);
+            } else {
+              clone.body.prepend(styleLink);
+            }
           } else if (clone.constructor.name === 'ShadowRoot') {
-            clone.prepend(styleLink);
+            const lastLink = clone.querySelector('link[data-percy-adopted-stylesheets-serialized]:last-of-type');
+            if (lastLink) {
+              lastLink.after(styleLink);
+            } else {
+              clone.prepend(styleLink);
+            }
           }
         }
       } else {
@@ -486,12 +498,30 @@
      */
 
     const ignoreTags = ['NOSCRIPT'];
+    function cloneCustomElementWithoutAttributeChanged(element) {
+      if (!element.attributeChangedCallback || !element.tagName.includes('-')) {
+        return element.cloneNode(); // Standard clone for non-custom elements
+      }
+      const cloned = document.createElement('data-percy-custom-element-' + element.tagName);
+
+      // Clone attributes without triggering attributeChangedCallback
+      for (const attr of element.attributes) {
+        // handle src separately
+        if (attr.name.toLowerCase() === 'src') {
+          cloned.setAttribute('data-percy-serialized-attribute-src', attr.value);
+        } else {
+          cloned.setAttribute(attr.name, attr.value);
+        }
+      }
+      return cloned;
+    }
     function cloneNodeAndShadow(ctx) {
       let {
         dom,
         disableShadowDOM,
         resources,
-        cache
+        cache,
+        enableJavaScript
       } = ctx;
       // clones shadow DOM and light DOM for a given node
       let cloneNode = (node, parent) => {
@@ -507,7 +537,28 @@
 
           // mark the node before cloning
           markElement(node, disableShadowDOM);
-          let clone = node.cloneNode();
+          let clone = cloneCustomElementWithoutAttributeChanged(node);
+          // let clone = node.cloneNode();
+
+          // Handle <style> tag specifically for media queries
+          if (node.nodeName === 'STYLE' && !enableJavaScript) {
+            var _node$textContent;
+            let cssText = ((_node$textContent = node.textContent) === null || _node$textContent === void 0 ? void 0 : _node$textContent.trim()) || '';
+            if (!cssText && node.sheet) {
+              try {
+                const cssRules = node.sheet.cssRules;
+                if (cssRules && cssRules.length > 0) {
+                  cssText = Array.from(cssRules).map(rule => rule.cssText).join('\n');
+                }
+              } catch (_) {
+                // ignore errors
+              }
+            }
+            if (cssText) {
+              clone.textContent = cssText;
+              clone.setAttribute('data-percy-cssom-serialized', 'true');
+            }
+          }
 
           // We apply any element transformations here to avoid another treeWalk
           applyElementTransformations(clone);
@@ -608,6 +659,7 @@
         shadowRootElements: ctx.shadowRootElements
       });
       // replace serialized data attributes with real attributes
+      html = html.replace(/(<\/?)data-percy-custom-element-/g, '$1');
       html = html.replace(/ data-percy-serialized-attribute-(\w+?)=/ig, ' $1=');
       // include the doctype with the html string
       return doctype(ctx.dom) + html;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@percy/dom",
-  "version": "1.30.8",
+  "version": "1.30.9-alpha-1.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -9,7 +9,7 @@
   },
   "publishConfig": {
     "access": "public",
-    "tag": "latest"
+    "tag": "alpha"
   },
   "main": "dist/bundle.js",
   "browser": "dist/bundle.js",
@@ -35,5 +35,5 @@
   "devDependencies": {
     "interactor.js": "^2.0.0-beta.10"
   },
-  "gitHead": "daa3c96d70488a49671e48427c9b363c68876935"
+  "gitHead": "c9741e74fdbd7d2c152bcdcb619e9b5c1da13be6"
 }