@rws-framework/client 2.6.4 → 2.7.0

package/package.json

@@ -1,100 +1,100 @@
 {
     "name": "@rws-framework/client",
     "private": false,
-    "version": "2.6.4",
+    "version": "2.7.0",
     "main": "src/index.ts",
     "scripts": {
-      "docs": "typedoc --tsconfig ./tsconfig.json"
+        "docs": "typedoc --tsconfig ./tsconfig.json"
     },
     "bin": {
-      "rws-client": "./console.js"
+        "rws-client": "./console.js"
     },
     "repository": {
-      "type": "git",
-      "url": "git+https://github.com/papablack/rws-client.git"
+        "type": "git",
+        "url": "git+https://github.com/papablack/rws-client.git"
     },
     "keywords": [
-      "frontend",
-      "rws",
-      "client",
-      "typescript"
+        "frontend",
+        "rws",
+        "client",
+        "typescript"
     ],
     "author": "papablack",
     "license": "ISC",
     "bugs": {
-      "url": "https://github.com/papablack/rws-client/issues"
+        "url": "https://github.com/papablack/rws-client/issues"
     },
     "homepage": "https://github.com/papablack/rws-client#readme",
     "dependencies": {
-      "@microsoft/fast-element": "^1.12.0",
-      "@microsoft/fast-foundation": "^2.46.2",
-      "@rws-framework/console": "^0.3.5",
-      "@types/moment": "^2.13.0",
-      "dragula": "^3.7.3",
-      "he": "^1.2.0",
-      "json5": "^2.2.3",
-      "lodash": "^4.17.21",
-      "moment": "^2.29.4",
-      "partial-json-parser": "^1.0.0",
-      "reflect-metadata": "^0.1.13",
-      "resolve-url-loader": "^5.0.0",
-      "sanitize-html": "^2.12.1",
-      "sass": "^1.69.7",
-      "scss-loading-animations": "^1.0.1",
-      "socket.io-client": "^4.7.2",      
-      "ts-loader": "^9.4.4",
-      "tsc-watch": "^6.0.4",
-      "tslib": "^2.6.2",
-      "upload": "^1.3.2",
-      "url-router": "^13.0.0",
-      "uuid": "^9.0.1",
-      "v4": "^0.0.1"
+        "@microsoft/fast-element": "^1.12.0",
+        "@microsoft/fast-foundation": "^2.46.2",
+        "@rws-framework/console": "^0.3.5",
+        "@types/moment": "^2.13.0",
+        "dragula": "^3.7.3",
+        "he": "^1.2.0",
+        "json5": "^2.2.3",
+        "lodash": "^4.17.21",
+        "moment": "^2.29.4",
+        "partial-json-parser": "^1.0.0",
+        "reflect-metadata": "^0.1.13",
+        "resolve-url-loader": "^5.0.0",
+        "sanitize-html": "^2.12.1",
+        "sass": "^1.69.7",
+        "scss-loading-animations": "^1.0.1",
+        "socket.io-client": "^4.7.2",
+        "ts-loader": "^9.4.4",
+        "tsc-watch": "^6.0.4",
+        "tslib": "^2.6.2",
+        "upload": "^1.3.2",
+        "url-router": "^13.0.0",
+        "uuid": "^9.0.1",
+        "v4": "^0.0.1"
     },
     "devDependencies": {
-      "@types/dragula": "^3.7.4",
-      "@types/eslint": "^6.0.0",
-      "@types/express-fileupload": "^1.4.4",
-      "@types/glob": "^8.1.0",
-      "@types/he": "^1.2.3",
-      "@types/sanitize-html": "^2.11.0",
-      "@types/uuid": "^9.0.7",
-      "@typescript-eslint/parser": "^5.0.0",
-      "clean-webpack-plugin": "^4.0.0",
-      "css-loader": "^6.8.1",
-      "css-minimizer-webpack-plugin": "^5.0.1",
-      "eslint": "^6.0.0",
-      "file-loader": "^6.2.0",
-      "html-webpack-plugin": "^5.5.3",
-      "loader-utils": "^3.2.1",
-      "mini-css-extract-plugin": "^2.7.6",
-      "minimatch": "^9.0.4",
-      "node-sass": "^9.0.0",
-      "sass-loader": "^13.3.2",
-      "source-map": "^0.7.4",
-      "style-loader": "^3.3.3",
-      "terser-webpack-plugin": "^5.3.9",
-      "ts-loader": "^9.4.4",
-      "ts-node": "^10.9.1",
-      "tsconfig-paths": "^4.2.0",
-      "tsconfig-paths-webpack-plugin": "^4.1.0",
-      "typedoc": "^0.25.4",
-      "typedoc-plugin-mermaid": "^1.10.0",
-      "typedoc-plugin-not-exported": "^0.1.6",
-      "typedoc-plugin-rename-defaults": "^0.7.0",
-      "typedoc-theme-hierarchy": "^4.1.2",
-      "typescript": "^5.1.6",
-      "url-loader": "^4.1.1",
-      "webpack": "^5.75.0",
-      "webpack-bundle-analyzer": "^4.10.1",
-      "webpack-cli": "^5.1.4",
-      "webpack-dev-server": "^4.15.1",
-      "webpack-node-externals": "^3.0.0"
+        "@types/dragula": "^3.7.4",
+        "@types/eslint": "^6.0.0",
+        "@types/express-fileupload": "^1.4.4",
+        "@types/glob": "^8.1.0",
+        "@types/he": "^1.2.3",
+        "@types/sanitize-html": "^2.11.0",
+        "@types/uuid": "^9.0.7",
+        "@typescript-eslint/parser": "^5.0.0",        
+        "clean-webpack-plugin": "^4.0.0",
+        "css-loader": "^6.8.1",
+        "css-minimizer-webpack-plugin": "^5.0.1",
+        "eslint": "^6.0.0",
+        "file-loader": "^6.2.0",
+        "html-webpack-plugin": "^5.5.3",
+        "loader-utils": "^3.2.1",
+        "mini-css-extract-plugin": "^2.7.6",
+        "minimatch": "^9.0.4",
+        "node-sass": "^9.0.0",
+        "sass-loader": "^13.3.2",
+        "source-map": "^0.7.4",
+        "style-loader": "^3.3.3",
+        "terser-webpack-plugin": "^5.3.9",
+        "ts-loader": "^9.4.4",
+        "ts-node": "^10.9.1",
+        "tsconfig-paths": "^4.2.0",
+        "tsconfig-paths-webpack-plugin": "^4.1.0",
+        "typedoc": "^0.25.4",
+        "typedoc-plugin-mermaid": "^1.10.0",
+        "typedoc-plugin-not-exported": "^0.1.6",
+        "typedoc-plugin-rename-defaults": "^0.7.0",
+        "typedoc-theme-hierarchy": "^4.1.2",
+        "typescript": "^5.1.6",
+        "url-loader": "^4.1.1",
+        "base64-font-laoder": "",
+        "webpack": "^5.75.0",
+        "webpack-bundle-analyzer": "^4.10.1",
+        "webpack-cli": "^5.1.4",
+        "webpack-dev-server": "^4.15.1",
+        "webpack-node-externals": "^3.0.0"
     },
     "resolutions": {
-      "lodash": "^4.17.21"
+        "lodash": "^4.17.21"
     },
     "overrides": {
-      "lodash": "^4.17.21"
+        "lodash": "^4.17.21"
     }
-  }
-  
+}

