@rws-framework/client 2.11.0 → 2.13.0

package/builder/vite/index.ts

@@ -0,0 +1,5 @@
+import { rwsViteBuilder } from './rws.vite.config';
+
+export {
+    rwsViteBuilder
+};

package/builder/vite/rws.vite.config.ts

@@ -0,0 +1,44 @@
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { processEnvDefines } from '../../cfg/build_steps/vite/_env_defines';
+import { getRWSVitePlugins } from '../../cfg/build_steps/vite/_loaders';
+import { rwsPath } from '@rws-framework/console';
+import type { RWSViteConfig } from '../../cfg/build_steps/vite/types';
+import type { UserConfig } from 'vite'; // Add this import
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export const _DEFAULT_CFG: RWSViteConfig = {
+    dev: true,
+    tsConfigPath: path.resolve(rwsPath.findPackageDir(process.cwd()), 'tsconfig.json')
+};
+
+export function rwsViteBuilder(config: Partial<RWSViteConfig> = _DEFAULT_CFG, devDebug = false): UserConfig {
+    if(!config.tsConfigPath){
+        config.tsConfigPath = _DEFAULT_CFG.tsConfigPath;
+    }
+
+    const theConfig: RWSViteConfig = {..._DEFAULT_CFG, ...config};
+
+    // Return a plain configuration object
+    return {
+        define: processEnvDefines(theConfig, _DEFAULT_CFG, devDebug),        
+        plugins: getRWSVitePlugins({ 
+            packageDir: rwsPath.findPackageDir(process.cwd()), 
+            nodeModulesPath: `${rwsPath.findRootWorkspacePath(process.cwd())}/node_modules`, 
+            tsConfigPath: theConfig.tsConfigPath, 
+            devDebug: true 
+        }),        
+        build: {
+            minify: !config.dev,
+            sourcemap: config.dev,
+            outDir: 'dist',
+            rollupOptions: {
+                input: {
+                    main: path.resolve(process.cwd(), 'index.html')
+                }
+            }
+        }
+    };
+}

package/{webpack → builder/webpack}/index.js

@@ -1,8 +1,10 @@
 const scssLoader = require('./loaders/rws_fast_scss_loader');
 const htmlLoader = require('./loaders/rws_fast_html_loader');
 const tsLoader = require('./loaders/rws_fast_ts_loader');
+const { RWSWebpackWrapper  } = require('./rws.webpack.config');
 
