init

.vscode/launch.json

@@ -0,0 +1,12 @@
+{
+    "configurations": [
+        {
+            "name": "deno launch",
+            "request": "launch",
+            "type": "node",
+            "cwd": "${workspaceFolder}",
+            "runtimeExecutable": "deno",
+            "runtimeArgs": ["styles.tsx"],
+        }
+    ]
+}

deno.json

@@ -0,0 +1,16 @@
+{
+    "imports": {
+        "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"},
+	"compilerOptions": {
+		"jsx": "react-jsx",
+		"jsxImportSource": "https://esm.sh/preact@10.18.1",
+		"lib": [
+			"deno.window",
+			"dom",
+			"dom.asynciterable"
+		]
+	}
+}

deno.lock

@@ -0,0 +1,8 @@
+{
+  "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"
+  }
+}

scratch.html

@@ -0,0 +1,44 @@
+<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

@@ -0,0 +1,4 @@
+import * as Gusto from "./styles.tsx";
+
+Gusto.colors["me"] = "#ffaa00";
+

styles.tsx

@@ -0,0 +1,65 @@
+
+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;