leanweb 3.10.0 → 3.10.1

package/commands/build.js

@@ -40,14 +40,21 @@ const buildModule = (projectPath) => {
       const cmpName = utils.getComponentName(cur);
       let importString = `import './components/${cur}/${cmpName}.js';`;
       return acc + importString + '\n';
-    }, '');
+    }, `import './global-styles.js';\n`);
     utils.writeIfChanged(`${utils.dirs.build}/${project.name}.js`, jsString);
   };
 
   const buildGlobalStyles = () => {
     const globalCssPath = `${utils.dirs.build}/global-styles.css`;
     const globalCss = fs.existsSync(globalCssPath) ? fs.readFileSync(globalCssPath, 'utf8') : '';
-    const jsModule = `const sheet = new CSSStyleSheet();\nsheet.replaceSync(${JSON.stringify(globalCss)});\nexport default sheet;\n`;
+
+    // Extract @import statements and create a JS module that sets up the global styles, including the inline styles and the imports, and write it to global-styles.js
+    const imports = [];
+    const inlineCss = globalCss.replace(/@import\s+(?:url\()?['"]?([^'"\)]+)['"]?\)?[^;]*;/g, (_, url) => {
+      imports.push(url);
+      return '';
+    });
+    const jsModule = `const sheet = new CSSStyleSheet();\nsheet.replaceSync(${JSON.stringify(inlineCss)});\nglobalThis.__lw_globalStyleSheet = sheet;\nglobalThis.__lw_globalStyleImports = ${JSON.stringify(imports)};\n`;
     utils.writeIfChanged(`${utils.dirs.build}/global-styles.js`, jsModule);
   };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "leanweb",
-  "version": "3.10.0",
+  "version": "3.10.1",
   "description": "Builds framework agnostic web components.",
   "bin": {
     "leanweb": "leanweb.js",

package/templates/lib/lw-element.js

@@ -1,6 +1,5 @@
 import * as parser from './lw-expr-parser.js';
 import LWEventBus from './lw-event-bus.js';
-import globalStyleSheet from '../global-styles.js';
 
 globalThis.leanweb = globalThis.leanweb ?? {
   componentsListeningOnUrlChanges: [],
@@ -111,7 +110,13 @@ export default class LWElement extends HTMLElement {
     componentSheet.replaceSync(ast.css);
     node.innerHTML = ast.html;
     this.attachShadow({ mode: 'open' }).appendChild(node.content);
-    this.shadowRoot.adoptedStyleSheets = [globalStyleSheet, componentSheet];
+    this.shadowRoot.adoptedStyleSheets = [globalThis.__lw_globalStyleSheet, componentSheet];
+    globalThis.__lw_globalStyleImports?.forEach(url => {
+      const link = document.createElement('link');
+      link.rel = 'stylesheet';
+      link.href = url;
+      this.shadowRoot.appendChild(link);
+    });
 
     this._bindMethods();
     setTimeout(() => {