@rws-framework/client 2.13.0 → 2.13.1

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

@@ -11,7 +11,8 @@ const __dirname = path.dirname(__filename);
 
 export const _DEFAULT_CFG: RWSViteConfig = {
     dev: true,
-    tsConfigPath: path.resolve(rwsPath.findPackageDir(process.cwd()), 'tsconfig.json')
+    tsConfigPath: path.resolve(rwsPath.findPackageDir(process.cwd()), 'tsconfig.json'),
+    cssOutputPath: path.resolve(rwsPath.findPackageDir(process.cwd()), 'public', 'css'),
 };
 
 export function rwsViteBuilder(config: Partial<RWSViteConfig> = _DEFAULT_CFG, devDebug = false): UserConfig {
@@ -19,6 +20,10 @@ export function rwsViteBuilder(config: Partial<RWSViteConfig> = _DEFAULT_CFG, de
         config.tsConfigPath = _DEFAULT_CFG.tsConfigPath;
     }
 
+    if(!config.cssOutputPath){
+        config.cssOutputPath = _DEFAULT_CFG.cssOutputPath;
+    }
+
     const theConfig: RWSViteConfig = {..._DEFAULT_CFG, ...config};
 
     // Return a plain configuration object
@@ -28,7 +33,8 @@ export function rwsViteBuilder(config: Partial<RWSViteConfig> = _DEFAULT_CFG, de
             packageDir: rwsPath.findPackageDir(process.cwd()), 
             nodeModulesPath: `${rwsPath.findRootWorkspacePath(process.cwd())}/node_modules`, 
             tsConfigPath: theConfig.tsConfigPath, 
-            devDebug: true 
+            cssOutputPath: theConfig.cssOutputPath as string,
+            dev: config.dev as boolean 
         }),        
         build: {
             minify: !config.dev,

package/cfg/build_steps/vite/_loaders.ts

@@ -2,17 +2,19 @@ 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';
+import { HTMLLoaderParams, IRWSViteLoader, LoaderContent, SCSSLoaderParams, TSLoaderParams } from './loaders/loader.type';
+import { PluginOption } from 'vite';
 
-const cssPlugin = new RWSScssPlugin();
+const scssPlugin = new RWSScssPlugin();
 
 interface RWSLoaderOptions {
     packageDir: string;
     nodeModulesPath: string;
+    cssOutputPath: string;
     tsConfigPath: string;
-    devDebug?: boolean;
+    dev: boolean;
 }
 
 interface ViewDecoratorData {
@@ -22,9 +24,9 @@ interface ViewDecoratorData {
     decoratorArgs: any;
 }
 
-export function getRWSVitePlugins({ packageDir, nodeModulesPath, tsConfigPath, devDebug }: RWSLoaderOptions): Plugin[] {
+export function getRWSVitePlugins({ packageDir, nodeModulesPath, tsConfigPath, cssOutputPath, dev }: RWSLoaderOptions): PluginOption[] {
     return [
-        tsLoader, scssLoader, htmlLoader
+         tsLoader({dev, scssPlugin: scssPlugin}),  scssLoader({dev, scssPlugin: scssPlugin, cssOutputPath}), htmlLoader({dev})
     ];
 }
 

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

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

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

@@ -1,4 +1,28 @@
-export interface IRWSViteLoader {
+import { PluginOption } from 'vite';
+import { RWSScssPlugin } from '../rws_scss_plugin';
+
+export interface LoaderParams {
+    dev: boolean
+}
+
+export interface TSLoaderParams extends LoaderParams {
+    scssPlugin: RWSScssPlugin
+
+}
+
+export interface SCSSLoaderParams extends LoaderParams {
+    scssPlugin: RWSScssPlugin,
+    cssOutputPath: string
+}
+
+export interface HTMLLoaderParams extends LoaderParams {
+    
+}
+
+export type LoaderContent = {
     name: string,
+    enforce?: string,
     transform(code: string, id: string): Promise<{ code: string, map: any } | null>
-}
+} | null;
+
+export type IRWSViteLoader<P extends LoaderParams = LoaderParams> = (params: P) => PluginOption;

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

@@ -1,20 +1,33 @@
-import { IRWSViteLoader } from "./loader.type";
-import { RWSScssPlugin } from '../rws_scss_plugin';
+import { IRWSViteLoader, SCSSLoaderParams } from "./loader.type";
 import path from 'path';
+import fs from 'fs';
 
-export default (cssPlugin: RWSScssPlugin): IRWSViteLoader => ({
+const loader: IRWSViteLoader<SCSSLoaderParams> = async (params: SCSSLoaderParams) => ({
     name: 'rws-scss',
+    enforce: 'pre',
     async transform(code: string, id: string) {
-        if (!id.endsWith('.scss')) return null;
         
-        const result = await cssPlugin.compileScssCode(
-            code,
-            path.dirname(id) + '/styles',                    
-        );
+        if (!id.endsWith('.scss')) return null;
         
-        return {
-            code: result.code,
-            map: null
-        };
+        if(code.indexOf('@save') > -1){
+            const result = await params.scssPlugin.compileScssCode(
+                code,
+                path.dirname(id),                    
+            );            
+
+            const fileName: string = id.split('/').pop() as string;
+            const dirName: string = params.cssOutputPath ? params.cssOutputPath : path.dirname(id);
+
+            const fileNameArray = fileName.split('.');
+
+            const newFileName: string = path.join(dirName, fileNameArray.at(-2) + '.css')
+
+            
+            fs.writeFileSync(newFileName, result.code);
+        }
+    
+        return { code: '' };
     }
-});
+});
+
+export default loader;

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

@@ -1,19 +1,313 @@
-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;
+import { IRWSViteLoader, TSLoaderParams } from "./loader.type";
+import fs from 'fs';
+import path from 'path';
+
+import chalk from 'chalk';
+import md5 from 'md5';
+import JSON5 from 'json5'
+import { RWSScssPlugin } from "../rws_scss_plugin";
+
+interface DecoratorArgsData {
+    template?: string;
+    styles?: string;
+    ignorePackaging?: boolean;
+    debugPackaging?: boolean;
+    fastElementOptions?: any;
+}
+
+interface ViewDecoratorData {
+    decoratorArgs?: DecoratorArgsData;
+    tagName: string;
+    className: string;
+    classNamePrefix?: string | null; // Added this field
+}
+
+interface DecoratorExtract {
+    viewDecoratorData?: ViewDecoratorData | null;
+    replacedDecorator: string;
+}
+
+// Cache manager - możesz to wydzielić do osobnego pliku
+class CacheManager {
+    private cache: Map<string, string> = new Map();
+    private customOptions: any;
+
+    constructor(customOptions: any = null) {
+        this.customOptions = customOptions;
+    }
+
+    getCachedItem(filePath: string, hash: string): string | null {
+        const key = `${filePath}:${hash}`;
+        return this.cache.get(key) || null;
+    }
 
+    cacheItem(filePath: string, content: string, originalContent: string): void {
+        const key = `${filePath}:${md5(originalContent)}`;
+        this.cache.set(key, content);
+    }
+}
+
+// Helper functions - też możesz wydzielić
+class LoadersHelper {
+    static extractRWSViewArgs(content: string, noReplace = false): DecoratorExtract | 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: RegExpExecArray | null = null;;
+        let tagName: string | null = null;
+        let className: string | null = null;
+        let classNamePrefix: string | null = null;
+        let decoratorArgs: DecoratorArgsData | null = 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) {
+              if(match){
+                classNamePrefix = match;
+              }
+            }
+      
+            if (groupIndex === 4) {
+              className = match;
+            }
+          });
+        }
+      
+        if(!tagName || !className){
+          return null;
+        }
+      
+        let processedContent = content;
+      
+        let fastOptions = _defaultRWSLoaderOptions.fastOptions;
+        decoratorArgs = decoratorArgs as unknown as DecoratorArgsData;
+        if (decoratorArgs?.fastElementOptions) {
+          fastOptions = decoratorArgs.fastElementOptions;
+        }
+       
+        let replacedDecorator: string | null = null;
+      
+        if(!noReplace){
+          const [addedParamDefs, addedParams] = this._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 {
-            code,
-            map: null
-        };
+          viewDecoratorData: {
+            tagName,
+            className,
+            classNamePrefix,
+            decoratorArgs
+          },
+          replacedDecorator: replacedDecorator || ''  // Ensure it's never null
+        }
+    }
+
+    private static _extractRWSViewDefs(fastOptions = {}, decoratorArgs = {})
+    {  
+    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];
+    }
+
+    static async getStyles(plugin: RWSScssPlugin, filePath: string, addDependency: (path: string) => void, templateExists: boolean, stylesPath?: string, isDev?: boolean): 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 plugin.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;
+      }
+      
+      static async getTemplate(filePath: string, addDependency: (path: string) => void, templateName?: string, isDev?: 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];
+      }
+}
+
+// Główny loader
+const loader: IRWSViteLoader<TSLoaderParams> = async (params: TSLoaderParams) => {
+    
+    const cacheManager = new CacheManager();
+    
+    return {
+        name: 'rws-typescript',
+        enforce: 'pre',
+        async transform(code: string, id: string) {
+
+            if (!id.endsWith('.ts')) return null;
+            if (id.endsWith('.debug.ts') || id.endsWith('.d.ts')) return null;
+            if (id.includes('node_modules') && !id.includes('@rws-framework')) return null;
+
+            let processedContent: string = code;
+            const isDev: boolean = params.dev;
+            let isIgnored: boolean = false;
+            let isDebugged: boolean = false;
+
+            try {
+                const decoratorExtract: DecoratorExtract | null = await LoadersHelper.extractRWSViewArgs(processedContent);
+                const decoratorData: ViewDecoratorData | null = decoratorExtract?.viewDecoratorData || null;                
+
+                const cachedCode: string = processedContent;
+                // const cachedTS = cacheManager.getCachedItem(id, md5(cachedCode as string));
+
+                // if (cachedTS) {
+                //     return {
+                //         code: cachedTS,
+                //         map: null
+                //     };
+                // }
+
+                if (!decoratorData) {
+                    return null;
+                }
+
+                let templateName: string | null = decoratorData.decoratorArgs?.template || null;
+                let stylesPath = decoratorData.decoratorArgs?.styles || null;
+                isIgnored = decoratorData.decoratorArgs?.ignorePackaging || false;
+                isDebugged = decoratorData.decoratorArgs?.debugPackaging || false;
+
+                const tagName = decoratorData.tagName;
+                const className = decoratorData.className;
+
+                const defaultTemplatePath = path.resolve(path.dirname(id), 'template.html');
+                const defaultStylesPath = path.resolve(path.dirname(id), 'styles', 'layout.scss');
+
+                if(!templateName && fs.existsSync(defaultTemplatePath)){
+                    templateName ='template';
+                }
+
+                if(!stylesPath && fs.existsSync(defaultStylesPath)){
+                    stylesPath ='styles/layout.scss';
+                }
+                console.log({stylesPath, templateName, tagName})
+
+                if (tagName && templateName && stylesPath) {
+                    const [template, htmlFastImports, templateExists] = await LoadersHelper.getTemplate(
+                        id,
+                        (path) => this.addWatchFile(path),
+                        templateName,
+                        isDev
+                    );
+
+                    const styles = await LoadersHelper.getStyles(
+                        params.scssPlugin,
+                        id,
+                        (path) => this.addWatchFile(path),
+                        templateExists as boolean,
+                        stylesPath,
+                        isDev
+                    );
+
+                    console.log({styles})
+
+                    if (className && decoratorExtract?.replacedDecorator) {
+                        processedContent = `${template}\n${styles}\n${decoratorExtract.replacedDecorator}`;
+                    }
+
+                    processedContent = `${htmlFastImports ? htmlFastImports + '\n' : ''}${processedContent}`;
+                }
+
+                const debugTsPath = id.replace('.ts', '.debug.ts');
+
+                if (fs.existsSync(debugTsPath)) {
+                    fs.unlinkSync(debugTsPath);
+                }
+
+                if (isDebugged) {
+                    console.log(chalk.red('[RWS BUILD] Debugging into: ' + debugTsPath));
+                    fs.writeFileSync(debugTsPath, processedContent);
+                }
+
+                cacheManager.cacheItem(id, processedContent, cachedCode);
+
+                return {
+                    code: processedContent,
+                    map: null
+                };
+            } catch (e) {
+                console.log(chalk.red('RWS Typescript loader error:'));
+                console.error(e);
+                throw new Error('RWS Build failed on: ' + id);
+            }
+        }
+    };
+};
+
+export default loader;

