more polish

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "deno.enable": true
+}

main.ts

@@ -1,6 +1,6 @@
 // tss.ts
 type PseudoKeys = ["hover"|"before"|"after"] | ["hover", "after"|"before"];
-type ValueSignature = (...args:number[])=>void
+type ValueSignature = (...args:any[])=>string
 type EnumDefinition<Signature> = [property:string, options:Record<string, string>, values?:Signature];
 type EnumBlock<Signature> = Record<string, EnumDefinition<Signature>>;
 type RecursiveObject<Sig extends ValueSignature, Obj extends EnumBlock<Sig>> =
@@ -25,31 +25,37 @@ function Block<Signature extends ValueSignature, Fields extends EnumBlock<Signat
     const proxyOuter = new Proxy(
       function(...args)
       {
-        console.log("outer: core call", ...args)
-        if(args.length)
+        // OUTER context called as function:
+
+        if(args.length) // pseudo elements are being declared, capture and return the OUTER context
         {
           list.push(`${(pseudo||query) ? "}" : ""} &:${args.join("::")}{`);
           pseudo = true;
           query = false;
           return proxyOuter;
         }
+        else // css dump requested:
+        {
           pseudo && list.push("}");
           query && list.push("}");
           pseudo = false;
           query = false;
           return list;
+        }
       },
       {
         get(_target, propName)
         {
-          console.log("outer: reading property", propName);
-          const sizeCheck = parseInt(propName)
-          if(sizeCheck)
+          // OUTER context property access:
+
+          if(parseInt(propName)) // if a number was used as a property, treat that as a mobile-first media query in px units, and return the OUTER context
           {
-            list.push(`${(query) ? "}" : ""} @media(min-width:${sizeCheck}px){`);
+            list.push(`${(query) ? "}" : ""} @media(min-width:${propName}px){`);
             query = true;
             return proxyOuter;
           }
+
+          // a css property alias was accessed, look up the mapped css property name from the declaration array, push that, and return the OUTER context
           fieldLookup = options[propName];
           if(fieldLookup)
           {
@@ -63,20 +69,23 @@ function Block<Signature extends ValueSignature, Fields extends EnumBlock<Signat
     const proxyInner = new Proxy(
       function(...args)
       {
-        console.log("inner: core call", ...args)
-        list.push(`:${args.join(" ")};`);
+        // INNER context called as function
+
+        // capture the evalued dynamic values and return the OUTER context
+        list.push(`:${fieldLookup[2](...args)};`);
         return proxyOuter;
       },
       {
         get(_target, valName)
         {
-          console.log("inner: reading property", valName);
-          try
+          // INNER context property access
+
+          try // capture the mapped css value and return the OUTER context
           {
             list.push(`:${fieldLookup[1][valName]};`);
             return proxyOuter;
           }
-          catch(e)
+          catch(_e)
           {
             console.warn("someone is trying to stringify a style proxy");
             return ()=>"[StyleProxy]";
@@ -88,16 +97,40 @@ function Block<Signature extends ValueSignature, Fields extends EnumBlock<Signat
   }
 }
 
+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 styles = Block(
 {
-      Pos:["position", { Abs:"absolute", Rel:"relative" }],
-  Display:[ "display", { Flex:"flex", Grid:"grid", None:"none", Block:"block", InlineBlock:"inline-block" }],
-     Left:[    "left", { Auto:"auto" }, (left)=>{}]
+      Pos:["position",   { Abs:"absolute", Rel:"relative", Fix:"fixed", Pin:"sticky", No:"static" }],
+      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],
+
+      Pad: ["padding",        {}, funcUnitTRBL  ],
+      PadT:["padding-top",    {}, funcUnitSingle],
+      PadR:["padding-right",  {}, funcUnitSingle],
+      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]
 }
 );
 
 let masterSheet = [];
-export function Sheet<UserClasses extends Record<string, (CSS:ReturnType<typeof styles>)=>void >>(userClasses:UserClasses):{[Class in keyof UserClasses]:string}
+
+export function Sheet<UserClasses extends Record<string, (this: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){
@@ -123,27 +156,3 @@ export function Divulge()
 {
   return masterSheet.join("\n");
 }
-
-
-/////// testing: ////////
-
-const sheet = Sheet({
-  SpecialLink(styles)
-  {
-    styles
-      .Pos.Abs
-      ("hover","after")
-        .Pos.Rel
-        .Left(20)
-      [512]
-        .Left(100)
-  },
-  Profile(styles)
-  {
-    styles.Display.Block
-  }
-})
-
-const el1 = [sheet.Profile, sheet.SpecialLink];
-
-console.log(Divulge());

main_test.ts

@@ -1,10 +0,0 @@
-import * as Test from "@std/assert";
-
-Deno.test(function()
-  {
-    
-    Test.assertEquals();
-  }
-);
-
-

user-layout.ts

@@ -0,0 +1,6 @@
+import { Divulge } from "./main.ts";
+
+import Styles from "./user-sheet.ts"
+
+const classes = [Styles.Profile, Styles.SpecialLink];
+console.log(Divulge());

user-sheet.ts

@@ -0,0 +1,34 @@
+import { Sheet } from "./main.ts";
+
+/*
+
+"5px"
+Unit(5).px
+[5,"px"]
+px(5)
+Unit.px(5)
+
+*/
+
+export default Sheet(
+{
+  
+  SpecialLink()
+  {
+    this
+    .Pos.Abs
+    ("hover","after")
+      .Pos.Rel
+      .L("3rem")
+    [512]
+      .L("100px")
+  },
+
+  Profile()
+  {
+    this
+    .Dis.Block
+    .Pad("5px", "6px")
+  }
+
+});