-module.exports = {    
+module.exports = {
+    RWSWebpackWrapper,    
     scssLoader,
     htmlLoader,
     tsLoader

package/{webpack → builder/webpack}/loaders/rws_fast_ts_loader.js

@@ -24,7 +24,7 @@ module.exports = async function(content) {
     const customCompilationOptions = compilationVariables?.customOptions || null;    
 
     const cachedTS = _scss_cache.cache(customCompilationOptions).getCachedItem(filePath, md5(cachedCode));
-
+    
     if(cachedTS){
       return cachedTS;
     }

package/{rws.webpack.config.js → builder/webpack/rws.webpack.config.js}

@@ -4,19 +4,19 @@ const chalk = require('chalk');
 
 const RWSWebpackPlugin = require('./webpack/rws_webpack_plugin');
 
-const buildInfo = require('./cfg/build_steps/webpack/_info');
-const { loadAliases } = require('./cfg/build_steps/webpack/_aliases');
-const { timingStart, timingStop, timeLog, toggleLogging } = require('./cfg/build_steps/webpack/_timing');
-const { getRWSProductionSetup } = require('./cfg/build_steps/webpack/_production');
-const { rwsExternals } = require('./cfg/build_steps/webpack/_rws_externals');
-
-const tools = require('./_tools');
-const { setComponentsChunks, scanComponents, generateRWSInfoFile, partedComponentsEvents } = require('./cfg/build_steps/webpack/_component_handling');
-const { getBuildConfig } = require('./cfg/build_steps/webpack/_build_config');
-const { createWebpackConfig } = require('./cfg/build_steps/webpack/_webpack_config');
-const { executeRWSStartActions, timingActions, devActions } = require('./cfg/build_steps/webpack/_actions');
-const { webpackDevServer } = require('./cfg/build_steps/webpack/_dev_servers');
-const { RWS_WEBPACK_PLUGINS_BAG, addStartPlugins } = require('./cfg/build_steps/webpack/_plugins');
+const buildInfo = require('../../cfg/build_steps/webpack/_info');
+const { loadAliases } = require('../../cfg/build_steps/webpack/_aliases');
+const { timingStart, timingStop, timeLog, toggleLogging } = require('../../cfg/build_steps/webpack/_timing');
+const { getRWSProductionSetup } = require('../../cfg/build_steps/webpack/_production');
+const { rwsExternals } = require('../../cfg/build_steps/webpack/_rws_externals');
+
+const tools = require('../../_tools');
+const { setComponentsChunks, scanComponents, generateRWSInfoFile, partedComponentsEvents } = require('../../cfg/build_steps/webpack/_component_handling');
+const { getBuildConfig } = require('../../cfg/build_steps/webpack/_build_config');
+const { createWebpackConfig } = require('../../cfg/build_steps/webpack/_webpack_config');
+const { executeRWSStartActions, timingActions, devActions } = require('../../cfg/build_steps/webpack/_actions');
+const { webpackDevServer } = require('../../cfg/build_steps/webpack/_dev_servers');
+const { RWS_WEBPACK_PLUGINS_BAG, addStartPlugins } = require('../../cfg/build_steps/webpack/_plugins');
 
 const _MAIN_PACKAGE = rwsPath.findRootWorkspacePath(process.cwd());
 
@@ -68,6 +68,11 @@ const RWSWebpackWrapper = async (rwsFrontendConfig) => {
   let optimConfig = null;
   let aliases = rwsFrontendConfig.aliases || {};
 
+  console.log({  
+    __filename,
+    _packageDir
+  });
+
   aliases = { ...aliases, ...loadAliases(__dirname, path.resolve(_MAIN_PACKAGE, 'node_modules'), executionDir) }  
 
   // #SECTION PLUGIN STARTING HOOKS

package/cfg/build_steps/vite/_build_config.ts

@@ -0,0 +1,106 @@
+import chalk from 'chalk';
+import { RWSConfigBuilder, rwsPath } from '@rws-framework/console';
+import { _DEFAULT_CONFIG } from '../../_default.cfg';
+
+import { IRWSPlugin } from '../../../src/types/IRWSPlugin';
+
+interface IRWSViteConfig {
+  executionDir: string;
+  isWatcher: boolean;
+  isDev: boolean;
+  isHotReload: boolean;
+  isReport: boolean;
+  isParted: boolean;
+  partedPrefix?: string | null;
+  partedDirUrlPrefix?: string | null;
+  partedComponentsLocations?: string[];
+  customServiceLocations?: string[];
+  outputDir: string;
+  outputFileName: string;
+  publicDir?: string | null;
+  serviceWorkerPath?: string | null,
+  publicIndex?: string | null,
+  devTools?: string | null,
+  devDebug?: any,
+  devRouteProxy?: any,
+  tsConfigPath: string,
+  rwsPlugins?: {
+    [key: string]: IRWSPlugin
+  },
+  _packageDir?: string,
+  BuildConfigurator: RWSConfigBuilder<any>
+}
+
+async function getBuildConfig(rwsFrontBuildConfig): Promise<IRWSViteConfig>
+{
+    const BuildConfigurator = new RWSConfigBuilder(rwsPath.findPackageDir(process.cwd()) + '/.rws.json', {..._DEFAULT_CONFIG, ...rwsFrontBuildConfig});
+    const _packageDir = rwsPath.findPackageDir(process.cwd());
+
+    const executionDir = rwsPath.relativize(BuildConfigurator.get('executionDir') || rwsFrontBuildConfig.executionDir || process.cwd(), _packageDir);
+    const isWatcher = process.argv.includes('--watch') || false;  
+
+    const isDev = isWatcher ? true : (BuildConfigurator.get('dev', rwsFrontBuildConfig.dev) || false);
+    const isHotReload = BuildConfigurator.get('hot', rwsFrontBuildConfig.hot);
+    const isReport = BuildConfigurator.get('report', rwsFrontBuildConfig.report);
+    const isParted = BuildConfigurator.get('parted', rwsFrontBuildConfig.parted || false);
+
+    const partedPrefix = BuildConfigurator.get('partedPrefix', rwsFrontBuildConfig.partedPrefix);
+    const partedDirUrlPrefix = BuildConfigurator.get('partedDirUrlPrefix', rwsFrontBuildConfig.partedDirUrlPrefix);
+
+    let partedComponentsLocations = BuildConfigurator.get('partedComponentsLocations', rwsFrontBuildConfig.partedComponentsLocations);
+    const customServiceLocations = BuildConfigurator.get('customServiceLocations', rwsFrontBuildConfig.customServiceLocations); //@todo: check if needed
+    const outputDir = rwsPath.relativize(BuildConfigurator.get('outputDir', rwsFrontBuildConfig.outputDir), _packageDir);
+
+    const outputFileName = BuildConfigurator.get('outputFileName') || rwsFrontBuildConfig.outputFileName;
+    const publicDir = BuildConfigurator.get('publicDir') || rwsFrontBuildConfig.publicDir;
+    const serviceWorkerPath = BuildConfigurator.get('serviceWorker') || rwsFrontBuildConfig.serviceWorker;
+
+    const publicIndex = BuildConfigurator.get('publicIndex') || rwsFrontBuildConfig.publicIndex;
+
+    const devTools = isDev ? (BuildConfigurator.get('devtool') || 'source-map') : false;
+
+    const _DEFAULT_DEV_DEBUG = { build: false, timing: false, rwsCache: false, profiling: false };
+
+    let devDebug = isDev ? (BuildConfigurator.get('devDebug') || rwsFrontBuildConfig.devDebug || {}) : {};
+    devDebug = {..._DEFAULT_DEV_DEBUG, ...devDebug}
+
+    const devRouteProxy = BuildConfigurator.get('devRouteProxy') || rwsFrontBuildConfig.devRouteProxy;
+
+    const tsConfigPath = rwsPath.relativize(BuildConfigurator.get('tsConfigPath') || rwsFrontBuildConfig.tsConfigPath, executionDir);
+
+    const rwsPlugins = {};
+
+    if(rwsFrontBuildConfig.rwsPlugins){
+        for(const pluginEntry of rwsFrontBuildConfig.rwsPlugins){
+          const pluginBuilder = (await import(`${pluginEntry}`)).default;      
+          rwsPlugins[pluginEntry] = new pluginBuilder(BuildConfigurator, rwsFrontBuildConfig);
+        }
+      }
+
+    return {
+        executionDir,
+        isWatcher,
+        isDev,
+        isHotReload,
+        isReport,
+        isParted,
+        partedPrefix,
+        partedDirUrlPrefix,
+        partedComponentsLocations,
+        customServiceLocations,
+        outputDir,
+        outputFileName,
+        publicDir,
+        serviceWorkerPath,
+        publicIndex,
+        devTools,
+        devDebug,
+        devRouteProxy,
+        tsConfigPath,
+        rwsPlugins,
+        _packageDir,
+        BuildConfigurator
+    }
+}
+
+export { getBuildConfig }

package/cfg/build_steps/vite/_env_defines.ts

@@ -0,0 +1,17 @@
+import { RWSViteConfig } from "./types";
+
+export function processEnvDefines(frontCfg: RWSViteConfig, defaults: RWSViteConfig, devDebug: any = null) {
+    let _rws_defines = {
+        '_RWS_DEV_DEBUG': JSON.stringify(devDebug),
+        '_RWS_DEFAULTS': JSON.stringify(defaults),
+        '_RWS_BUILD_OVERRIDE': JSON.stringify(frontCfg)
+    }
+
+    const rwsDefines = frontCfg.defines || null;
+
+    if (rwsDefines) {
+        _rws_defines = { ..._rws_defines, ...rwsDefines }
+    }
+
+    return _rws_defines;
+}

package/cfg/build_steps/vite/_loaders.ts

@@ -0,0 +1,183 @@
+import path from 'path';
+import fs from 'fs';
+import JSON5 from 'json5';
+import chalk from 'chalk';
+import { Plugin } from 'vite';
+import { RWSScssPlugin } from './rws_scss_plugin';
+import { scssLoader, tsLoader, htmlLoader } from './loaders';
+
+const cssPlugin = new RWSScssPlugin();
+
+interface RWSLoaderOptions {
+    packageDir: string;
+    nodeModulesPath: string;
+    tsConfigPath: string;
+    devDebug?: boolean;
+}
+
+interface ViewDecoratorData {
+    tagName: string;
+    className: string | null;
+    classNamePrefix: string | null;
+    decoratorArgs: any;
+}
+
+export function getRWSVitePlugins({ packageDir, nodeModulesPath, tsConfigPath, devDebug }: RWSLoaderOptions): Plugin[] {
+    return [
+        tsLoader, scssLoader, htmlLoader
+    ];
+}
+
+function _extractRWSViewDefs(fastOptions: Record<string, any> = {}, decoratorArgs: Record<string, any> = {}) {
+    const addedParamDefs: string[] = [];
+    const addedParams: string[] = [];
+
+    for (const key in fastOptions) {
+        addedParamDefs.push(`const ${key} = ${JSON.stringify(fastOptions[key])};`);
+        addedParams.push(key);
+    }
+
+    return [addedParamDefs, addedParams];
+}
+
+export function extractRWSViewArgs(content: string, noReplace = false): { viewDecoratorData: ViewDecoratorData, replacedDecorator: string | null } | null {
+    const viewReg = /@RWSView\(\s*["']([^"']+)["'](?:\s*,\s*([\s\S]*?))?\s*\)\s*(.*?\s+)?class\s+([a-zA-Z0-9_-]+)\s+extends\s+RWSViewComponent/gm;
+    let m;
+    let tagName: string | null = null;
+    let className: string | null = null;
+    let classNamePrefix: string | null = null;
+    let decoratorArgs: any = null;
+
+    const _defaultRWSLoaderOptions = {
+        templatePath: 'template.html',
+        stylesPath: 'styles.scss',
+        fastOptions: { shadowOptions: { mode: 'open' } }
+    };
+
+    while ((m = viewReg.exec(content)) !== null) {
+        if (m.index === viewReg.lastIndex) {
+            viewReg.lastIndex++;
+        }
+
+        m.forEach((match, groupIndex) => {
+            if (groupIndex === 1) {
+                tagName = match;
+            }
+            if (groupIndex === 2) {
+                if (match) {
+                    try {
+                        decoratorArgs = JSON5.parse(match);
+                    } catch(e) {
+                        console.log(chalk.red('Decorator options parse error: ') + e.message + '\n Problematic line:');
+                        console.log(`@RWSView(${tagName}, ${match})`);
+                        console.log(chalk.yellowBright(`Decorator options failed to parse for "${tagName}" component.`) + ' { decoratorArgs } defaulting to null.');
+                        console.log(match);
+                        throw new Error('Failed parsing @RWSView');
+                    }
+                }
+            }
+            if (groupIndex === 3) {
+                classNamePrefix = match || null;
+            }
+            if (groupIndex === 4) {
+                className = match;
+            }
+        });
+    }
+
+    if (!tagName) {
+        return null;
+    }
+
+    let processedContent = content;
+    let fastOptions = _defaultRWSLoaderOptions.fastOptions;
+    
+    if (decoratorArgs?.fastElementOptions) {
+        fastOptions = decoratorArgs.fastElementOptions;
+    }
+
+    let replacedDecorator: string | null = null;
+    
+    if (!noReplace) {
+        const [addedParamDefs, addedParams] = _extractRWSViewDefs(fastOptions, decoratorArgs);
+        const replacedViewDecoratorContent = processedContent.replace(
+            viewReg,
+            `@RWSView('$1', null, { template: rwsTemplate, styles${addedParams.length ? ', options: {' + (addedParams.join(', ')) + '}' : ''} })\n$3class $4 extends RWSViewComponent `
+        );
+        replacedDecorator = `${addedParamDefs.join('\n')}\n${replacedViewDecoratorContent}`;
+    }
+
+    return {
+        viewDecoratorData: {
+            tagName,
+            className,
+            classNamePrefix,
+            decoratorArgs
+        },
+        replacedDecorator
+    };
+}
+
+export async function getStyles(
+    filePath: string,
+    addDependency: (path: string) => void,
+    templateExists: boolean,
+    stylesPath: string | null = null,
+    isDev = false
+): Promise<string> {
+    if (!stylesPath) {
+        stylesPath = 'styles/layout.scss';
+    }
+
+    let styles = 'const styles: null = null;';
+    const stylesFilePath = path.dirname(filePath) + '/' + stylesPath;
+
+    if (fs.existsSync(stylesFilePath)) {
+        const scsscontent = fs.readFileSync(stylesFilePath, 'utf-8');
+
+        const codeData = await cssPlugin.compileScssCode(
+            scsscontent,
+            path.dirname(filePath) + '/styles'
+        );        
+
+        const cssCode = codeData.code;
+        styles = isDev ? `import './${stylesPath}';\n` : '';
+        
+        if (!templateExists) {
+            styles += `import { css } from '@microsoft/fast-element';\n`;
+        }
+        
+        styles += `const styles = ${templateExists ? 'T.' : ''}css\`${cssCode}\`;\n`;
+        addDependency(path.dirname(filePath) + '/' + stylesPath);
+    }
+
+    return styles;
+}
+
+export async function getTemplate(
+    filePath: string,
+    addDependency: (path: string) => void,
+    templateName: string | null = null,
+    isDev = false
+): Promise<[string, string | null, boolean]> {
+    if (!templateName) {
+        templateName = 'template';
+    }
+
+    const templatePath = path.dirname(filePath) + `/${templateName}.html`;
+    let htmlFastImports: string | null = null;
+    const templateExists = fs.existsSync(templatePath);
+    let template = 'const rwsTemplate: null = null;';
+
+    if (templateExists) {
+        const templateContent = fs.readFileSync(templatePath, 'utf-8').replace(/<!--[\s\S]*?-->/g, '');
+        htmlFastImports = `import * as T from '@microsoft/fast-element';\nimport './${templateName}.html';\n`;
+        template = `
+            //@ts-ignore
+            let rwsTemplate: any = T.html\`${templateContent}\`;
+        `;
+        addDependency(templatePath);
+    }
+
+    return [template, htmlFastImports, templateExists];
+}

package/cfg/build_steps/vite/index.ts

@@ -0,0 +1,3 @@
+import { createViteConfig } from './vite_config';
+
+export { createViteConfig };

package/cfg/build_steps/vite/loaders/html.ts

@@ -0,0 +1,14 @@
+import { IRWSViteLoader } from "./loader.type";
+
+export default (): IRWSViteLoader => ({
+    name: 'rws-html',
+    async transform(code: string, id: string) {
+        if (!id.endsWith('.html')) return null;
+        
+        // Process HTML files
+        return {
+            code,
+            map: null
+        };
+    }
+});

package/cfg/build_steps/vite/loaders/index.ts

@@ -0,0 +1,9 @@
+import scssLoader from './scss';
+import tsLoader from './ts';
+import htmlLoader from './html';
+
+export {
+    scssLoader,
+    tsLoader,
+    htmlLoader
+}

package/cfg/build_steps/vite/loaders/loader.type.ts

@@ -0,0 +1,4 @@
+export interface IRWSViteLoader {
+    name: string,
+    transform(code: string, id: string): Promise<{ code: string, map: any } | null>
+}

package/cfg/build_steps/vite/loaders/scss.ts

@@ -0,0 +1,20 @@
+import { IRWSViteLoader } from "./loader.type";
+import { RWSScssPlugin } from '../rws_scss_plugin';
+import path from 'path';
+
+export default (cssPlugin: RWSScssPlugin): IRWSViteLoader => ({
+    name: 'rws-scss',
+    async transform(code: string, id: string) {
+        if (!id.endsWith('.scss')) return null;
+        
+        const result = await cssPlugin.compileScssCode(
+            code,
+            path.dirname(id) + '/styles',                    
+        );
+        
+        return {
+            code: result.code,
+            map: null
+        };
+    }
+});

package/cfg/build_steps/vite/loaders/ts.ts

@@ -0,0 +1,19 @@
+import { IRWSViteLoader } from "./loader.type";
+export default (): IRWSViteLoader => ({
+    name: 'rws-typescript',
+    async transform(code: string, id: string) {
+        console.log({code});
+        if (!id.endsWith('.ts')) return null;
+        
+        // Skip .debug.ts and .d.ts files
+        if (id.endsWith('.debug.ts') || id.endsWith('.d.ts')) return null;
+        
+        // Skip non-@rws-framework node_modules
+        if (id.includes('node_modules') && !id.includes('@rws-framework')) return null;
+
+        return {
+            code,
+            map: null
+        };
+    }
+});

package/cfg/build_steps/vite/rws_scss_plugin.ts

@@ -0,0 +1,63 @@
+import path from 'path';
+import { rwsPath } from '@rws-framework/console';
+
+import _scss_compiler_builder from './scss/_compiler';
+import _scss_import_builder from './scss/_import';
+
+import _scss_fs_builder from './scss/_fs';
+
+type PluginParams = { autoCompile: string[] };
+
+class RWSScssPlugin {
+  protected autoCompile: string[] = [];
+  protected node_modules_dir: (fileDir: string) => void;
+
+  private _scss_import: any;    
+  private _scss_fs: any;
+  private _scss_compiler: any;
+
+  constructor(params: PluginParams = { autoCompile: [] }) {
+    this.node_modules_dir = (fileDir) => path.relative(fileDir, rwsPath.findRootWorkspacePath(process.cwd())) + '/node_modules/'
+    this._scss_import = _scss_import_builder(this);    
+    this._scss_fs = _scss_fs_builder(this);
+    this._scss_compiler = _scss_compiler_builder(this);
+
+    if (!!params.autoCompile && params.autoCompile.length > 0) {
+      this.autoCompile = params.autoCompile;
+    }
+
+    for (let index in this.autoCompile) {
+      const sassFile = this.autoCompile[index];
+      this.compileFile(sassFile);
+    }
+  }
+
+  
+  apply(compiler) {
+    const _self = this;
+
+    return;
+  }
+
+  async compileFile(scssPath): Promise<{ code: string, dependencies: string[]}> 
+  {    
+    scssPath = this._scss_import.processImportPath(scssPath, path.dirname(scssPath))    
+
+
+    let scssCode = this._scss_fs.getCodeFromFile(scssPath);
+
+    return await this._scss_compiler.compileScssCode(scssCode, path.dirname(scssPath), null, scssPath);
+  }
+
+  async compileScssCode(scssCode: string, scssPath: string): Promise<{ code: string, dependencies: string[]}>
+  {    
+    return await this._scss_compiler.compileScssCode(scssCode, scssPath, null, scssPath);
+  }
+
+  writeCssFile(scssFilePath: string, cssContent: string): string
+  {
+    return this._scss_fs.writeCssFile(scssFilePath, cssContent);
+  }
+}
+
+export {RWSScssPlugin};

package/cfg/build_steps/vite/scss/_compiler.ts

@@ -0,0 +1,101 @@
+const sass = require('sass');
+const path = require('path');
+const chalk = require('chalk');
+const emojiRegex = require('emoji-regex');
+
+import _scss_fonts_builder from './_fonts';
+let _scss_fonts: any = null;
+
+import _scss_import_builder from './_import';
+let _scss_import: any = null;
+
+function compileScssCode(scssCode, fileRootDir, createFile = false, filePath = null, minify = false): {
+  code: string,
+  dependencies: string[]
+}
+{  
+    _scss_fonts = _scss_fonts_builder(this);
+    _scss_import = _scss_import_builder(this);
+
+    const [scssImports] = _scss_import.extractScssImports(scssCode, fileRootDir);
+
+    const dependencies = scssImports.map((item) => item[2]);
+
+    if (scssImports && scssImports.length) {
+      scssCode = _scss_import.replaceImports(_scss_import.processImports(scssImports, fileRootDir), scssCode);
+    }
+
+    const uses = _scss_import.extractScssUses(scssCode)[0];
+    let scssUses = '';
+
+
+    uses.forEach(scssUse => {
+      const useLine = scssUse[1];
+      if(scssCode.indexOf(useLine) === -1){                
+        scssUses += useLine + '\n';
+        scssCode = scssCode.replace(useLine + '\n', '');
+      }
+    });
+
+    scssCode = removeComments(scssUses + scssCode);
+
+    try {
+      const result = sass.compileString(scssCode, { loadPaths: [fileRootDir]});
+
+      let compiledCode = result.css.toString();
+      compiledCode = _scss_fonts.replaceFontUrlWithBase64(compiledCode);
+      compiledCode = replaceEmojisWithQuestionMark(compiledCode, fileRootDir);
+      return { code: compiledCode, dependencies};
+    } catch (err) {
+      console.error('SASS Error in', fileRootDir);
+
+      console.error(err);
+      throw err;
+  };
+  }
+
+  function 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;
+    }
+
+    return false
+  }
+
+  function replaceEmojisWithQuestionMark(code, componentDir) {
+    const regex = emojiRegex();
+    let hasEmoji = false;
+    
+    const result = code.replace(regex, (match) => {
+      hasEmoji = true;
+      return '?';
+    });
+  
+    if (hasEmoji) {
+      console.log(chalk.yellow(`Emojis in css detected and replaced with "?" in "${path.dirname(componentDir)}" component`));
+    }
+  
+    return result;
+  }
+
+  function removeComments(code) {
+    code = code.replace(/\/\/.*$/gm, '');
+    code = code.replace(/\/\*[\s\S]*?\*\//g, '');
+    code = code.replace(/^\s*$(?:\r\n?|\n)/gm, '');
+    
+    return code;
+  }
+  
+  export default function(element) {
+    return {
+        checkForImporterType: checkForImporterType.bind(element),
+        compileScssCode: compileScssCode.bind(element)
+    };
+  };