package/cfg/build_steps/vite/rws_scss_plugin.ts

@@ -39,21 +39,18 @@ class RWSScssPlugin {
     return;
   }
 
-  async compileFile(scssPath): Promise<{ code: string, dependencies: string[]}> 
+  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);
+      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);
+      return await this._scss_compiler.compileScssCode(scssCode, scssPath, null, scssPath);
   }
-
+  
   writeCssFile(scssFilePath: string, cssContent: string): string
   {
     return this._scss_fs.writeCssFile(scssFilePath, cssContent);

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

@@ -1,101 +1,95 @@
-const sass = require('sass');
-const path = require('path');
-const chalk = require('chalk');
-const emojiRegex = require('emoji-regex');
+import sass from 'sass-embedded';
+import path from 'path';
+import chalk from 'chalk';
+import emojiRegex from '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[]
-}
-{  
+async function compileScssCode(scssCode: string, fileRootDir: string, createFile:boolean = false, filePath: string | null = null, minify: boolean = false): Promise<{
+    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);
+        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', '');
-      }
+        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]});
+    try {                    
 
-      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);
+        const result: sass.CompileResult = await sass.compileStringAsync(scssCode, {
+            loadPaths: [fileRootDir],
+            style: minify ? "compressed" : "expanded",
+            sourceMap: false
+        });
 
