From a54a0676952b362afcd0e1eec171adf690e0f54d Mon Sep 17 00:00:00 2001 From: Seth Trowbridge Date: Wed, 9 Oct 2024 08:01:50 -0400 Subject: [PATCH] idk --- gale.tsx | 22 ++++++++++++---------- styler.tsx | 42 ++++++++++++++++++++++++++---------------- 2 files changed, 38 insertions(+), 26 deletions(-) diff --git a/gale.tsx b/gale.tsx index 00db41a..4995edf 100644 --- a/gale.tsx +++ b/gale.tsx @@ -16,28 +16,29 @@ const responsive = { lg: "min-width:1024px", }; - -let sheet = {insertRule(_:string){}} as CSSStyleSheet; +let SheetDOM = {insertRule(_:string){}} as CSSStyleSheet; if(globalThis?.document) { const sheetElement = document.createElement("style"); document.head.setAttribute("data-gale", "true"); document.head.appendChild(sheetElement); - sheet = sheetElement.sheet as CSSStyleSheet; + SheetDOM = sheetElement.sheet as CSSStyleSheet; } -const styles = new Map(); +const SheetMap = new Map(); + + function Mapper>(className:string, propertyName:string, lut:T) { const build =(propertyValue:string, customPropertyName?:string):string=> { const selector = `${className}-${(customPropertyName||propertyValue as string).replace(/[^a-zA-Z0-9]/g, "")}${activeQuery.val?"_"+activeQuery.key:""}`; - const check = styles.get(selector); + const check = SheetMap.get(selector); if(!check) { const body = `{ ${propertyName}:${propertyValue}; }`; const rules = activeQuery.val ? `{ @media(${activeQuery.val})${body}}` : body - styles.set(selector, rules); - sheet.insertRule(selector + " " + rules); + SheetMap.set(selector, rules); + SheetDOM.insertRule(selector + " " + rules); } return selector; } @@ -64,10 +65,11 @@ function MapperQuery>(lut:T) } -let activeQuery:ActiveQuery; type ActiveQuery = {key:string|false, val:string|false}; -const activeQueryStack:ActiveQuery[] = []; type QueryInvoker = (...args:string[])=>string + +let activeQuery:ActiveQuery; +const activeQueryStack:ActiveQuery[] = []; function Query(amount:string, key?:string):QueryInvoker { activeQuery = {key:key||amount, val:amount}; @@ -86,7 +88,7 @@ export function config(obj:T) Sheet() { const rules = []; - for(const [key, value] of styles.entries()) + for(const [key, value] of SheetMap.entries()) { rules.push("."+key+value); } diff --git a/styler.tsx b/styler.tsx index aefeadb..cdc3595 100644 --- a/styler.tsx +++ b/styler.tsx @@ -1,30 +1,40 @@ import Gale from "./gale-custom.tsx"; import Render from "preact-render-to-string"; - -const html = Render(
- hello! -
) - -const css = Gale.Sheet(); +const jsx =
+hello! +
Deno.writeTextFile( "dump.html", ` - - + + - ${html} + ${Render(jsx)} ` ) -/* idea: -Gale.Table( - [, "md" ], { - Face:["serif", "sans" ], - Pad:["small", "large"] -}) -*/ \ No newline at end of file +// idea for table: +// Gale.Table( +// [, "md" ], { +// Face:["serif", "sans" ], +// Pad:["small", "large"] +// }) + +// idea for object +//Gale({ +// lg:{ +// Face:"sans", +// Pad:"small" +// }, +// md:{ +// Pad:"large" +// } +//}) + +// idea for function +//Gale.Gen(g=>[g.md(), g.Face.Sans]) \ No newline at end of file