This commit is contained in:
Seth Trowbridge 2024-04-28 18:29:36 -04:00
commit 6b02c9a052
6 changed files with 149 additions and 0 deletions

12
.vscode/launch.json vendored Normal file
View File

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

16
deno.json Normal file
View File

@ -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"
]
}
}

8
deno.lock Normal file
View File

@ -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"
}
}

44
scratch.html Normal file
View File

@ -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>

4
styler.tsx Normal file
View File

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

65
styles.tsx Normal file
View File

@ -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;