-      console.error(err);
-      throw err;
-  };
-  }
+        let compiledCode = result.css.toString();
 
-  function checkForImporterType(_module, checkTypeExt) {
-    let importingFileExtension = '';
+        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;
-      }
+        importingFileExtension = path.extname(_module.issuer.resource);
+        if (importingFileExtension === ('.' + checkTypeExt)) {
+            return true;
+        }
     } else {
-      return false;
+        return false;
     }
-
     return false
-  }
+}
 
-  function replaceEmojisWithQuestionMark(code, componentDir) {
+function replaceEmojisWithQuestionMark(code, componentDir) {
     const regex = emojiRegex();
     let hasEmoji = false;
-    
     const result = code.replace(regex, (match) => {
-      hasEmoji = true;
-      return '?';
+        hasEmoji = true;
+        return '?';
     });
-  
     if (hasEmoji) {
-      console.log(chalk.yellow(`Emojis in css detected and replaced with "?" in "${path.dirname(componentDir)}" component`));
+        console.log(chalk.yellow(`Emojis in css detected and replaced with "?" in "${path.dirname(componentDir)}" component`));
     }
-  
     return result;
-  }
+}
 
-  function removeComments(code) {
+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) {
+}
+
+export default function(element) {
     return {
         checkForImporterType: checkForImporterType.bind(element),
         compileScssCode: compileScssCode.bind(element)
     };
-  };
+};

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

