custom value function

gale-custom.tsx

@@ -1,3 +1,3 @@
-import {config} from "./gale.tsx";
+import {config, Complex} from "./gale.tsx";
 
 export default config({other:"lol"});

gale.tsx

@@ -12,19 +12,40 @@ const colors = {
     blue: "#0022ff"
 };
 
-const styles = new Map<string, string>()
+
-function Mapper<T extends Record<string, string>>(className:string, property:string, lut:T)
+const styles = new Map<string, string>();
+function Mapper<T extends Record<string, string>>(className:string, propertyName:string, lut:T)
 {
-    return new Proxy(lut, {get(target, prop){
+    const build =(_:T, propertyValue:string, customPropertyName?:string)=>
-        const selector = `${className}-${prop as string}${activeQuery?"_"+activeQuery:""}`;
+    {
+        const selector = `${className}-${(customPropertyName||propertyValue as string).replace(/[^a-zA-Z0-9]/g, "")}${activeQuery?"_"+activeQuery:""}`;
         const check = styles.get(selector);
         if(!check)
         {
-            const body = `{ ${property}:${lut[prop as string]}; }`;
+            const body = `{ ${propertyName}:${propertyValue}; }`;
             styles.set(selector, activeQuery ? `{ @media(${activeQuery})${body}}` : body);    
         }
         return selector;
-    }});
+    }
+    type UseCustom = (custom:string)=>string;
+    return new Proxy(function(override:string)
+        {
+            return build(lut, override);
+        } as UseCustom,
+        {
+            get(target, prop){
+
+                return build(lut, lut[prop as string], prop as string);
+            }
+        }
+    ) as T & UseCustom;
+}
+
+export function Complex<Obj extends Record<string, string>, F extends CallableFunction>(obj:Obj, func:F)
+{
+    return new Proxy(func, {get(target, prop){
+        return obj[prop as string]
+    }}) as Obj & F
 }
 
 let activeQuery:false|string = false
@@ -42,7 +63,7 @@ export function config<T>(obj:T)
     const CSS = {
         Sheet()
         {
-            const rules = []
+            const rules = [];
             for(const [key, value] of styles.entries())
             {
                 rules.push(key+value);

styler.tsx

@@ -1,5 +1,5 @@
 import Gale from "./gale-custom.tsx";
 
-console.log( Gale.MD(Gale.Face.other) );
+console.log( Gale.MD( Gale.Face("Comic Sans"), Gale.Pad.small ) );
 
 console.log( Gale.Sheet() )