diff --git a/gale-custom.tsx b/gale-custom.tsx index 828f76e..0a46831 100644 --- a/gale-custom.tsx +++ b/gale-custom.tsx @@ -1,3 +1,3 @@ -import {config} from "./gale.tsx"; +import {config, Complex} from "./gale.tsx"; export default config({other:"lol"}); \ No newline at end of file diff --git a/gale.tsx b/gale.tsx index b05e342..af6f98d 100644 --- a/gale.tsx +++ b/gale.tsx @@ -12,19 +12,40 @@ const colors = { blue: "#0022ff" }; -const styles = new Map() -function Mapper>(className:string, property:string, lut:T) + +const styles = new Map(); +function Mapper>(className:string, propertyName:string, lut:T) { - return new Proxy(lut, {get(target, prop){ - const selector = `${className}-${prop as string}${activeQuery?"_"+activeQuery:""}`; + const build =(_:T, propertyValue:string, customPropertyName?:string)=> + { + const selector = `${className}-${(customPropertyName||propertyValue as string).replace(/[^a-zA-Z0-9]/g, "")}${activeQuery?"_"+activeQuery:""}`; const check = styles.get(selector); if(!check) { - const body = `{ ${property}:${lut[prop as string]}; }`; + const body = `{ ${propertyName}:${propertyValue}; }`; styles.set(selector, activeQuery ? `{ @media(${activeQuery})${body}}` : body); } return selector; - }}); + } + type UseCustom = (custom:string)=>string; + return new Proxy(function(override:string) + { + return build(lut, override); + } as UseCustom, + { + get(target, prop){ + + return build(lut, lut[prop as string], prop as string); + } + } + ) as T & UseCustom; +} + +export function Complex, F extends CallableFunction>(obj:Obj, func:F) +{ + return new Proxy(func, {get(target, prop){ + return obj[prop as string] + }}) as Obj & F } let activeQuery:false|string = false @@ -42,7 +63,7 @@ export function config(obj:T) const CSS = { Sheet() { - const rules = [] + const rules = []; for(const [key, value] of styles.entries()) { rules.push(key+value); diff --git a/styler.tsx b/styler.tsx index cd1044f..7eabff7 100644 --- a/styler.tsx +++ b/styler.tsx @@ -1,5 +1,5 @@ import Gale from "./gale-custom.tsx"; -console.log( Gale.MD(Gale.Face.other) ); +console.log( Gale.MD( Gale.Face("Comic Sans"), Gale.Pad.small ) ); console.log( Gale.Sheet() )