@justeattakeaway/pie-webc-core 0.3.0 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.4.0
+
+### Minor Changes
+
+- [Added] - New function to fix CSS loading in Safari Percy tests ([#534](https://github.com/justeattakeaway/pie/pull/534)) by [@siggerzz](https://github.com/siggerzz)
+
 ## 0.3.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-webc-core",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "PIE design system base classes, mixins and utilities for web components",
   "type": "module",
   "main": "index.ts",

package/src/test-helpers/index.ts

@@ -2,3 +2,4 @@ export * from './get-all-prop-combos';
 export * from './defs';
 export * from './rendering';
 export * from './components';
+export * from './percy-lit-options';

package/src/test-helpers/percy-lit-options.ts

@@ -0,0 +1,37 @@
+///*
+///* This code snippet was provided by Percy as a way to get our Lit components working correctly when running against the Safari browser.
+///* Safari blocks requests coming from localhost, resulting in our CSS not loading when requested.
+///* This function is passed to Percy and executed against the serialised DOM to rewrite all 'localhost' urls to 'render.percy.local'.
+///* This is a temporary workaround, and a long-term solution will be implemented by Percy at a later date.
+///*
+const percyOptions = {
+    domTransformation: (documentElement: any) => {
+        function updateLinks(root : any) {
+        root.querySelectorAll('[data-percy-adopted-stylesheets-serialized]').forEach((link : any) => {
+            console.log(link);
+            let href = link.getAttribute('data-percy-serialized-attribute-href');
+            href = href.replace(/localhost[:\d+]*/, 'render.percy.local');
+            link.setAttribute('data-percy-serialized-attribute-href', href);
+        });
+
+        root.querySelectorAll('[data-percy-shadow-host]')
+            .forEach((shadowHost : any) => {
+                console.log(shadowHost);
+                if (shadowHost?.shadowRoot)
+                updateLinks(shadowHost.shadowRoot);
+            }
+        );
+        }
+        updateLinks(documentElement);
+    }
+}
+
+const getLitPercyOptions = () => {
+    const options = {
+        domTransformation: percyOptions.domTransformation.toString()
+    }
+
+    return options;
+}
+
+export { getLitPercyOptions }