leanweb 3.0.9 → 3.10.1

package/commands/build.js

@@ -40,10 +40,24 @@ 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') : '';
+
+    // 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);
+  };
+
   const buildHTML = () => {
     try {
       project.components.forEach(cmp => {
@@ -53,7 +67,7 @@ const buildModule = (projectPath) => {
         if (htmlFileExists) {
           const cssFilename = `${utils.dirs.build}/components/${cmp}/${cmpName}.css`;
           const cssFileExists = fs.existsSync(cssFilename);
-          let cssString = `@import "global-styles.css";\n`;
+          let cssString = '';
           if (cssFileExists) {
             cssString += fs.readFileSync(cssFilename, 'utf8');
           }
@@ -82,6 +96,7 @@ const buildModule = (projectPath) => {
   copySrc();
   copyEnv();
   buildJS();
+  buildGlobalStyles();
   buildHTML();
 
   return project.name;

package/commands/dist.js

@@ -60,7 +60,6 @@ const appCSS = fs.readFileSync(`./${utils.dirs.build}/${project.name}.css`, 'utf
 fs.writeFileSync(`./${utils.dirs.dist}/${project.name}.css`, appCSS);
 
 fse.copySync(`./${utils.dirs.build}/favicon.svg`, `./${utils.dirs.dist}/favicon.svg`);
-fse.copySync(`./${utils.dirs.build}/global-styles.css`, `./${utils.dirs.dist}/global-styles.css`);
 project.resources?.forEach(resource => {
   const source = `./${utils.dirs.build}/${resource}`;
   if (fs.existsSync(source)) {

package/package.json

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

package/templates/lib/lw-element.js

@@ -106,8 +106,17 @@ export default class LWElement extends HTMLElement {
     leanweb.builderVersion = ast.builderVersion;
 
     const node = document.createElement('template');
-    node.innerHTML = `<style>${ast.css}</style>${ast.html}`;
+    const componentSheet = new CSSStyleSheet();
+    componentSheet.replaceSync(ast.css);
+    node.innerHTML = ast.html;
     this.attachShadow({ mode: 'open' }).appendChild(node.content);
+    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(() => {