From 806d315670cf9db789b09cb4418a3d9c6ce3fec6 Mon Sep 17 00:00:00 2001
From: Seth Trowbridge <seth111@gmail.com>
Date: Fri, 7 Jun 2024 12:03:46 -0400
Subject: [PATCH] add media queries

---
 .vscode/launch.json |  2 +-
 gale.tsx            | 48 +++++++++++++++++++++++++--------------------
 styler.tsx          |  6 ++++--
 3 files changed, 32 insertions(+), 24 deletions(-)

diff --git a/.vscode/launch.json b/.vscode/launch.json
index 963dcfc..130e1f5 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -6,7 +6,7 @@
             "type": "node",
             "cwd": "${workspaceFolder}",
             "runtimeExecutable": "deno",
-            "runtimeArgs": ["styles.tsx"],
+            "runtimeArgs": ["styler.tsx"],
         }
     ]
 }
\ No newline at end of file
diff --git a/gale.tsx b/gale.tsx
index af6f98d..588a3f0 100644
--- a/gale.tsx
+++ b/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);
-        } as UseCustom,
-        {
-            get(target, prop){
+            get(_, prop){
 
-                return build(lut, lut[prop as string], prop as string);
+                return build(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)
+function MapperQuery<T extends Record<string, string>>(lut:T)
 {
-    return new Proxy(func, {get(target, prop){
-        return obj[prop as string]
-    }}) as Obj & F
+    type UseCustom = (custom:string)=>QueryInvoker;
+    return new Proxy(((override:string)=>Query(override, override)) as UseCustom,
+        {
+            get(_, prop:string){
+                return Query(lut[prop], prop)
+            }
+        }
+    ) as Record<keyof T, QueryInvoker> & UseCustom;
 }
 
-let activeQuery:false|string = false
-function Query(amount:string)
+let activeQuery:false|string = false;
+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;
 }
diff --git a/styler.tsx b/styler.tsx
index 7eabff7..7c85c2f 100644
--- a/styler.tsx
+++ b/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( Gale.Sheet() )
+console.log(classes);
+
+console.log(Gale.Sheet())
\ No newline at end of file