leanweb 1.1.6 → 1.1.9

package/README.md

@@ -488,21 +488,6 @@ Importing a JSON file:
 import someJSON from "./some.json";
 ```
 
-Importing CSS/SCSS:
-
-```javascript
-import agate from "/node_modules/highlight.js/scss/agate.scss";
-
-// customElements.define('demo-root',
-//  class extends LWElement {  // LWElement extends HTMLElement
-//    constructor() {
-//      super(ast);
-super.applyStyles(agate);
-//    }
-//  }
-//);
-```
-
 ## Component Communication
 
 The following project demonstrates how Leanweb helps web components to talk to
@@ -674,11 +659,6 @@ Called when the componnet `lw-if` is evaluated `false`.
 If `urlHashChanged()` is defined as a function, it will be called whenever the
 urlHash changes. This could be useful to update the DOM in component routing.
 
-#### applyStyles(...styles)
-
-`applyStyles` will apply the styles that is imported from a css or scss into
-the web component DOM.
-
 ### LWEventBus
 
 `LWElement` comes with a global instance of `LWEventBus` that helps web

package/commands/build.js

@@ -81,10 +81,10 @@ const require = createRequire(import.meta.url);
                const scssFileExists = fs.existsSync(scssFilename);
                let cssString = '';
                if (scssFileExists) {
-                  let scssString = `@use "${buildDir}/global-styles.scss";\n`;
+                  let scssString = `@use "global-styles.scss";\n`;
                   scssString += fs.readFileSync(scssFilename, 'utf8');
                   scssString += '\n[lw-false],[lw-for]{display:none !important;}\n';
-                  cssString = utils.buildCSS(scssString, `${buildDir}/components/${cmp}`);
+                  cssString = utils.buildCSS(scssString, buildDir, `${buildDir}/components/${cmp}`);
                }
                const styleString = cssString || '';
                const htmlString = fs.readFileSync(htmlFilename, 'utf8');

package/commands/utils.js

@@ -28,10 +28,10 @@ export const copySymbolLinkFilter = (src, dest) => {
 
 export const exec = command => execSync(command, { encoding: 'utf8', stdio: 'inherit' });
 
-export const buildCSS = (scssString, currentPaths) => {
+export const buildCSS = (scssString, ...currentPaths) => {
    if (scssString.trim()) {
-      const includePaths = [currentPaths, path.resolve(process.cwd(), dirs.build), path.resolve(process.cwd(), 'node_modules')];
-      const cssResult = sass.renderSync({ data: scssString, includePaths });
+      const loadPaths = [...currentPaths, path.resolve(process.cwd(), dirs.build), path.resolve(process.cwd(), 'node_modules')];
+      const cssResult = sass.compileString(scssString, { loadPaths });
       return cssResult.css.toString().trim();
    }
    return '';

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "leanweb",
-   "version": "1.1.6",
+   "version": "1.1.9",
    "description": "Builds framework agnostic web components.",
    "bin": {
       "leanweb": "leanweb.js",
@@ -20,25 +20,25 @@
    "author": "Qian Chen",
    "license": "MIT",
    "dependencies": {
-      "@babel/core": "^7.17.0",
-      "@babel/parser": "^7.17.0",
+      "@babel/core": "^7.17.8",
+      "@babel/parser": "^7.17.8",
       "@babel/plugin-transform-runtime": "^7.17.0",
       "@babel/preset-env": "^7.16.11",
-      "babel-loader": "^8.2.3",
-      "clean-css": "^5.2.4",
-      "css-loader": "^6.6.0",
-      "fs-extra": "^10.0.0",
+      "babel-loader": "^8.2.4",
+      "clean-css": "^5.3.0",
+      "css-loader": "^6.7.1",
+      "fs-extra": "^10.0.1",
       "globby": "^13.1.1",
       "html-minifier": "^4.0.0",
-      "isomorphic-git": "^1.11.2",
+      "isomorphic-git": "^1.17.0",
       "json5-loader": "^4.0.1",
       "node-watch": "^0.7.3",
       "parse5": "^6.0.1",
       "raw-loader": "^4.0.2",
-      "sass": "^1.49.7",
-      "sass-loader": "^12.4.0",
+      "sass": "^1.49.11",
+      "sass-loader": "^12.6.0",
       "semver": "^7.3.5",
-      "webpack": "^5.68.0",
-      "webpack-dev-server": "^4.7.4"
+      "webpack": "^5.71.0",
+      "webpack-dev-server": "^4.8.0"
    }
 }