From 6b02c9a0523856232bf8d06fc4217b6491a6ac9c Mon Sep 17 00:00:00 2001
From: Seth Trowbridge <seth111@gmail.com>
Date: Sun, 28 Apr 2024 18:29:36 -0400
Subject: [PATCH] init

---
 .vscode/launch.json | 12 +++++++++
 deno.json           | 16 +++++++++++
 deno.lock           |  8 ++++++
 scratch.html        | 44 ++++++++++++++++++++++++++++++
 styler.tsx          |  4 +++
 styles.tsx          | 65 +++++++++++++++++++++++++++++++++++++++++++++
 6 files changed, 149 insertions(+)
 create mode 100644 .vscode/launch.json
 create mode 100644 deno.json
 create mode 100644 deno.lock
 create mode 100644 scratch.html
 create mode 100644 styler.tsx
 create mode 100644 styles.tsx

diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 0000000..963dcfc
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,12 @@
+{
+    "configurations": [
+        {
+            "name": "deno launch",
+            "request": "launch",
+            "type": "node",
+            "cwd": "${workspaceFolder}",
+            "runtimeExecutable": "deno",
+            "runtimeArgs": ["styles.tsx"],
+        }
+    ]
+}
\ No newline at end of file
diff --git a/deno.json b/deno.json
new file mode 100644
index 0000000..2fea3a9
--- /dev/null
+++ b/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"
+		]
+	}
+}
\ No newline at end of file
diff --git a/deno.lock b/deno.lock
new file mode 100644
index 0000000..c222923
--- /dev/null
+++ b/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"
+  }
+}
diff --git a/scratch.html b/scratch.html
new file mode 100644
index 0000000..31cad86
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/styler.tsx b/styler.tsx
new file mode 100644
index 0000000..e62884b
--- /dev/null
+++ b/styler.tsx
@@ -0,0 +1,4 @@
+import * as Gusto from "./styles.tsx";
+
+Gusto.colors["me"] = "#ffaa00";
+
diff --git a/styles.tsx b/styles.tsx
new file mode 100644
index 0000000..82c6b91
--- /dev/null
+++ b/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;
\ No newline at end of file