add media queries

.vscode/launch.json

@@ -6,7 +6,7 @@
             "type": "node",
             "cwd": "${workspaceFolder}",
             "runtimeExecutable": "deno",
-            "runtimeArgs": ["styles.tsx"],
+            "runtimeArgs": ["styler.tsx"],
         }
     ]
 }

gale.tsx

@@ -11,14 +11,18 @@ const colors = {
     red: "#ff2200",
     blue: "#0022ff"
 };
+const responsive = {
+    md: "min-width:767px",
+    lg: "min-width:1024px",
+};
 
 
 const styles = new Map<string, string>();
 function Mapper<T extends Record<string, string>>(className:string, propertyName:string, lut:T)
 {
-    const build =(_:T, propertyValue:string, customPropertyName?:string)=>
+    const build =(propertyValue:string, customPropertyName?:string):string=>
     {
-        const selector = `${className}-${(customPropertyName||propertyValue as string).replace(/[^a-zA-Z0-9]/g, "")}${activeQuery?"_"+activeQuery:""}`;
+        const selector = `${className}-${(customPropertyName||propertyValue as string).replace(/[^a-zA-Z0-9]/g, "")}${activeQuery?"_"+activeQueryKey:""}`;
         const check = styles.get(selector);
         if(!check)
         {
@@ -28,32 +32,37 @@ function Mapper<T extends Record<string, string>>(className:string, propertyName
         return selector;
     }
     type UseCustom = (custom:string)=>string;
-    return new Proxy(function(override:string)
+    return new Proxy(((override:string)=>build(override)) as UseCustom,
         {
-            return build(lut, override);
+            get(_, prop){
-        } as UseCustom,
-        {
-            get(target, prop){
 
-                return build(lut, lut[prop as string], prop as string);
+                return build(lut[prop as string], prop as string);
             }
         }
     ) as T & UseCustom;
 }
-
+function MapperQuery<T extends Record<string, string>>(lut:T)
-export function Complex<Obj extends Record<string, string>, F extends CallableFunction>(obj:Obj, func:F)
 {
-    return new Proxy(func, {get(target, prop){
+    type UseCustom = (custom:string)=>QueryInvoker;
-        return obj[prop as string]
+    return new Proxy(((override:string)=>Query(override, override)) as UseCustom,
-    }}) as Obj & F
+        {
+            get(_, prop:string){
+                return Query(lut[prop], prop)
+            }
+        }
+    ) as Record<keyof T, QueryInvoker> & UseCustom;
 }
 
-let activeQuery:false|string = false
+let activeQuery:false|string = false;
-function Query(amount:string)
+let activeQueryKey:false|string = false;
+type QueryInvoker = (...args:string[])=>string
+function Query(amount:string, key?:string):QueryInvoker
 {
     activeQuery = amount;
-    return (...args:string[])=> {
+    activeQueryKey = key||amount
+    return (...args)=> {
         activeQuery = false;
+        activeQueryKey = false;
         return args.join(" ");
     }
 }
@@ -70,12 +79,9 @@ export function config<T>(obj:T)
             }
             return rules.join("\n");
         },
-        get MD()
-        {
-           return Query("768px");
-        },
         Face: Mapper("Face", "font-family", {...typeface, ...obj}),
-        Pad: Mapper("P", "padding", sizes)
+        Pad: Mapper("Pad", "padding", sizes),
+        Q: MapperQuery(responsive)
     };
     return CSS;
 }

styler.tsx

@@ -1,5 +1,7 @@
 import Gale from "./gale-custom.tsx";
 
-console.log( Gale.MD( Gale.Face("Comic Sans"), Gale.Pad.small ) );
+const classes = Gale.Q.lg( Gale.Face.sans, Gale.Pad.small );
+
+console.log(classes);
 
 console.log(Gale.Sheet())