From f683614ee98a46a66c9cc924cbab13d334f2ab58 Mon Sep 17 00:00:00 2001
From: Seth Trowbridge <seth111@gmail.com>
Date: Sat, 11 May 2024 23:33:50 -0400
Subject: [PATCH] media query

---
 gale.tsx   | 42 +++++++++++++++++++++++++++++-------------
 index.html |  5 +++++
 styler.tsx |  4 +++-
 3 files changed, 37 insertions(+), 14 deletions(-)
 create mode 100644 index.html

diff --git a/gale.tsx b/gale.tsx
index f7fce67..b05e342 100644
--- a/gale.tsx
+++ b/gale.tsx
@@ -12,33 +12,49 @@ const colors = {
     blue: "#0022ff"
 };
 
-
-function Mapper<T extends Record<string, string>>(property:string, lut:T)
+const styles = new Map<string, string>()
+function Mapper<T extends Record<string, string>>(className:string, property:string, lut:T)
 {
     return new Proxy(lut, {get(target, prop){
-        console.log("read", prop);
-        return property + ": " + lut[prop as string]
+        const selector = `${className}-${prop as string}${activeQuery?"_"+activeQuery:""}`;
+        const check = styles.get(selector);
+        if(!check)
+        {
+            const body = `{ ${property}:${lut[prop as string]}; }`;
+            styles.set(selector, activeQuery ? `{ @media(${activeQuery})${body}}` : body);    
+        }
+        return selector;
     }});
 }
-function Query()
+
+let activeQuery:false|string = false
+function Query(amount:string)
 {
-    console.log("query start")
-    return (...args:string[])=>
-    {
-        console.log("query stop")
+    activeQuery = amount;
+    return (...args:string[])=> {
+        activeQuery = false;
+        return args.join(" ");
     }
 }
 
 export function config<T>(obj:T)
 {
     const CSS = {
-        mq:"",
+        Sheet()
+        {
+            const rules = []
+            for(const [key, value] of styles.entries())
+            {
+                rules.push(key+value);
+            }
+            return rules.join("\n");
+        },
         get MD()
         {
-           return Query();
+           return Query("768px");
         },
-        Face: Mapper("font-family", {...typeface, ...obj}),
-        Pad:Mapper("padding", sizes)
+        Face: Mapper("Face", "font-family", {...typeface, ...obj}),
+        Pad: Mapper("P", "padding", sizes)
     };
     return CSS;
 }
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..04e08b3
--- /dev/null
+++ b/index.html
@@ -0,0 +1,5 @@
+<style>
+    .py-01{padding:30px 0 30px 0;}
+    .px-01{padding:0 20px 0 20px;}
+</style>
+<p class="px-01 py-01">test</p>
\ No newline at end of file
diff --git a/styler.tsx b/styler.tsx
index 778d433..cd1044f 100644
--- a/styler.tsx
+++ b/styler.tsx
@@ -1,3 +1,5 @@
 import Gale from "./gale-custom.tsx";
 
-Gale.MD(Gale.Face.other);
+console.log( Gale.MD(Gale.Face.other) );
+
+console.log( Gale.Sheet() )