@medyll/cssfabric 0.2.0 → 0.2.3

package/src/cssfabric/modules/vars.scss

@@ -0,0 +1,49 @@
+@use "../_utils";
+@use "sass:color";
+@use '../../cssfabric/modules/color/color-vars';
+@use '../../cssfabric/modules/color/color-build'  as colorBuild;
+@use "../../cssfabric/modules/box/box-vars" as box;
+@use "../../cssfabric/modules/box/box-build" as boxBuild;
+@use "../../cssfabric/modules/theme/theme-build" as themeBuild;
+@use "../../cssfabric/modules/text/text-build" as textBuild;
+
+@import 'cssfabric-config';
+
+$themes: map-get($cssfabric-config, themes) !default;
+$theme-light: map-get($themes, light) !default;
+$theme-dark: map-get($themes, dark) !default;
+
+/* cssFabric vars yes  */
+:root {
+  @include themeBuild.themeCssVars($theme-color-primary,$theme-color-secondary,$theme-color-tertiary);
+  @include colorBuild.buildColorCssVars();
+  /* boxes */
+  @include boxBuild.pmbCssVars();
+  /* text */
+  @include textBuild.textCssVars();
+  /* shadows */
+  @include boxBuild.shadowsCssVars();
+  /* themes */
+  @include themeBuild.themeBaseVars($theme-light);
+
+  --theme-color-border:  #{color.change($theme-color-foreground,$alpha:0.2)};
+  &,[data-theme="light"] {
+    @include themeBuild.themeBaseVars($theme-light);
+
+    --theme-color-border: #{color.change($theme-color-foreground,$alpha:0.2)};
+    --theme-color-overlay: rgba(208, 191, 151, 0.2);
+  }
+
+  [data-theme="dark"] {
+    @include themeBuild.themeBaseVars($theme-dark);
+
+    --theme-color-border:  #{color.change($theme-dark-color-foreground,$alpha:0.3)};
+    --theme-color-overlay: rgba(255, 255, 255, 0.1);
+  }
+}
+
+
+
+
+
+

package/src/cssfabric/modules/zindex/_zindex-vars.scss

@@ -0,0 +1,14 @@
+$zindex-metadata: (
+        title: zindex,
+        tag: zI,
+        description: "cssfabric zindex module to set z-index on all html elements",
+);
+$zindex-config: (
+        z_groups: (
+                a,
+                z
+        ),
+);
+$zindex-docs: (
+        z_groups: _,
+);

package/src/cssfabric/modules/zindex/zindex.scss

@@ -0,0 +1,15 @@
+
+@use 'zindex-vars';
+$zindex-config: zindex-vars.$zindex-config;
+// load scss config file
+@use '../../_utils';
+
+// read variables
+$z_groups: map-get($zindex-config, z_groups);
+
+
+@for $z_value from 0 through 10 {
+  .zI-#{$z_value} {
+    z-index: (($z_value) * 100);
+  }
+}

package/src/hooks.ts

@@ -0,0 +1,27 @@
+import cookie from 'cookie';
+import {v4 as uuid} from '@lukeed/uuid';
+import type {Handle} from '@sveltejs/kit';
+
+export const handle: Handle = async ({event, resolve}) => {
+  const cookies       = cookie.parse(event.request.headers.get('cookie') || '');
+  event.locals.userid = cookies.userid || uuid();
+  
+  const response = await resolve(event, {
+    ssr          : false,
+    transformPage: ({html}) => html.replace('old', 'new')
+  });
+  
+  if (!cookies.userid) {
+    // if this is the first time the user has visited this app,
+    // set a cookie so that we recognise them when they return
+    response.headers.set(
+      'set-cookie',
+      cookie.serialize('userid', event.locals.userid, {
+        path    : '/',
+        httpOnly: true
+      })
+    );
+  }
+  
+  return response;
+};

package/src/index.d.ts

@@ -0,0 +1,3 @@
+declare const cssfabric;
+
+export default cssfabric;

package/src/index.ts

