ee383e9

changelog.md

@@ -1,5 +1,11 @@
 # Changelog for Weavy
 
+## v17.0.4
+
+<time>2023-06-09</time>
+
+* Fixed some issues for css styling of apps in uikit-js via *custom elements*.
+
 ## v17.0.3 
 
 <time>2023-06-02</time>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weavy/dropin-js",
-  "version": "17.0.3",
+  "version": "17.0.4",
   "author": "Weavy",
   "description": "Javascript library for the Weavy drop-in UI",
   "homepage": "https://github.com/weavy/weavy-dropin-js",

src/components/app.js

@@ -6,7 +6,7 @@ import WeavyPanel from "./panel";
 import WeavyRoot from "./dom-root";
 import WeavyOverlays from "./overlays";
 import Weavy from "../weavy";
-import WeavyStyles, { applyStyleSheet } from "./styles";
+import WeavyStyles, { applyStyleSheet, moveImportsToTop } from "./styles";
 import FileBrowser from "./filebrowser";
 import { classNamesConcat } from "../utils/dom";
 
@@ -27,7 +27,7 @@ export default class WeavyApp extends MixinWeavyEvents(HTMLElement) {
   };
 
   static get observedAttributes() {
-    return ["class", "load", "uid"];
+    return ["class", "load", "uid", "css"];
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
@@ -38,6 +38,13 @@ export default class WeavyApp extends MixinWeavyEvents(HTMLElement) {
         this.overlays.className = newValue;
       });
     }
+
+    if (name === "css") {
+      this.css = newValue;
+      this.whenBuilt().then(() => {
+        this.panel.postStyles()
+      })
+    }
   }
   /**
    * The uid of the app, defined in options.
@@ -302,7 +309,9 @@ export default class WeavyApp extends MixinWeavyEvents(HTMLElement) {
     this.#styles = new WeavyStyles(this);
     this.#styles.eventParent = this;
 
-    if (this.options.styles !== undefined) {
+    if (this.hasAttribute("css")) {
+      this.#styles.css = this.getAttribute("css");
+    } else if (this.options.styles !== undefined) {
       this.#styles.css = this.options.css;
     }
 
@@ -362,6 +371,10 @@ export default class WeavyApp extends MixinWeavyEvents(HTMLElement) {
     this.append(this.root.root);
     document.documentElement.append(this.overlayRoot.root);
 
+    if (this.hasAttribute("css")) {
+      this.css = this.getAttribute("css");
+    }
+
     // CONFIGURE
     Weavy.whenReady().then(() => {
       this.#styles.updateStyles();
@@ -494,9 +507,9 @@ export default class WeavyApp extends MixinWeavyEvents(HTMLElement) {
     this.overlays.className = this.className;
 
     this.on("panel-css", (eventCss) => {
-      eventCss.css = [eventCss.css, this.#styles.getAllCSS()]
+      eventCss.css = moveImportsToTop([eventCss.css, this.#styles.getAllCSS()]
         .filter((s) => s)
-        .join("\n");
+        .join("\n"));
     });
 
     this.on("overlay-open", (overlayOptions) => {
@@ -773,18 +786,6 @@ export default class WeavyApp extends MixinWeavyEvents(HTMLElement) {
     await this.panel.postMessage(message, transfer);
   }
 
-  /**
-   * Adds CSS styles to the app using inline css.
-   *
-   * @category methods
-   * @function WeavyApp#addCSS
-   * @param {string} css - CSS string
-   */
-  async addCSS(css) {
-    await this.whenBuilt();
-    this.root.addStyles({ css });
-  }
-
   /**
    * Check if another app or an object is matching this app. It checks for a match of the uid property or matching the url property against the base url.
    *

src/components/styles.js

@@ -10,7 +10,9 @@ const console = new WeavyConsole("Styles")
 export function applyStyleSheet(root, stylesheet) {
   // Prefer modern CSS registration
   if (WeavyStyles.supportsConstructableStyleSheets) {
-    root.adoptedStyleSheets = Array.prototype.concat.call(root.adoptedStyleSheets, [stylesheet]);
+    try {
+      root.adoptedStyleSheets = Array.prototype.concat.call(root.adoptedStyleSheets, [stylesheet]);    
+    } catch(e) { /* No worries */ }
   } else {
     // Fallback CSS registration
     (root === document ? document.head : root).appendChild(stylesheet);
@@ -33,15 +35,27 @@ export function createStyleSheet(css) {
 }
 
 export function updateStyleSheet(styleSheet, css) {
+  css = moveImportsToTop(css)
     // Prefer modern CSS registration
     if (WeavyStyles.supportsConstructableStyleSheets) {
-      styleSheet.replaceSync(css);
+      try {
+        styleSheet.replaceSync(css);
+      } catch(e) { /* No worries */ }
+
     } else {
       // Fallback CSS registration
       styleSheet.replaceChildren(document.createTextNode(css));
     }
 }
 
+export function moveImportsToTop(css) {
+  // Move @imports to the top
+  let foundImports = []
+  css = css.replace(/@import\s+\S*;?/gm, (match) => { foundImports.push(match); return ""; });
+  css = foundImports.join("\n") + css;
+  return css;
+}
+
 /**
  * @class WeavyStyles
 
@@ -124,13 +138,10 @@ export default class WeavyStyles extends WeavyEvents {
   set css(css) {
     this.#css = css
 
-    // Check if we have a new color?
-    this.#updateExternalColor();
-
     this.styleSheets.custom ??= createStyleSheet();
     updateStyleSheet(this.styleSheets.custom, css);
 
-    this.#showAnyErrors(this.#element.id, "Some stylesheets could not be processed");
+    this.updateStyles();
   }
 
    /**
@@ -420,10 +431,7 @@ export default class WeavyStyles extends WeavyEvents {
 
     let combinedCSS = [rootFont, rootColors, this.#externalCss, rootVars, this.#css].filter((s) => s).join("\n");
 
-    // Move @imports to the top
-    let foundImports = []
-    combinedCSS = combinedCSS.replace(/@import\s+\S*;?/gm, (match) => { foundImports.push(match); return ""; });
-    combinedCSS = foundImports.join("\n") + combinedCSS;
+    combinedCSS = moveImportsToTop(combinedCSS);
 
     return combinedCSS;
   }