media query

gale.tsx

@@ -12,33 +12,49 @@ const colors = {
     blue: "#0022ff"
 };
 
-
+const styles = new Map<string, string>()
-function Mapper<T extends Record<string, string>>(property:string, lut:T)
+function Mapper<T extends Record<string, string>>(className:string, property:string, lut:T)
 {
     return new Proxy(lut, {get(target, prop){
-        console.log("read", prop);
+        const selector = `${className}-${prop as string}${activeQuery?"_"+activeQuery:""}`;
-        return property + ": " + lut[prop as string]
+        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")
+    activeQuery = amount;
-    return (...args:string[])=>
+    return (...args:string[])=> {
-    {
+        activeQuery = false;
-        console.log("query stop")
+        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}),
+        Face: Mapper("Face", "font-family", {...typeface, ...obj}),
-        Pad:Mapper("padding", sizes)
+        Pad: Mapper("P", "padding", sizes)
     };
     return CSS;
 }

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>

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() )