@@ -0,0 +1,4 @@
+
+import cssfabric from "./lib/scripts/cssfabric"
+
+export default cssfabric

package/{_generated → src/lib/_generated}/cssFabric.vars.json

@@ -1,8 +1,8 @@
 {"cssfabric":{"modules":{"animation":{"_data": {"attention_props": [], "in_out_props": {"back": []}}, "_metadata": {"title": "animation", "description": "cssfabric simplest animation module"}, "_docs": {"attention_props": "", "in_out_props": ""}},
 "box":{"_data": {"unit-config": "rem", "border-unit-config": "px", "unit-size-config": 0.5, "unit-border-size-config": 1, "sizes-config": 12, "border-sizes-px-config": 3, "shadows-steps": 5, "shadows_step_multiplier": 2, "position-shorthand-config": "pos", "display-shorthand-config": "dsp", "shadow-shorthand-config": "shad", "border-shorthand-config": "border", "padding-shorthand-config": "pad", "margin-shorthand-config": "marg", "cssProps": {"borderShorthands": {"_": ["top", "bottom", "left", "right"], "t": "top", "b": "bottom", "l": "left", "r": "right", "all": ["top", "bottom", "left", "right"], "u": ["bottom", "left", "right"], "ii": ["left", "right"], "tb": ["top", "bottom"]}, "positionProps": {"abs": "absolute", "rel": "relative", "stat": "static", "fix": "fixed", "sticky": "sticky"}, "displayProps": {"block": "block", "none": "none", "inline": "inline", "block-inline": "inline-block", "flex-inline": "inline-flex", "tbl": "table", "tbl-row": "table-row", "tbl-cell": "table-cell", "tbl-column": "table-column"}}}, "_metadata": {"title": "box", "tag": "box", "description": "cssfabric box module to set heights, paddings, margins and shadows on all html elements"}, "_docs": {"attributes": {"padding": {"tag": "pad", "keys": ["_", "t", "b", "l", "r", "all", "u", "ii", "tb"], "values": {"_": "_", "1": "0.5rem", "2": "1rem", "3": "1.5rem", "4": "2rem", "5": "2.5rem", "6": "3rem", "7": "3.5rem", "8": "4rem", "9": "4.5rem", "10": "5rem", "11": "5.5rem", "12": "6rem"}, "levels": {"_": ["_", 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]}, "about": "padding properties for html elements"}, "margin": {"tag": "marg", "keys": ["_", "t", "b", "l", "r", "all", "u", "ii", "tb"], "values": {"_": "_", "1": "0.5rem", "2": "1rem", "3": "1.5rem", "4": "2rem", "5": "2.5rem", "6": "3rem", "7": "3.5rem", "8": "4rem", "9": "4.5rem", "10": "5rem", "11": "5.5rem", "12": "6rem"}, "levels": {"_": ["_", 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]}, "about": "margin properties for html elements"}, "border": {"tag": "border", "keys": ["_", "t", "b", "l", "r", "all", "u", "ii", "tb"], "values": {"_": "_", "1": "1px", "2": "2px", "3": "3px"}, "levels": {"_": ["_", 1, 2, 3]}, "about": "border properties for html elements"}, "radius": {"tag": "radiusGuy"}, "shadow": {"tag": "shad", "values": {"2": "0.83333333331.724137931", "4": "1.66666666673.4482758621", "8": "3.33333333336.8965517241", "16": "6.666666666713.7931034483", "32": "13.333333333327.5862068966"}, "levels": {"_": [2, 4, 8, 16, 32]}, "about": "applying shadows give depth and levels to your design"}}}},
 "base":{"_data": {"cfg-has-dimension-strict": true, "CFG_HAS_DIMENSION_MIN": true, "CFG_HAS_DIMENSION_MAX": true, "size_step": "0.5rem", "sizes": {"tiny": 32, "small": 64, "medium": 128, "large": 256, "full": "100%"}}, "_metadata": {"title": "base", "tag": "base", "description": "cssfabric base config variables"}, "_docs": []},
-"color":{"_data": {"gray-config": {"start": "#f4f4f4", "end": "#999", "steps": 5}, "color-types-config": ["color", "bg", "bg-themed", "border-color"], "theme": {"primary": "#201700", "secondary": "#D14B02", "tertiary": "#88D102", "foreground": "#282230", "background": "#ffffff", "paper": "#f1f1f1"}, "scheme": {"discrete": "#ccc", "success": "green", "info": "#FFDD57FF", "warning": "#e6b905", "alert": "#ff7300", "error": "red"}, "palette": {"yellow": "#ffb900", "orange": "#d83b01", "red": "#d13438", "magenta": "#b4009e", "purple": "#5c2d91", "green": "#107c10", "teal": "#008272", "blue": "#0078d4", "dark": "#323232"}, "gray": "getGraySteps(5, #f4f4f4, #999)"}, "_metadata": {"title": "color", "title_tag": "its about colors", "description": "cssfabric color system: its about colors"}, "_docs": {"attributes": {"color": {"tag": "color", "keys": ["scheme", "palette", "gray"], "levelsLinked": {"scheme": ["discrete", "success", "info", "warning", "alert", "error"], "palette": ["yellow", "orange", "red", "magenta", "purple", "green", "teal", "blue", "dark"], "gray": ["getGraySteps(5, #f4f4f4, #999)"]}, "levelsDeclin": {"palette": ["_", "lighter", "light", "dark", "darker", "complement"]}, "about": "color for text level html elements"}, "background-color": {"tag": "bg", "keys": ["scheme", "palette", "gray"], "levelsLinked": {"scheme": ["discrete", "success", "info", "warning", "alert", "error"], "palette": ["yellow", "orange", "red", "magenta", "purple", "green", "teal", "blue", "dark"], "gray": ["getGraySteps(5, #f4f4f4, #999)"]}, "levelsDeclin": {"palette": ["_", "lighter", "light", "dark", "darker", "complement"]}, "about": "background colors"}, "background-themed": {"tag": "bg-themed", "keys": ["scheme", "palette", "gray"], "levelsLinked": {"gray": ["getGraySteps(5, #f4f4f4, #999)"], "scheme": ["discrete", "success", "info", "warning", "alert", "error"], "palette": ["yellow", "orange", "red", "magenta", "purple", "green", "teal", "blue", "dark"]}, "levelsDeclin": {"palette": ["_", "lighter", "light", "dark", "darker", "complement"]}, "about": "same as background-color, but with added contrasted color to text"}, "border-color": {"tag": "border-color", "keys": ["palette", "gray"], "levelsLinked": {"gray": ["getGraySteps(5, #f4f4f4, #999)"], "scheme": ["discrete", "success", "info", "warning", "alert", "error"], "palette": ["yellow", "orange", "red", "magenta", "purple", "green", "teal", "blue", "dark"]}, "about": "border colors are slightly darker to maximize surrounding effect"}}}},
 "flex":{"_data": {"moduleName": "flex", "moduleNameShort": "flex", "horCode": "h", "vertCode": "v", "gridFullWidth": "main", "grow-shrink-steps": 2, "cssProps": {"flexWrap": {"wrap": "wrap", "wrap-reverse": "wrap-reverse"}, "grid-justify": {"start": "flex-start", "end": "flex-end", "between": "space-between", "stretch": "stretch", "center": "flex-center"}, "grid-items": {"baseline": "baseline", "stretch": "stretch", "start": "flex-start", "center": "center", "end": "flex-end"}, "grid-content": {"start": "flex-start", "center": "center", "end": "flex-end", "between": "space-between", "equal": "space-evenly"}}, "cssItemsProps": {"self": {"start": "flex-start", "end": "flex-end", "stretch": "stretch"}}}, "_metadata": {"title": "flex", "tag": "flex", "description": "cssfabric flex system module"}, "_docs": {"attributes": {"grid": {"tag": "flex", "keys": ["v", "h"], "classNames": {"align": ["top", "middle", "bottom", "left", "right", "center", "middle-center", "stretch"], "grid": ["wrap", "wrap-reverse"]}, "about": "a classic flex grid system, and hey, it gets height !"}, "self": {"tag": "self", "keys": ["start", "end", "stretch"], "about": "flex children specific classnames"}}}},
+"color":{"_data": {"gray-config": {"start": "#f4f4f4", "end": "#999", "steps": 5}, "color-types-config": ["color", "bg", "bg-themed", "border-color"], "theme": {"primary": "#201700", "secondary": "#D14B02", "tertiary": "#88D102", "foreground": "#282230", "background": "#ffffff", "paper": "#f1f1f1"}, "scheme": {"discrete": "#ccc", "success": "green", "info": "#FFDD57FF", "warning": "#e6b905", "alert": "#ff7300", "error": "red"}, "palette": {"yellow": "#ffb900", "orange": "#d83b01", "red": "#d13438", "magenta": "#b4009e", "purple": "#5c2d91", "green": "#107c10", "teal": "#008272", "blue": "#0078d4", "dark": "#323232"}, "gray": "getGraySteps(5, #f4f4f4, #999)"}, "_metadata": {"title": "color", "title_tag": "its about colors", "description": "cssfabric color system: its about colors"}, "_docs": {"attributes": {"color": {"tag": "color", "keys": ["scheme", "palette", "gray"], "levelsLinked": {"scheme": ["discrete", "success", "info", "warning", "alert", "error"], "palette": ["yellow", "orange", "red", "magenta", "purple", "green", "teal", "blue", "dark"], "gray": ["getGraySteps(5, #f4f4f4, #999)"]}, "levelsDeclin": {"palette": ["_", "lighter", "light", "dark", "darker", "complement"]}, "about": "color for text level html elements"}, "background-color": {"tag": "bg", "keys": ["scheme", "palette", "gray"], "levelsLinked": {"scheme": ["discrete", "success", "info", "warning", "alert", "error"], "palette": ["yellow", "orange", "red", "magenta", "purple", "green", "teal", "blue", "dark"], "gray": ["getGraySteps(5, #f4f4f4, #999)"]}, "levelsDeclin": {"palette": ["_", "lighter", "light", "dark", "darker", "complement"]}, "about": "background colors"}, "background-themed": {"tag": "bg-themed", "keys": ["scheme", "palette", "gray"], "levelsLinked": {"gray": ["getGraySteps(5, #f4f4f4, #999)"], "scheme": ["discrete", "success", "info", "warning", "alert", "error"], "palette": ["yellow", "orange", "red", "magenta", "purple", "green", "teal", "blue", "dark"]}, "levelsDeclin": {"palette": ["_", "lighter", "light", "dark", "darker", "complement"]}, "about": "same as background-color, but with added contrasted color to text"}, "border-color": {"tag": "border-color", "keys": ["palette", "gray"], "levelsLinked": {"gray": ["getGraySteps(5, #f4f4f4, #999)"], "scheme": ["discrete", "success", "info", "warning", "alert", "error"], "palette": ["yellow", "orange", "red", "magenta", "purple", "green", "teal", "blue", "dark"]}, "about": "border colors are slightly darker to maximize surrounding effect"}}}},
 "grid":{"_data": {"moduleName": "grid", "moduleNameShort": "grid", "horCode": "h", "vertCode": "v", "gridFullWidth": "main", "grow-shrink-steps": 4, "cssProps": {"flexWrap": {"wrap": "wrap", "wrap-reverse": "wrap-reverse"}, "grid-justify": {"start": "flex-start", "end": "flex-end", "between": "space-between", "stretch": "stretch", "center": "flex-center"}, "grid-items": {"baseline": "baseline", "stretch": "stretch", "start": "flex-start", "center": "center", "end": "flex-end"}, "grid-content": {"start": "flex-start", "center": "center", "end": "flex-end", "between": "space-between", "equal": "space-evenly"}}, "cssItemsProps": {"self": {"start": "flex-start", "end": "flex-end", "stretch": "stretch"}}, "grid-max-rows": 8, "grid-max-cols": 12}, "_metadata": {"title": "grid", "tag": "grid", "description": "cssfabric flex grid system module"}, "_docs": {"attributes": {"grid": {"tag": "grid", "keys": ["v", "h"], "classNames": {"align": ["top", "middle", "bottom", "left", "right", "center", "middle-center", "stretch"], "grid": ["wrap", "wrap-reverse"]}, "about": "a classic grid system"}, "self": {"tag": "self", "keys": ["start", "end", "stretch"], "about": "grid children specific classnames"}}}},
 "menu":{"_data": {"menu_class_name": "menu", "menu_class_name_short": "ul", "orientations": {"v": "vertical", "h": "horizontal"}, "menu_item_class_name": "menu-item", "menu_item_class_name_short": "li", "menu_item_disabled_tag": "disabled", "menu_item_selected_tag": "selected", "menu_dropdown_tag": "drop", "menu_dropdown_open": "open", "menu_dropdown_close": "close"}, "_metadata": {"title": "menu", "tag": "ul", "description": "cssfabric menu module to set menu style"}, "_docs": {"attributes": {"menu": {"tag": "menu", "keys": ["h", "v"]}}}},
 "overflow":{"_data": {"overflow_props": ["overflow", "overflow-x", "overflow-y"], "overflow_values": ["visible", "hidden", "clip", "scroll", "auto"], "cssProps": {"overflow": {"visible": "visible", "hidden": "hidden", "clip": "clip", "scroll": "scroll", "_": "auto"}}}, "_metadata": {"title": "overflow", "tag": "flow", "description": "cssfabric overflow module to set overflow styles on all html elements"}, "_docs": {"attributes": {"overflow": {"tag": "flow", "keys": ["visible", "hidden", "clip", "scroll", "auto"]}, "overflowX": {"tag": "flowX", "keys": ["visible", "hidden", "clip", "scroll", "auto"]}, "overflowY": {"tag": "flowY", "keys": ["visible", "hidden", "clip", "scroll", "auto"]}}}},

package/src/lib/_generated/index.d.ts

@@ -0,0 +1,3 @@
+declare const module;
+
+export default module;

package/{init/importCssVars.js → src/lib/init/importCssVars.ts}

@@ -1,2 +1,3 @@
-// copy css vars file
-export {};
+// copy css vars file
+
+export {}

package/src/lib/scripts/cssfabric.ts

@@ -0,0 +1,54 @@
+import jsonConfig              from "../_generated/cssFabric.vars.json" ;
+import cssfabricClassNames from "./cssfabricClassNames";
+
+export type IFabricConfModulePart = Record<string, any>;
+export type IFabricConfModuleDataPart = Record<string, any>;
+export type IFabricConfModuleMetaDataPart = Record<string, any>;
+export type IFabricConfModuleDocsPart = Record<string, any>;
+export type TFabricConfModuleDocsAttributesPart = Record<string, any>;
+
+//
+const getModuleList = (): Record<string, any> => {
+    return jsonConfig["cssfabric"]?.["modules"] || {};
+};
+
+const getModuleConfig = (module?: string): IFabricConfModulePart => {
+    if (module) return jsonConfig["cssfabric"]?.["modules"]?.[module] || {};
+    return jsonConfig;
+};
+
+const getModuleData = (module?: string): IFabricConfModuleDataPart => {
+    if (module) return jsonConfig["cssfabric"]?.["modules"]?.[module]?.["_data"] || {};
+    return jsonConfig;
+};
+
+const getModuleMetaData = (module?: string): IFabricConfModuleMetaDataPart => {
+    if (module)
+        return jsonConfig["cssfabric"]?.["modules"]?.[module]?.["_metadata"] || {};
+    return jsonConfig;
+};
+
+const getModuleDocs = (module?: string): IFabricConfModuleDocsPart => {
+    if (module)
+        return jsonConfig["cssfabric"]?.["modules"]?.[module]?.["_docs"] || {};
+    return jsonConfig;
+};
+
+const getModuleDocsAttributes = (module?: string): TFabricConfModuleDocsAttributesPart => {
+    if (module)
+        return jsonConfig["cssfabric"]?.["modules"]?.[module]?.["_docs"]?.["attributes"] || {};
+    return jsonConfig;
+};
+
+export default {
+    getModuleList,
+    getModuleConfig,
+    getModuleData,
+    getModuleMetaData,
+    getModuleDocs,
+    getModuleDocsAttributes,
+    getClassNames: cssfabricClassNames,
+    getModuleClassNames: cssfabricClassNames,
+    getModuleTagClassNames: cssfabricClassNames.getModuleTagClassNames,
+    getModuleTagDebug: cssfabricClassNames.getModuleTagDebug,
+};

package/{scripts/cssfabricClassNames.js → src/lib/scripts/cssfabricClassNames.ts}

@@ -1,48 +1,94 @@
-import cssfabric from "./cssfabric";
-import utils from "./utils";
-function loopIt(props) {
-    const { module } = props;
-    const moduleAttributes = cssfabric.getModuleDocsAttributes(module);
+import cssfabric from "./cssfabric"
+import utils     from "./utils";
+
+export interface IListCssfabricClassNamesProps {
+    module: string;
+    moduleAttribute: any;
+    outputStyle?: 'default' | 'debug';
+}
+
+type TFabricClassName = string;
+type TClassNameFragment = string | number;
+
+type TCollect = string[];
+type TFabricClassNameList = TFabricClassName[];
+type TFabricClassNameListFragments = TClassNameFragment[];
+
+type TGuess = any;
+type TLevelKey = string;
+
+type level = string[];
+
+type IModuleLevels = level | level[] | [] | any[] | Record<string, any[]>;
+
+
+export interface ILoopIt {
+    module: string;
 }
-function cssfabricClassNames(props) {
-    const { module, moduleAttribute, outputStyle } = props;
+
+function loopIt(props: ILoopIt) {
+    
+    const {module}         = props;
     const moduleAttributes = cssfabric.getModuleDocsAttributes(module);
-    const fabricAttributes = moduleAttributes[moduleAttribute];
-    const moduleTag = fabricAttributes["tag"];
-    const moduleKeys = fabricAttributes["keys"] || undefined;
-    const moduleLevels = fabricAttributes["levels"] || undefined;
-    const moduleLevelsLinked = fabricAttributes["levelsLinked"] || undefined;
-    const moduleLevelsExtended = fabricAttributes["levelsDeclin"] || undefined;
-    const moduleClassNames = fabricAttributes["classNames"] || undefined;
-    let finalOutput = [];
-    let finalOutputDebug = {};
+    
+}
+
+function cssfabricClassNames(props: IListCssfabricClassNamesProps) {
+    
+    const {module, moduleAttribute, outputStyle} = props;
+    const moduleAttributes                       = cssfabric.getModuleDocsAttributes(module);
+    
+    const fabricAttributes                  = moduleAttributes[moduleAttribute];
+    const moduleTag                         = fabricAttributes["tag"];
+    const moduleKeys: any[]                 = fabricAttributes["keys"] || undefined;
+    const moduleLevels: IModuleLevels       = fabricAttributes["levels"] || undefined;
+    const moduleLevelsLinked: IModuleLevels = fabricAttributes["levelsLinked"] || undefined;
+    const moduleLevelsExtended              = fabricAttributes["levelsDeclin"] || undefined;
+    const moduleClassNames                  = fabricAttributes["classNames"] || undefined;
+    
+    let finalOutput: TCollect                 = [];
+    let finalOutputDebug: Record<string, any> = {};
+    
+    
     return doParse(outputStyle);
-    function doParse(mode) {
-        let keyList, levelList, levelListLinked, levelListDeclin;
+    
+    function doParse(mode?: string) {
+        
+        let keyList,
+            levelList,
+            levelListLinked,
+            levelListDeclin;
+        
         const finalOut = [];
         const debugOut = {};
+        
         if (moduleKeys && moduleKeys.length) {
             // beware of any [][]
             keyList = concatenateWithKey(moduleTag, moduleKeys);
         }
+        
         if (moduleLevels && Object.keys(moduleLevels).length) { // object !!!
             levelList = Object.keys(moduleLevels).map((level) => {
-                let val = moduleLevels[level];
+                let val = moduleLevels[level]
                 return concatenateWithKey(level, val);
             }).flat();
         }
+        
         if (moduleLevelsLinked && Object.keys(moduleLevelsLinked).length) {
             levelListLinked = Object.keys(moduleLevelsLinked).map((level) => {
-                let val = moduleLevelsLinked[level];
+                let val = moduleLevelsLinked[level]
                 return concatenateWithKey(level, val);
             }).flat();
         }
+        
+        
         if (moduleLevelsExtended && Object.keys(moduleLevelsExtended).length) {
             levelListDeclin = Object.keys(moduleLevelsExtended).map((level) => {
-                let val = moduleLevelsLinked[level];
+                let val = moduleLevelsLinked[level]
                 return concatenateWithKey(level, val);
             }).flat();
         }
+        
         // prefix all now , and link
         // colors :
         if (keyList && !moduleLevels && !moduleLevelsLinked) {
@@ -50,18 +96,24 @@ function cssfabricClassNames(props) {
             finalOut.push(keyList);
             registerDebug('default', keyList);
         }
+        
         if (moduleKeys && (moduleLevels || moduleLevelsLinked)) {
             // base
             if (moduleLevels) {
                 let tg = keyList.map(x => {
+                    
                     let tre = Object.keys(moduleLevels).map((level) => {
-                        let val = moduleLevels[level];
+                        let val = moduleLevels[level]
+                        
                         let debugKey = (x !== '_' && x.toString().charAt(0) !== '_') ? x : level;
-                        debugKey = (level.toString().charAt(0) === '_') ? debugKey : debugKey + '-' + level;
-                        registerDebug(x, concatenateWithKey(debugKey, val), level);
+                        debugKey = (level.toString().charAt(0)==='_')? debugKey : debugKey + '-' + level
+                        registerDebug(x, concatenateWithKey(debugKey , val), level);
+                        
                         return concatenateWithKey(level, val);
-                    }).flat(4);
+                    }).flat(4)
+                    
                     return concatenateWithKey(x, tre);
+                    
                 });
                 // is it declinated ? only colors, so nope
                 // export
@@ -71,10 +123,12 @@ function cssfabricClassNames(props) {
             if (moduleLevelsLinked) {
                 //
                 let yt = Object.values(moduleKeys).map(moduleKey => {
+                    
                     if (moduleKeys.includes(moduleKey)) {
                         let out = [];
                         // linked are here !!
                         registerDebug('linked', concatenateWithKey(moduleTag + '-' + moduleKey, moduleLevelsLinked[moduleKey]), moduleKey);
+                        
                         out.push(concatenateWithKey(moduleKey, moduleLevelsLinked[moduleKey]));
                         // is it declinated ?
                         if (moduleLevelsExtended && moduleLevelsExtended[moduleKey]) {
@@ -82,65 +136,81 @@ function cssfabricClassNames(props) {
                             out.push(moduleLevelsLinked[moduleKey].map((z) => {
                                 // iddem
                                 registerDebug('declinated', concatenateWithKey(moduleTag + '-' + moduleKey + '-' + z, moduleLevelsExtended[moduleKey]), z);
+                                
                                 return concatenateWithKey(z, moduleLevelsExtended[moduleKey]);
-                            }).flat(2));
+                            }).flat(2))
                         }
+                        
                         // flatten for group here
                         return out.flat(2);
                     }
                 }).flat();
+                
                 // export
                 finalOut.push(concatenateWithKey(moduleTag, yt));
+                
             }
             if (levelListDeclin) {
             } // only colors ? don't go there
+            
         }
         if (!keyList && levelList) {
             // export
             let kkk = concatenateWithKey(moduleTag, levelList);
             finalOut.push(kkk);
         }
+        
         if (moduleClassNames) {
-            let kk = parseClassNames();
+            let kk  = parseClassNames();
             let kkk = concatenateWithKey(moduleTag, kk);
+            
             registerDebug('classnames', kk);
+            
             // export
             finalOut.push(kkk);
         }
+        
         if (mode && mode === 'debug') {
-            return finalOutputDebug;
-        }
-        else {
+            return finalOutputDebug
+            
+        } else {
             return finalOut.flat(2);
         }
     }
-    function registerDebug(tag, data, nestedTag) {
+    
+    function registerDebug(tag: string, data: string[], nestedTag?: string) {
         if (nestedTag) {
-            if (!finalOutputDebug[tag])
-                finalOutputDebug[tag] = {};
+            if (!finalOutputDebug[tag]) finalOutputDebug[tag] = {}
             finalOutputDebug[tag][nestedTag] = finalOutputDebug[tag][nestedTag] ? finalOutputDebug[tag][nestedTag].concat(data) : data;
-        }
-        else {
+            
+        } else {
+            
             finalOutputDebug[tag] = finalOutputDebug[tag] ? finalOutputDebug[tag].concat(data) : data;
         }
     }
+    
     function parseClassNames() {
         return Object.keys(moduleClassNames).map((klass) => {
             return concatenateWithKey(klass, moduleClassNames[klass]);
         }).flat();
     }
-    function concatenateWithKey(key, levelLine) {
-        return levelLine.map((levelTag) => {
+    
+    
+    function concatenateWithKey(key, levelLine: string[]) {
+        return levelLine.map((levelTag: string) => {
             return [key, levelTag].filter((val) => {
-                return (val !== '_' && val.toString().charAt(0) !== '_');
+                return (val !== '_' && val.toString().charAt(0) !== '_')
             }).filter(x => Boolean(x)).join('-');
-        });
+        })
     }
+    
+    
 }
+
 export default {
     getModuleTagClassNames: cssfabricClassNames,
-    getModuleTagDebug: function doIt(props) {
-        props.outputStyle = 'debug';
+    getModuleTagDebug:      function doIt(props: IListCssfabricClassNamesProps) {
+        props.outputStyle = 'debug'
         return cssfabricClassNames(props);
     }
-};
+}

package/src/lib/scripts/index.ts

@@ -0,0 +1,8 @@
+
+
+function buildReadme(vars: string){
+ return "readme"
+}
+
+
+export default buildReadme;

package/src/lib/scripts/utils.ts

@@ -0,0 +1,37 @@
+const utils = {
+
+    isArrayOfTypes: (arr: any): any => {
+        let ret = '';
+
+        if (!Array.isArray(arr)) {
+            return false;
+        }
+        if (arr.every(x => Array.isArray(x))) ret = 'arrays'
+        if (arr.every(x => typeof x === 'number' || typeof x === 'string' ) ) ret = 'strings'
+        if (arr.every(x => typeof x === 'string')) ret = 'strings'
+        if (arr.every(x => typeof x === 'number')) ret = 'numbers'
+        if (arr.every(x => typeof x === 'object' && !Array.isArray(x))) ret = 'objects'
+
+        return ret;
+    },
+
+    isObjectOfTypes: (arr: any): any => {
+
+        if (Array.isArray(arr)) {
+            return false;
+        }
+
+        let ret = '';
+        let arrValues = Object.values(arr);
+
+        if (arrValues.every(x => typeof x === 'number' || typeof x === 'string' ) ) ret = 'strings'
+        if (arrValues.every(x => Array.isArray(x))) ret = 'arrays'
+        if (arrValues.every(x => typeof x === 'string')) ret = 'strings'
+        if (arrValues.every(x => typeof x === 'number')) ret = 'numbers'
+        if (arrValues.every(x => typeof x === 'object' && !Array.isArray(x))) ret = 'objects'
+
+        return ret;
+    }
+}
+
+export default utils;