package/rws.webpack.config.js

@@ -220,7 +220,7 @@ const RWSWebpackWrapper = (config) => {
     throw new Error('RWS Webpack build failed.');
   }
 
-  const cfgExport = {
+  const cfgExport = {    
     entry: {
       client: config.entry,
       ...automatedEntries
@@ -253,7 +253,7 @@ const RWSWebpackWrapper = (config) => {
           use: [
             'css-loader',            
           ],
-        },
+        },        
         {
           test: /\.scss$/,
           use: [            

package/src/components/loader/styles/layout.scss

@@ -1,5 +1,3 @@
-@import "../../../styles/includes.scss";
-
 //loader
 
 $loader-color: var(--primary-color, #eb7b13);

package/src/components/router/component.ts

@@ -55,9 +55,11 @@ export class RouterComponent extends RWSViewComponent {
             component: childComponent
         });
         
-        const newComponent = document.createElement((childComponent as any).definition.name);        
-        newComponent.routeParams = routeParams;
-
+        const newComponent = document.createElement((childComponent as any).definition.name);  
+        if(Object.keys(routeParams).length){
+            newComponent.routeParams = routeParams;
+        }              
+        
         if(this.currentComponent){
             this.getShadowRoot().removeChild(this.currentComponent);
             

package/src/components/uploader/styles/layout.scss

@@ -1,6 +1,4 @@
-@import "../../../styles/includes.scss";
-
-
+@import "@rws-mixins";
 
 .upload_area {    
     padding: 25px;

package/src/styles/includes.scss

@@ -1,16 +1,16 @@
 $mdWidth: 1120px;
 
 @function px-to-em($pixels, $base-font-size: 16) {
-    @return #{calc($pixels / $base-font-size)}em;
-  }
-  
+  @return #{calc($pixels / $base-font-size)}em;
+}
+
 // Mixin for the grid container
 @mixin grid-container {
-    display: flex;
-    flex-wrap: wrap;
-    // gap: px-to-em(15);
-    // margin-right: -#{px-to-em(15)}; // Adjust as needed
-    // margin-left: -#{px-to-em(15)}; // Adjust as needed
+  display: flex;
+  flex-wrap: wrap;
+  // gap: px-to-em(15);
+  // margin-right: -#{px-to-em(15)}; // Adjust as needed
+  // margin-left: -#{px-to-em(15)}; // Adjust as needed
 }
 
 // Mixin for grid columns
@@ -23,80 +23,77 @@ $mdWidth: 1120px;
 }
 
 @mixin grid-column($columns: 12, $mdColumns: 12) {
-    flex: 0 0 calc(100% / 12 * $columns);
-    max-width: calc(100% / 12 * $columns);
-    // padding-right: #{px-to-em(15)}; // Adjust as needed
-    // padding-left: #{px-to-em(15)}; // Adjust as needed
-
-    @media screen and (max-width: $mdWidth) {
-      flex: 0 0 calc(100% / 12 * $mdColumns);
-      max-width: calc(100% / 12 * $mdColumns);
-    }
+  flex: 0 0 calc(100% / 12 * $columns);
+  max-width: calc(100% / 12 * $columns);
+  // padding-right: #{px-to-em(15)}; // Adjust as needed
+  // padding-left: #{px-to-em(15)}; // Adjust as needed
+
+  @media screen and (max-width: $mdWidth) {
+    flex: 0 0 calc(100% / 12 * $mdColumns);
+    max-width: calc(100% / 12 * $mdColumns);
+  }
 }
 
 @mixin grid-flex-self-align($alignment) {
-    align-self: $alignment;
+  align-self: $alignment;
 }
 
 @mixin grid-flex-align-items($horizontal, $vertical: top) {
-    justify-content: $horizontal;
-    align-items: $vertical;
+  justify-content: $horizontal;
+  align-items: $vertical;
 }
 
 @mixin auto-left() {
-    margin-left: auto;
+  margin-left: auto;
 }
 
 @mixin auto-right() {
-    margin-right: auto;
+  margin-right: auto;
 }
 
 @mixin center-container() {
-    margin-left: auto;
-    margin-right: auto;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 @mixin customScrollbars($width: 10px, $trackColor: #f1f1f1, $thumbColor: #888) {
-    /* WebKit (Safari/Chrome) */
-    &::-webkit-scrollbar {
-      width: $width;
-    }
-  
-    &::-webkit-scrollbar-track {
-      background: $trackColor;
-    }
-  
-    &::-webkit-scrollbar-thumb {
-      background: $thumbColor;
-    }
-  
-    /* Firefox */
-    &::-moz-scrollbar {
-      width: $width;
-    }
-  
-    &::-moz-scrollbar-track {
-      background: $trackColor;
-    }
-  
-    &::-moz-scrollbar-thumb {
-      background: $thumbColor;
-    }
-  
-    /* IE/Edge */
-    &::-ms-scrollbar {
-      width: $width;
-    }
-  
-    &::-ms-scrollbar-track {
-      background: $trackColor;
-    }
-  
-    &::-ms-scrollbar-thumb {
-      background: $thumbColor;
-    }
+
+  /* WebKit (Safari/Chrome) */
+  &::-webkit-scrollbar {
+    width: $width;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: $trackColor;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: $thumbColor;
+  }
+
+  /* Firefox */
+  &::-moz-scrollbar {
+    width: $width;
+  }
+
+  &::-moz-scrollbar-track {
+    background: $trackColor;
+  }
+
+  &::-moz-scrollbar-thumb {
+    background: $thumbColor;
+  }
+
+  /* IE/Edge */
+  &::-ms-scrollbar {
+    width: $width;
   }
 
-* {
-	box-sizing: border-box;
+  &::-ms-scrollbar-track {
+    background: $trackColor;
+  }
+
+  &::-ms-scrollbar-thumb {
+    background: $thumbColor;
+  }
 }

package/webpack/loaders/rws_fast_ts_loader.js

@@ -4,13 +4,29 @@ const fs = require('fs');
 const ts = require('typescript');
 const tools = require('../../_tools');
 
-
 const _defaultRWSLoaderOptions = {
     templatePath: 'template.html',
     stylesPath: 'styles.scss',
     fastOptions: {  shadowOptions: { mode: 'open' }  }
 }
 
+const ERROR_HANDLER_CODE = (htmlContent) => {
+    return `
+    async function handleError(error: Error | any) {      
+      const errorMessage = \`RWS HTML Error:\n\${error.stack}\`;
+      console.error('RWS HTML error', errorMessage);      
+      return T.html\`<div class="rws-error"><h1>RWS HTML template error</h1>\${errorMessage}</div>\`;
+    }
+
+    try {        
+        //@ts-ignore
+        rwsTemplate = T.html\`${htmlContent}\`;
+      } catch (error: Error | any) {
+        rwsTemplate = handleError(error);
+      }
+    `;
+};
+
 module.exports = async function(content) {    
     let processedContent = content;
     const filePath = this.resourcePath;
@@ -59,7 +75,7 @@ module.exports = async function(content) {
         if(tagName){           
                         
             const lines = content.split('\n');
-            const textToInsert = `static definition = { name: '${tagName}', template, styles${addedParams.length? ', ' + (addedParams.join(', ')) : ''} };`;
+            const textToInsert = `static definition = { name: '${tagName}', template: rwsTemplate, styles${addedParams.length? ', ' + (addedParams.join(', ')) : ''} };`;
 
             let modifiedContent = '';
             let insertIndex = -1;
@@ -94,14 +110,17 @@ module.exports = async function(content) {
                 this.addDependency(templatePath);
 
                 let htmlContent = fs.readFileSync(templatePath, 'utf-8');
+                const originalContent = htmlContent;
 
                 if(!isDev){
                     htmlContent = htmlContent.replace(/\n/g, '');
                 }
 
-                template = `import './${templateName}.html';
-                //@ts-ignore            
-                const template: any = T.html\`${htmlContent}\`;`;
+                template = `import './${templateName}.html';            
+                let rwsTemplate:any = null;
+                
+                ${ERROR_HANDLER_CODE(originalContent)}
+              `;              
             }
 
             processedContent = `import * as T from '@microsoft/fast-element';\n${template}\n${styles}\n${addedParamDefs.join('\n')}\n` + replaced;

package/webpack/rws_scss_plugin.js

@@ -3,6 +3,7 @@ const fs = require('fs');
 const path = require('path');
 const { getTokenSourceMapRange } = require('typescript');
 const _tools = require('../_tools');
+const { rwsPath } = require('@rws-framework/console');
 const _COMPILE_DIR_NAME = 'compiled';
 
 const FONT_REGEX = /url\(['"]?(.+?\.(woff|woff2|eot|ttf|otf))['"]?\)/gm;
@@ -11,85 +12,85 @@ const SCSS_USE_REGEX = /@use\s+['"]?([^'"\s]+)['"]?;?/gm;
 const _DEV = true;
 
 const log = (args) => {
-  if(_DEV){
+  if (_DEV) {
     console.log(args);
   }
 }
 class RWSScssPlugin {
   autoCompile = [];
 
-  constructor(params){
+  constructor(params) {
     this.node_modules_dir = (fileDir) => path.relative(fileDir, _tools.findRootWorkspacePath(process.cwd())) + '/node_modules/'
-    
-    if(!params){
+
+    if (!params) {
       params = {};
     }
 
-    if(!!params.autoCompile && params.autoCompile.length > 0){
+    if (!!params.autoCompile && params.autoCompile.length > 0) {
       this.autoCompile = params.autoCompile;
     }
 
-    for (let index in this.autoCompile){
+    for (let index in this.autoCompile) {
       const sassFile = this.autoCompile[index];
       this.compileFile(sassFile, true);
     }
   }
 
-  extractScssImports(fileContent) {      
+  extractScssImports(fileContent, importRootPath) {
     let match;
     const imports = [];
-  
-    while ((match = CSS_IMPORT_REGEX.exec(fileContent)) !== null) {        
+
+    while ((match = CSS_IMPORT_REGEX.exec(fileContent)) !== null) {
       const importPath = match[1];
       const importLine = match[0];
-      
-      imports.push([importPath, importLine]);
-    }    
-  
+
+      imports.push([this.processImportPath(importPath, path.dirname(importRootPath)), importLine]);
+    }
+
     return [imports, fileContent];
   }
 
-  extractScssUses(fileContent) {      
+  extractScssUses(fileContent) {
     let match;
     const uses = [];
-  
-    while ((match = SCSS_USE_REGEX.exec(fileContent)) !== null) {        
+
+    while ((match = SCSS_USE_REGEX.exec(fileContent)) !== null) {
       const usesPath = match[1];
       const usesLine = match[0];
-      
+
       uses.push([usesPath, usesLine]);
-    }    
-  
+    }
+
     return [uses];
   }
 
-  detectImports(code){        
+  detectImports(code) {
     return CSS_IMPORT_REGEX.test(code);
   }
-  
-  writeCssFile(scssFilePath, cssContent) {    
+
+  writeCssFile(scssFilePath, cssContent) {
     const cssFilePath = scssFilePath.replace('.scss', '.css');
     let endCssFilePath = cssFilePath.split('/');
     let endCssDir = [...endCssFilePath];
     endCssDir[endCssDir.length - 1] = `${_COMPILE_DIR_NAME}`;
     endCssDir = endCssDir.join('/');
-  
+
     if (!fs.existsSync(endCssDir)) {
       fs.mkdirSync(endCssDir);
     }
-  
+
     endCssFilePath[endCssFilePath.length - 1] = `${_COMPILE_DIR_NAME}/` + endCssFilePath[endCssFilePath.length - 1];
     endCssFilePath = endCssFilePath.join('/');
-  
+
     fs.writeFileSync(endCssFilePath, cssContent);
-    log('Saved CSS file: ' + endCssFilePath);  
+    log('Saved CSS file: ' + endCssFilePath);
   }
 
-  hasFontEmbeds(css){
+  hasFontEmbeds(css) {
     return FONT_REGEX.test()
   }
 
-  embedFontsInCss(css, cssFilePath) {    
+  embedFontsInCss(css, cssFilePath) {
     let match;
 
     while ((match = FONT_REGEX.exec(css)) !== null) {
@@ -126,16 +127,16 @@ class RWSScssPlugin {
     return;
   }
 
- readSCSSFilesFromDirectory(dirPath) {
+  readSCSSFilesFromDirectory(dirPath) {
     let scssFiles = [];
-  
+
     try {
       const files = fs.readdirSync(dirPath);
-  
+
       files.forEach(file => {
         const filePath = path.join(dirPath, file);
         const stat = fs.statSync(filePath);
-  
+
         if (stat.isFile() && path.extname(file) === '.scss') {
           scssFiles.push(filePath);
         } else if (stat.isDirectory()) {
@@ -145,21 +146,25 @@ class RWSScssPlugin {
     } catch (e) {
       console.error(`Failed to read directory ${dirPath}:`, e);
     }
-  
+
     return scssFiles;
   };
-  
 
-  getCodeFromFile(filePath){
-    filePath = filePath.replace('//', '/');   
-    
-    const fileStat = fs.statSync(filePath);
 
-    if(!fs.existsSync(filePath)){
-      throw new Error(`SCSS loader: File path "${filePath}" was not found.`);
+  getCodeFromFile(filePath) {
+    filePath = filePath.replace('//', '/');
+
+    if (!fs.existsSync(filePath)) {
+      const processedImportPath = this.processImportPath(filePath, path.dirname(filePath));
+
+      if (!fs.existsSync(processedImportPath)) {
+        throw new Error(`SCSS loader: File path "${filePath}" was not found.`);
+      }
+
+      filePath = processedImportPath;
     }
 
-    if(filePath[filePath.length - 1] === '/' && fs.statSync(filePath).isDirectory()){
+    if (filePath[filePath.length - 1] === '/' && fs.statSync(filePath).isDirectory()) {
       let collectedCode = '';
 
       this.readSCSSFilesFromDirectory(filePath).forEach(scssPath => {
@@ -167,159 +172,215 @@ class RWSScssPlugin {
       });
 
       return collectedCode;
-    }else if(fs.statSync(filePath).isDirectory()){
-        throw new Error(`Non-directory path (not ending with "/") "${filePath}" is and should not be a directory`)
-    }    
+    } else if (fs.statSync(filePath).isDirectory()) {
+      throw new Error(`Non-directory path (not ending with "/") "${filePath}" is and should not be a directory`)
+    }
 
     return fs.readFileSync(filePath, 'utf-8');
   }
 
-  replaceWithNodeModules(input, fileDir, absolute = false, token = '~'){
-    return input.replace(token, absolute ? `${path.resolve(_tools.findRootWorkspacePath(process.cwd()), 'node_modules')}/` : this.node_modules_dir(fileDir));
+  replaceWithNodeModules(input, fileDir = null, absolute = false, token = '~') {
+    return input.replace(token, absolute ? `${path.resolve(_tools.findRootWorkspacePath(process.cwd()), 'node_modules')}/` : this.node_modules_dir(fileDir ? fileDir : process.cwd()));
   }
 
-  compileFile(scssPath){
+  async compileFile(scssPath) {
     scssPath = this.processImportPath(scssPath, path.dirname(scssPath))
 
-    let scssCode = this.getCodeFromFile(scssPath);  
+    let scssCode = this.getCodeFromFile(scssPath);
 
-    return this.compileScssCode(scssCode, path.dirname(scssPath));
+    return await this.compileScssCode(scssCode, path.dirname(scssPath));
   }
 
-  processImports(imports, fileRootDir, importStorage = {}, sub = false){
+  processImports(imports, fileRootDir, importStorage = {}, sub = false) {
     const importResults = [];
 
     const getStorage = (sourceComponentPath, importedFileContent) => {
-      const sourceComponentPathFormatted = sourceComponentPath.replace('/','_');
+      const sourceComponentPathFormatted = sourceComponentPath.replace('/', '_');
 
-      if(!(sourceComponentPathFormatted in importStorage)){
+      if (!(sourceComponentPathFormatted in importStorage)) {
         importStorage[sourceComponentPathFormatted] = importedFileContent;
-        
+
         return importedFileContent;
-      }      
+      }
 
       return '';
-    } 
+    }
 
-    imports.forEach(importData => {                    
+    imports.forEach(importData => {
       const originalImportPath = importData[0];
-      let importPath = this.processImportPath(originalImportPath, fileRootDir);      
-      let replacedScssContent = getStorage(importPath, this.getCodeFromFile(importPath).replace(/\/\*[\s\S]*?\*\//g, '')); 
+      let importPath = this.processImportPath(originalImportPath, fileRootDir);
 
-      const recursiveImports = this.extractScssImports(replacedScssContent)[0];
+      let replacedScssContent = getStorage(importPath, this.getCodeFromFile(importPath).replace(/\/\*[\s\S]*?\*\//g, ''));
+
+      const recursiveImports = this.extractScssImports(replacedScssContent, importPath)[0];
+
+      if (recursiveImports.length) {
+
+        replacedScssContent = this.replaceImports(this.processImports(recursiveImports, path.dirname(importPath), importStorage, true), replacedScssContent);
+      }
 
-      if(recursiveImports.length){           
-        
-        replacedScssContent = this.replaceImports(this.processImports(recursiveImports, path.dirname(importPath), importStorage, true), replacedScssContent);              
-      }        
-      
       importResults.push({
         line: importData[1],
         code: replacedScssContent
-      });            
-    });    
+      });
+    });
 
     return importResults;
   }
 
-  replaceImports(processedImports, code){
-    processedImports.forEach(importObj => {          
+  replaceImports(processedImports, code) {
+    processedImports.forEach(importObj => {
       code = code.replace(importObj.line, importObj.code);
     });
-  
+
     return code;
   }
 
-  processImportPath(importPath, fileRootDir){
-    const cwdRequest = importPath.indexOf('@cwd');
+  convertFontToBase64(fontPath) {    
+    return fs.readFileSync(fontPath, { encoding: 'base64' });
+  }
+
+  replaceFontUrlWithBase64(cssContent) {    
+    const urlRegex = /url\(([^)]+)\)/g;
+    let match;
+    
+    const fontFaceRegex = /@font-face\s*\{[^}]*\}/g;
+    let fontFaces = [...cssContent.matchAll(fontFaceRegex)];
+
+     for(const fontFace of fontFaces){
+      const fontFaceContent = fontFace[0];
+        const urlRegex = /url\((['"]?)([^)'"]+)(\1)\)/g;
+        let match;
+        
+        let modifiedFontFaceContent = fontFaceContent;
+        
+        while ((match = urlRegex.exec(fontFaceContent)) !== null) {          
+          // Create a promise to convert each font to Base64 and replace in CSS
+          const base64 = this.convertFontToBase64(this.processImportPath(match[2], null, true));
+          const base64Font = `data:font/woff2;base64,${base64}`;          
+          
+          modifiedFontFaceContent = modifiedFontFaceContent.replace(match[2], base64Font);          
+        }
+
+        cssContent = cssContent.replace(fontFaceContent, modifiedFontFaceContent)
+    };
+      
+    return cssContent;
+  }
 
-    if(importPath.split('')[0] === '~'){      
-      return this.fillSCSSExt(this.replaceWithNodeModules(importPath, path.dirname(fileRootDir), true));         
-    } else if ( cwdRequest > -1){      
-      return this.fillSCSSExt(process.cwd() + '/' + importPath.slice(cwdRequest+4));
-    }    
+  processImportPath(importPath, fileRootDir = null, noext = false) {
+    if (importPath.split('')[0] === '~') {
+      return this.fillSCSSExt(this.replaceWithNodeModules(importPath, null, true), noext);
+    }
 
-    if(importPath.split('')[0] === '/'){
-      return this.fillSCSSExt(importPath);  
+    if (importPath.indexOf('@rws-mixins') === 0) {
+      return path.resolve(rwsPath.findPackageDir(__dirname), 'src', 'styles', 'includes.scss');
     }
 
-    if(importPath.split('')[0] === '.'){
-      return this.fillSCSSExt(path.resolve(fileRootDir, importPath));
+    if (importPath.indexOf('@cwd') === 0) {
+      return this.fillSCSSExt(process.cwd() + '/' + importPath.slice(4), noext);
+    }
+
+    if (importPath.split('')[0] === '/') {
+
+      return this.fillSCSSExt(importPath, noext);
     }
 
-    const relativized = path.resolve(fileRootDir) + '/' + importPath;
+    if(fileRootDir){
+      if (importPath.split('')[0] === '.') {
+        return this.fillSCSSExt(path.resolve(fileRootDir, importPath), noext);
+      }
+
+      const relativized = path.resolve(fileRootDir) + '/' + importPath;
 
-    if(!fs.existsSync(relativized)){
-      const partSplit = relativized.split('/');
-      partSplit[partSplit.length-1] = '_' + partSplit[partSplit.length-1] + '.scss';
+      if (!fs.existsSync(relativized)) {
+        const partSplit = relativized.split('/');
+        partSplit[partSplit.length - 1] = '_' + partSplit[partSplit.length - 1] + '.scss';
 
-      const newPath = partSplit.join('/');
+        const newPath = this.underscorePath(relativized);
 
-      if(fs.existsSync(newPath)){
-        return newPath;
-      }      
+        if (fs.existsSync(newPath)) {
+          return newPath;
+        }
+      }
+      return this.fillSCSSExt(relativized, noext);
     }
 
-    return this.fillSCSSExt(relativized);
+    return importPath;
   }
 
-  fillSCSSExt(scssPath){
-    if((!fs.existsSync(scssPath) || (fs.existsSync(scssPath) && fs.statSync(scssPath).isDirectory())) && fs.existsSync(`${scssPath}.scss`)){
-      return `${scssPath}.scss`;
+  underscorePath(path, noext = false) {
+    const partSplit = path.split('/');
+    partSplit[partSplit.length - 1] = '_' + partSplit[partSplit.length - 1] + (path.indexOf('.scss') > - 1  || noext ? '' : '.scss');
+    return partSplit.join('/');
+  }
+
+  fillSCSSExt(scssPath, noext = false) {
+    const underscoredPath = this.underscorePath(scssPath, noext);
+    if (!fs.existsSync(scssPath) && fs.existsSync(underscoredPath)) {
+      return underscoredPath;
     }
 
-    if(fs.existsSync(`_${scssPath}.scss`)){
+    if(noext){
+      return scssPath;
+    }
+
+    if ((!fs.existsSync(scssPath) || (fs.existsSync(scssPath) && fs.statSync(scssPath).isDirectory())) && fs.existsSync(`${scssPath}.scss`)) {
       return `${scssPath}.scss`;
     }
 
+    if (fs.existsSync(`_${scssPath}.scss`)) {
+      return `${scssPath}.scss`;
+    }  
+
     return scssPath;
   }
 
-  compileScssCode(scssCode, fileRootDir, createFile = false, filePath = null, minify = false){
-    const _self = this;                  
-      const [scssImports] = this.extractScssImports(scssCode);                         
+  compileScssCode(scssCode, fileRootDir, createFile = false, filePath = null, minify = false) {
+    const _self = this;
+    const [scssImports] = this.extractScssImports(scssCode, fileRootDir);
 
-      if(scssImports && scssImports.length){                
-        scssCode = this.replaceImports(this.processImports(scssImports, fileRootDir), scssCode);                       
-      }
+    if (scssImports && scssImports.length) {
+      scssCode = this.replaceImports(this.processImports(scssImports, fileRootDir), scssCode);
+    }
 
-      const uses = this.extractScssUses(scssCode)[0];
-      let scssUses = '';
-    
+    const uses = this.extractScssUses(scssCode)[0];
+    let scssUses = '';
 
-      uses.forEach(scssUse => {
-        const useLine = scssUse[1];
-        scssUses += useLine + '\n'; 
-        scssCode = scssCode.replace(useLine, '');
-      });       
-  
-      scssCode = scssUses + scssCode;      
 
-      try {
+    uses.forEach(scssUse => {
+      const useLine = scssUse[1];
+      scssUses += useLine + '\n';
+      scssCode = scssCode.replace(useLine, '');
+    });
 
-        const result = sass.compileString(scssCode, { loadPaths: [fileRootDir], style: minify ? 'compressed' : 'expanded' });
-        let finalCss = result.css;               
+    scssCode = scssUses + scssCode;
 
-        return finalCss;
-      } catch(err) {
-        console.error('SASS Error in', fileRootDir);
-        
-        console.error(err);
-        throw err;        
-        return '';
-      };    
+    try {
+
+      const result = sass.compileString(scssCode, { loadPaths: [fileRootDir], style: minify ? 'compressed' : 'expanded' });
+      let finalCss = result.css;
+
+      return this.replaceFontUrlWithBase64(finalCss);
+    } catch (err) {
+      console.error('SASS Error in', fileRootDir);
+
+      console.error(err);
+      throw err;
+      return '';
+    };
   }
 
-  checkForImporterType(_module, checkTypeExt){
+  checkForImporterType(_module, checkTypeExt) {
     let importingFileExtension = '';
 
     if (_module && _module.issuer && _module.issuer.resource) {
-        importingFileExtension = path.extname(_module.issuer.resource);
-        if(importingFileExtension === ('.' + checkTypeExt)){
-            return true;
-        }
-    }else{
-        return false;
+      importingFileExtension = path.extname(_module.issuer.resource);
+      if (importingFileExtension === ('.' + checkTypeExt)) {
+        return true;
+      }
+    } else {
+      return false;
     }
 
     return false