customization ideas

deno.json

@@ -3,14 +3,9 @@
         "react": "https://esm.sh/preact@10.18.1/compat",
         "react/": "https://esm.sh/preact@10.18.1/compat/"
     },
-	"tasks": {"go": "deno run -A styles.tsx"},
+	"tasks": {"go": "deno run -A styler.tsx"},
 	"compilerOptions": {
 		"jsx": "react-jsx",
-		"jsxImportSource": "https://esm.sh/preact@10.18.1",
+		"lib": ["deno.window","dom","dom.asynciterable"]
-		"lib": [
-			"deno.window",
-			"dom",
-			"dom.asynciterable"
-		]
 	}
 }

deno.lock

@@ -1,8 +0,0 @@
-{
-  "version": "3",
-  "remote": {
-    "https://esm.sh/preact@10.18.1/jsx-runtime": "019f849249d70baa9aefb684a8f1fbc350a893beae719a60b6c80adf3463b073",
-    "https://esm.sh/stable/preact@10.18.1/denonext/jsx-runtime.js": "be3f1ff4c3c03b08ed19d69428e35bf3d90360a8e081a2e60075ddfd38fd86df",
-    "https://esm.sh/stable/preact@10.18.1/denonext/preact.mjs": "b2ad171554b90f2be0f30b1318f63d0df90420b2bdb727fddd97193daa177f84"
-  }
-}

gale-custom.tsx

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

gale.tsx

@@ -0,0 +1,46 @@
+
+const typeface = {
+    sans: "sans serif",
+    serif: "Times New Roman"
+};
+const sizes = {
+    small: "1rem",
+    large: "3rem"
+};
+const colors = {
+    red: "#ff2200",
+    blue: "#0022ff"
+};
+
+
+function Mapper<T extends Record<string, string>>(property:string, lut:T)
+{
+    return new Proxy(lut, {get(target, prop){
+        console.log("read", prop);
+        return property + ": " + lut[prop as string]
+    }});
+}
+function Query()
+{
+    console.log("query start")
+    return (...args:string[])=>
+    {
+        console.log("query stop")
+    }
+}
+
+export function config<T>(obj:T)
+{
+    const CSS = {
+        mq:"",
+        get MD()
+        {
+           return Query();
+        },
+        Face: Mapper("font-family", {...typeface, ...obj}),
+        Pad:Mapper("padding", sizes)
+    };
+    return CSS;
+}
+
+export default config({});

scratch.html

@@ -1,44 +0,0 @@
-<script>
-
-const typeface = {
-    sans: "sans serif",
-    serif: "Times New Roman"
-};
-const sizes = {
-    "1": "1rem",
-    "2": "3rem"
-};
-const colors = {
-    red: "#ff2200",
-    blue: "#0022ff"
-};
-
-const context = [];
-const CSS = {
-    get Face()
-    {
-        context.push("font-family");
-        return new Proxy(typeface, {get(target, prop){
-            console.log(target, prop);
-            context.push(target[prop]);
-        }})
-    }
-};
-
-
-const output = CSS.Face.sans;
-
-console.log(output);
-</script>
-
-<style>
-
-@media(min-width:768px)
-{
-    .large{ font-size: 3rem; }
-}
-
-</style>
-<div class="md-font-large large">
-hey
-</div>

styler.tsx

@@ -1,4 +1,3 @@
-import * as Gusto from "./styles.tsx";
+import Gale from "./gale-custom.tsx";
-
-Gusto.colors["me"] = "#ffaa00";
 
+Gale.MD(Gale.Face.other);

styles.tsx

@@ -1,65 +0,0 @@
-
-export const typeface = {
-    sans: "sans serif",
-    serif: "Times New Roman"
-};
-export const sizes = {
-    small: "1rem",
-    large: "3rem"
-};
-export const colors = {
-    red: "#ff2200",
-    blue: "#0022ff"
-};
-export let userFonts = {other:"lol"};
-
-const CSS = {
-    mq:"",
-    get MD()
-    {
-        console.log("media query start")
-        return (...args:string[])=>
-        {
-            console.log("md stop")
-        }
-        
-    },
-    get Face()
-    {
-        /*
-        const context = "font-family"
-        return new Proxy(typeface, {get(target, prop){
-            return context + ": " + target[prop]
-        }});
-        */
-       return Mapper("font-family", {...typeface, ...userFonts});
-    },
-    Pad:Mapper("padding", sizes)
-};
-
-function Mapper<T extends Record<string, string>>(property:string, lut:T)
-{
-    return new Proxy(lut, {get(target, prop){
-        console.log("read", prop);
-        return property + ": " + lut[prop as string]
-    }});
-}
-function Query()
-{
-    console.log("md start")
-    return (...args:string[])=>
-    {
-        CSS.mq = "med";
-        //args.forEach(arg=>arg);
-        CSS.mq = "";
-        console.log("md stop")
-    }
-    
-}
-
-
-CSS.Pad.large;
-
-CSS.MD(CSS.Pad.large, CSS.Face.sans);
-
-CSS.Face.serif;