leanweb 3.0.9 → 3.10.0

package/commands/build.js

@@ -44,6 +44,13 @@ const buildModule = (projectPath) => {
     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`;
+    utils.writeIfChanged(`${utils.dirs.build}/global-styles.js`, jsModule);
+  };
+
   const buildHTML = () => {
     try {
       project.components.forEach(cmp => {
@@ -53,7 +60,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 +89,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.0",
   "description": "Builds framework agnostic web components.",
   "bin": {
     "leanweb": "leanweb.js",

package/templates/lib/lw-element.js

@@ -1,5 +1,6 @@
 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: [],
@@ -106,8 +107,11 @@ 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 = [globalStyleSheet, componentSheet];
 
     this._bindMethods();
     setTimeout(() => {