@@ -2,7 +2,7 @@ const fs = require('fs');
 const path = require('path');
 const FONT_REGEX = /url\(['"]?(.+?\.(woff|woff2|eot|ttf|otf))['"]?\)/gm;
 
-const _scss_import_builder = require('./_import');
+import _scss_import_builder from './_import';
 let _scss_import: any = null;
 
 function hasFontEmbeds(css) {

package/cfg/build_steps/vite/types.ts

@@ -1,5 +1,6 @@
 export type RWSViteConfig = {
     dev: boolean
+    cssOutputPath?: string,
     tsConfigPath: string
     defines?: {
         [key: string]: string

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@rws-framework/client",
     "private": false,
-    "version": "2.13.0",
+    "version": "2.13.1",
     "main": "src/index.ts",
     "scripts": {
         "docs": "typedoc --tsconfig ./tsconfig.json"
@@ -35,11 +35,11 @@
         "he": "^1.2.0",
         "json5": "^2.2.3",
         "lodash": "^4.17.21",
-        "moment": "^2.29.4",        
+        "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",      
+        "sanitize-html": "^2.12.1",
         "socket.io-client": "^4.7.2",
         "upload": "^1.3.2",
         "url-router": "^13.0.0",
@@ -54,25 +54,26 @@
         "@types/he": "^1.2.3",
         "@types/sanitize-html": "^2.11.0",
         "@types/uuid": "^9.0.7",
-        "@typescript-eslint/parser": "^5.0.0",        
+        "@typescript-eslint/parser": "^5.0.0",
         "browser-sync": "^2.29.3",
         "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",        
+        "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",
-        "raw-loader": "^4.0.2",        
-        "source-map": "^0.7.4",        
+        "raw-loader": "^4.0.2",
+        "source-map": "^0.7.4",
         "source-map-support": "^0.5.21",
-        "stacktrace-gps": "^3.1.2",     
+        "stacktrace-gps": "^3.1.2",
         "sass": "1.69.7",
         "sass-loader": "^13.3.2",
         "scss-loading-animations": "^1.0.1",
+        "sass-embedded": "^1.83.4",
         "speed-measure-webpack-plugin": "^1.5.0",
         "style-loader": "^3.3.3",
         "terser-webpack-plugin": "^5.3.9",