diff --git a/.vscode/launch.json b/.vscode/launch.json index 963dcfc..130e1f5 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -6,7 +6,7 @@ "type": "node", "cwd": "${workspaceFolder}", "runtimeExecutable": "deno", - "runtimeArgs": ["styles.tsx"], + "runtimeArgs": ["styler.tsx"], } ] } \ No newline at end of file diff --git a/gale.tsx b/gale.tsx index af6f98d..588a3f0 100644 --- a/gale.tsx +++ b/gale.tsx @@ -11,14 +11,18 @@ const colors = { red: "#ff2200", blue: "#0022ff" }; +const responsive = { + md: "min-width:767px", + lg: "min-width:1024px", +}; const styles = new Map(); function Mapper>(className:string, propertyName:string, lut:T) { - const build =(_:T, propertyValue:string, customPropertyName?:string)=> + const build =(propertyValue:string, customPropertyName?:string):string=> { - const selector = `${className}-${(customPropertyName||propertyValue as string).replace(/[^a-zA-Z0-9]/g, "")}${activeQuery?"_"+activeQuery:""}`; + const selector = `${className}-${(customPropertyName||propertyValue as string).replace(/[^a-zA-Z0-9]/g, "")}${activeQuery?"_"+activeQueryKey:""}`; const check = styles.get(selector); if(!check) { @@ -28,32 +32,37 @@ function Mapper>(className:string, propertyName return selector; } type UseCustom = (custom:string)=>string; - return new Proxy(function(override:string) + return new Proxy(((override:string)=>build(override)) as UseCustom, { - return build(lut, override); - } as UseCustom, - { - get(target, prop){ + get(_, prop){ - return build(lut, lut[prop as string], prop as string); + return build(lut[prop as string], prop as string); } } ) as T & UseCustom; } - -export function Complex, F extends CallableFunction>(obj:Obj, func:F) +function MapperQuery>(lut:T) { - return new Proxy(func, {get(target, prop){ - return obj[prop as string] - }}) as Obj & F + type UseCustom = (custom:string)=>QueryInvoker; + return new Proxy(((override:string)=>Query(override, override)) as UseCustom, + { + get(_, prop:string){ + return Query(lut[prop], prop) + } + } + ) as Record & UseCustom; } -let activeQuery:false|string = false -function Query(amount:string) +let activeQuery:false|string = false; +let activeQueryKey:false|string = false; +type QueryInvoker = (...args:string[])=>string +function Query(amount:string, key?:string):QueryInvoker { activeQuery = amount; - return (...args:string[])=> { + activeQueryKey = key||amount + return (...args)=> { activeQuery = false; + activeQueryKey = false; return args.join(" "); } } @@ -70,12 +79,9 @@ export function config(obj:T) } return rules.join("\n"); }, - get MD() - { - return Query("768px"); - }, Face: Mapper("Face", "font-family", {...typeface, ...obj}), - Pad: Mapper("P", "padding", sizes) + Pad: Mapper("Pad", "padding", sizes), + Q: MapperQuery(responsive) }; return CSS; } diff --git a/styler.tsx b/styler.tsx index 7eabff7..7c85c2f 100644 --- a/styler.tsx +++ b/styler.tsx @@ -1,5 +1,7 @@ import Gale from "./gale-custom.tsx"; -console.log( Gale.MD( Gale.Face("Comic Sans"), Gale.Pad.small ) ); +const classes = Gale.Q.lg( Gale.Face.sans, Gale.Pad.small ); -console.log( Gale.Sheet() ) +console.log(classes); + +console.log(Gale.Sheet()) \ No newline at end of file