diff --git a/main.ts b/main.ts index 9511917..538d375 100644 --- a/main.ts +++ b/main.ts @@ -101,7 +101,8 @@ type Measure = "px" | "em" | "rem" | "vh" | "vw" | "%"; type UnitString = `${number}${Measure}`; const funcUnitSingle = (amount:UnitString)=>amount -const funcUnitTRBL = (...args:[t:UnitString, r?:UnitString, b?:UnitString, l?:UnitString])=>args.join(" ") +const funcUnitTRBL=(...args:[t:T, r?:T, b?:T, l?:T])=>args.join(" ") +const UnitAuto = {Auto:"auto"}; const styles = Block( { @@ -109,10 +110,10 @@ const styles = Block( Dis:["display", { Flex:"flex", Grid:"grid", None:"none", Block:"block", InlineBlock:"inline-block" }], Box:["box-sizing", { Border:"border-box", Content:"content-box" }], - L:[ "left", { Auto:"auto"}, funcUnitSingle], - R:[ "right", { Auto:"auto"}, funcUnitSingle], - T:[ "top", { Auto:"auto"}, funcUnitSingle], - B:[ "bottom", { Auto:"auto"}, funcUnitSingle], + T:["top", UnitAuto, funcUnitSingle], + R:["right", UnitAuto, funcUnitSingle], + B:["bottom", UnitAuto, funcUnitSingle], + L:["left", UnitAuto, funcUnitSingle], Pad: ["padding", {}, funcUnitTRBL ], PadT:["padding-top", {}, funcUnitSingle], @@ -120,35 +121,37 @@ const styles = Block( PadB:["padding-bottom", {}, funcUnitSingle], PadL:["padding-left", {}, funcUnitSingle], - Mar: ["margin", {}, funcUnitTRBL ], - MarT:["margin-top", {}, funcUnitSingle], - MarR:["margin-right", {}, funcUnitSingle], - MarB:["margin-bottom", {}, funcUnitSingle], - MarL:["margin-left", {}, funcUnitSingle] + Mar: ["margin", UnitAuto, funcUnitTRBL ], + MarT:["margin-top", UnitAuto, funcUnitSingle], + MarR:["margin-right", UnitAuto, funcUnitSingle], + MarB:["margin-bottom", UnitAuto, funcUnitSingle], + MarL:["margin-left", UnitAuto, funcUnitSingle] } ); let masterSheet = []; -export function Sheet)=>void >>(userClasses:UserClasses):{[Class in keyof UserClasses]:string} +export function Sheet, css:ReturnType)=>void >>(userClasses:UserClasses):{[Class in keyof UserClasses]:string} { const hash = Math.floor(Math.random()*10000); + return new Proxy(function(){}, {get(_target, className){ - console.log("sheet accessor", className); + + const lookup = userClasses[className]; - if(typeof lookup == "string") - { - return lookup; - } - else + if(typeof lookup == "function") { const skewer = styles(); - lookup(skewer); + lookup.call(skewer, skewer); const name = `.${className}_${hash}`; masterSheet.push( `${name}{ ${skewer().join("")} }` ); userClasses[className] = name; return name; } + else + { + return lookup; + } }}); } diff --git a/user-sheet.ts b/user-sheet.ts index f04b5c5..eb8c596 100644 --- a/user-sheet.ts +++ b/user-sheet.ts @@ -13,9 +13,9 @@ Unit.px(5) export default Sheet( { - SpecialLink() + SpecialLink(css) { - this + css .Pos.Abs ("hover","after") .Pos.Rel @@ -29,6 +29,7 @@ export default Sheet( this .Dis.Block .Pad("5px", "6px") + .Mar("0px", "auto") } }); \ No newline at end of file