@social-mail/social-mail-client 1.9.115 → 1.9.116

package/css-for-email.js

@@ -1,83 +1,121 @@
-const { currentScript } = document;
-
-async function flattenStyleSheets() {
-    const styleSheets = document.querySelectorAll(`link[rel="stylesheet"]`);
-    const tasks = [];
-    for(let i=0;i<styleSheets.length;i++) {
-        const styleSheet = styleSheets[i];
-        const href = styleSheet.getAttribute("href");
-        tasks.push(fetch(href)
-            .then((x) => x.text())
-            .then((text) => ({ styleSheet, text }))
-        )
+(function(){
+    const { currentScript } = document;
+
+    let id = Date.now();
+
+    async function flattenStyleSheets() {
+        const styleSheets = document.querySelectorAll(`link[rel="stylesheet"]`);
+        const tasks = [];
+        for(let i=0;i<styleSheets.length;i++) {
+            const styleSheet = styleSheets[i];
+            const href = styleSheet.getAttribute("href");
+            tasks.push(fetch(href)
+                .then((x) => x.text())
+                .then((text) => ({ styleSheet, text }))
+            )
+        }
+
+        const remove = [];
+
+        const results = await Promise.all(tasks);
+        for(const { styleSheet, text} of results) {
+            const style = document.createElement("style");
+            style.textContent = text;
+            document.head.appendChild(style);
+            remove.push(styleSheet);
+            remove.push(style);
+        }
+
+        return () => remove.forEach((x)=>x.remove());
     }
 
-    const results = await Promise.all(tasks);
-    for(const { styleSheet, text} of results) {
-        const style = document.createElement("style");
-        style.textContent = text;
-        document.head.appendChild(style);
-        styleSheet.remove();
+    function css(el) {
+        const cs = window.getComputedStyle(el);
+        var sheets = document.styleSheets, ret = [];
+        el.matches = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector 
+            || el.msMatchesSelector || el.oMatchesSelector;
+        for (var i in sheets) {
+            const sheet = sheets[i];
+            try {
+                var rules = sheet.cssRules;
+                for (var r in rules) {
+                    const rule = rules[r];
+                    if (el.matches(rule.selectorText)) {
+                        const { style } = rule;
+                        const properties = [];
+                        for(let n=0;n<style.length;n++) {
+                            const key = style[n];
+                            if (key === "box-sizing") {
+                                continue;
+                            }
+                            let value = style[key];
+                            if (value) {
+                                // we need to evaluate every var(--)
+                                value = value.replace(/(var\(([^\)]+)\))/gm, (m, p1, p2) => {
+                                    const cssValue = cs.getPropertyValue(p2.split(",")[0]);
+                                    return p1 ? cssValue : m;
+                                });
+                                properties.push({ key, value });
+                            }
+                        }
+                        ret.push(...properties);
+                    }
+                }
+            } catch {
+                
+            }
+        }
+        return ret;
     }
-}
 
-const te = new TextEncoder();
+    async function flattenStyler(rules) {
 
-function encodeTo36(text) {
-    const c = window.btoa(text);
-    return "c_" + c.replaceAll("=", "_");
-}
+        const replaceList = [];
 
-async function flattenStyler() {
+        const all = document.querySelectorAll(":not(head) > *:not(style,head)");
+        for(let i=0;i<all.length;i++) {
+            const e = all[i];
 
-    const replaceList = [];
+            const remove = [];
 
-    const all = document.body.querySelectorAll("*:not(style)");
-    for(let i=0;i<all.length;i++) {
-        const e = all[i];
+            for(const name of e.getAttributeNames()) {
+                if (!name.startsWith("styler-")) {
+                    continue;
+                }
+                remove.push(name);
+            }
 
-        const remove = [];
+            const styles = css(e);
 
-        for(const name of e.getAttributeNames()) {
-            if (!name.startsWith("styler-")) {
-                continue;
-            }
-            const value = e.getAttribute(name);
-            const cssValue = CSS.escape(value);
-            const rule = `[${name}=${cssValue}]`;
-            const className = encodeTo36(rule);
+            const className = "c-" + (id++).toString(36);
             e.classList.add(className);
-            replaceList.push({ rules: [rule, `[${name}="${cssValue}"]`], className: "." + className});
-            remove.push(name);
-        }
 
-        for(const n of remove) {
-            e.removeAttribute(n);
-        }
-    }
+            rules.push(`.${className} {
+                ${styles.map((s) => s.key + ":" + s.value).join(";\n")};
+            }`)
 
-    const styles = document.querySelectorAll("style");
-    for(let i=0;i<styles.length;i++) {
-        const style = styles[i];
-        const { textContent } = style;
-        for (const { rules, className } of replaceList) {
-            let replaced = textContent;
-            for(const rule of rules) {
-                replaced = replaced.replaceAll(rule, className);
-            }
-            if (replaced !== textContent) {
-                style.textContent = replaced;
+            for(const n of remove) {
+                e.removeAttribute(n);
             }
         }
     }
-}
 
-(async function() {
+    (async function() {
 
-    await flattenStyleSheets();
+        const defer = await flattenStyleSheets();
 
-    await flattenStyler();
+        const rules = [];
+        await flattenStyler(rules);
+
+        const style = document.createElement("style");
+        document.head.appendChild(style);
+        style.textContent = `* { box-sizing: border-box; }\n${rules.join("\n")}`;
+
+        if (currentScript) {
+            currentScript.remove();
+        }
 
-    currentScript.remove();
+        defer();
 
-})().catch(console.error);
+    })().catch(console.error);
+})();

package/dist/site-editor-app/SiteEditorApp.pack.js

@@ -60977,7 +60977,7 @@ System.register(["tslib", "@web-atoms/core/dist/core/InjectProperty", "@web-atom
               icon: "fad fa-globe-pointer",
               text: "View Site"
             }), XNode.create("a", {
-              href: Bind.oneWay(() => apiPath(`${this.root.url}${this.cloudFileService.getFilePath(this.root, this.selectedFile)}${this.selectedFile.name}`)),
+              href: Bind.oneWay(() => apiPath(`/social-mail/site/draft-url/${this.root.appFileID}/${this.cloudFileService.getFilePath(this.root, this.selectedFile)}${this.selectedFile.name}`)),
               target: "_blank"
             }, XNode.create(EditIconTextButton, {
               icon: "fad fa-globe-pointer",