tweaks

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=<T = UnitString>(...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<UnitString|"auto">  ],
+      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<UserClasses extends Record<string, (this:ReturnType<typeof styles>)=>void >>(userClasses:UserClasses):{[Class in keyof UserClasses]:string}
+export function Sheet<UserClasses extends Record<string, (this:ReturnType<typeof styles>, css:ReturnType<typeof styles>)=>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;
+    }
   }});
 }
 

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")
   }
 
 });