@teipublisher/pb-components 1.43.0 → 1.43.1

package/src/theming.js

@@ -8,14 +8,29 @@ import { waitOnce } from "./pb-mixin.js";
 const themeMap = new Map();
 
 /**
- * Load a CSS stylesheet from the given URL and return
+ * Load one or more CSS stylesheet from the given URL and return
  * a CSSStyleSheet. The returned stylesheet can be assigned
  * to `adoptedStyleSheets`.
  * 
- * @param {string} url absolute URL
+ * @param {string[]} urls absolute URL
  * @returns {Promise<CSSStyleSheet|null>} constructed CSSStyleSheet or null
  */
-export function loadStylesheet(url) {
+export async function loadStylesheets(urls) {
+    const output = [];
+    for(let url of urls) {
+        const css = await loadResource(url);
+        if (css) {
+            output.push(css);
+        }
+    }
+    if (output.length > 0) {
+        const sheet = new CSSStyleSheet();
+        return sheet.replace(output.join(''));
+    }
+    return null;
+}
+
+function loadResource(url) {
     return fetch(url)
         .then(response => {
             if (response.ok) {
@@ -25,11 +40,7 @@ export function loadStylesheet(url) {
             return null;
         })
         .then(text => {
-            if (text) {
-                const stylesheet = new CSSStyleSheet();
-                return stylesheet.replace(text);
-            }
-            return null;
+            return text;
         })
         .catch(error => {
             console.error('<theming> Error loading stylesheet %s: %o', url, error);
@@ -62,21 +73,45 @@ export function importStyles(elem) {
     const prefixRegex = new RegExp(`^(${selectors})\\b`);
     let adoptedSheet = null;
     const rules = theme.cssRules;
+    const newCSS = copyStyles(rules, prefixRegex, []);
+    if (newCSS.length > 0) {
+        adoptedSheet = new CSSStyleSheet();
+        adoptedSheet.replaceSync(newCSS.join(''));
+    }
+    console.log('<theming> caching stylesheet for %s', selectors);
+    themeMap.set(selectors, adoptedSheet);
+    return adoptedSheet;
+}
+
+/**
+ * Recursively copy matching styles from the theme CSS
+ * to create a new CSS stylesheet having all styles required
+ * by the component.
+ * 
+ * @param {CSSRule[]} rules 
+ * @param {RegExp} prefixRegex 
+ * @param {string[]} output 
+ * @returns {string[]}
+ */
+function copyStyles(rules, prefixRegex, output) {
     for (let i = 0; i < rules.length; i++) {
         const rule = rules[i];
         if (rule instanceof CSSStyleRule) {
             if (prefixRegex.test(rule.selectorText)) {
-                const selector = rule.cssText.replace(prefixRegex, `:host($1) `);
-                if (!adoptedSheet) {
-                    adoptedSheet = new CSSStyleSheet();
-                }
-                adoptedSheet.insertRule(selector);
+                const css = rule.cssText.replace(prefixRegex, `:host($1) `);
+                output.push(css);
             }
+        } else if (rule instanceof CSSMediaRule) {
+            output.push(`\n@media ${rule.conditionText} {\n`);
+            copyStyles(rule.cssRules, prefixRegex, output);
+            output.push('\n}\n');
+        } else if (rule instanceof CSSFontFaceRule) {
+            // not allowed in constructed stylesheets
+        } else {
+            output.push(rule.cssText);
         }
     }
-    console.log('<theming> caching stylesheet for %s', selectors);
-    themeMap.set(selectors, adoptedSheet);
-    return adoptedSheet;
+    return output;
 }
 
 /**