example

.vscode/settings.json

@@ -1,3 +1,4 @@
 {
-    "deno.enable": true
+    "deno.enable": true,
+    "liveServer.settings.port": 5502
 }

bundle.js

@@ -0,0 +1,205 @@
+// main.ts
+function Block(options) {
+  return () => {
+    let pseudo = false;
+    let query = false;
+    const list = [];
+    let fieldLookup = {};
+    const proxyOuter = new Proxy(function(...args) {
+      if (args.length) {
+        list.push(`${pseudo || query ? "}" : ""} &:${args.join("::")}{`);
+        pseudo = true;
+        query = false;
+        return proxyOuter;
+      } else {
+        pseudo && list.push("}");
+        query && list.push("}");
+        pseudo = false;
+        query = false;
+        return list;
+      }
+    }, {
+      get(_target, propName) {
+        if (parseInt(propName)) {
+          list.push(`${query ? "}" : ""} @media(min-width:${propName}px){`);
+          query = true;
+          return proxyOuter;
+        }
+        fieldLookup = options[propName];
+        if (fieldLookup) {
+          list.push(fieldLookup[0]);
+        }
+        return proxyInner;
+      }
+    });
+    const proxyInner = new Proxy(function(...args) {
+      list.push(`:${fieldLookup[2](...args)};`);
+      return proxyOuter;
+    }, {
+      get(_target, valName) {
+        try {
+          list.push(`:${fieldLookup[1][valName]};`);
+          return proxyOuter;
+        } catch (_e) {
+          console.warn("someone is trying to stringify a style proxy");
+          return () => "[StyleProxy]";
+        }
+      }
+    });
+    return proxyOuter;
+  };
+}
+var funcUnitSingle = (amount) => amount;
+var funcUnitTRBL = (...args) => args.join(" ");
+var UnitAuto = {
+  Auto: "auto"
+};
+var styles = Block({
+  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"
+    }
+  ],
+  T: [
+    "top",
+    UnitAuto,
+    funcUnitSingle
+  ],
+  R: [
+    "right",
+    UnitAuto,
+    funcUnitSingle
+  ],
+  B: [
+    "bottom",
+    UnitAuto,
+    funcUnitSingle
+  ],
+  L: [
+    "left",
+    UnitAuto,
+    funcUnitSingle
+  ],
+  Pad: [
+    "padding",
+    {},
+    funcUnitTRBL
+  ],
+  PadT: [
+    "padding-top",
+    {},
+    funcUnitSingle
+  ],
+  PadR: [
+    "padding-right",
+    {},
+    funcUnitSingle
+  ],
+  PadB: [
+    "padding-bottom",
+    {},
+    funcUnitSingle
+  ],
+  PadL: [
+    "padding-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
+  ]
+});
+var masterSheet = {};
+var SheetId = {
+  index: -1,
+  getId() {
+    this.index++;
+    return this.index;
+  }
+};
+function Sheet(userClasses) {
+  const hash = SheetId.getId();
+  const writer = globalThis["document"] ? (selector, declaration) => {
+    const styleBlock = document.createElement("style");
+    styleBlock.innerText = "." + selector + declaration;
+    document.head.insertAdjacentElement("beforeend", styleBlock);
+  } : (selector, declaration) => {
+    masterSheet[selector] = declaration;
+  };
+  return new Proxy(function() {
+  }, {
+    get(_target, className) {
+      const lookup = userClasses[className];
+      if (typeof lookup == "function") {
+        const skewer = styles();
+        lookup.call(skewer, skewer);
+        const name = `${className}_${hash}`;
+        writer(name, `{ ${skewer().join("")} }`);
+        userClasses[className] = name;
+        return name;
+      } else {
+        return lookup;
+      }
+    }
+  });
+}
+
+// user-sheet.ts
+var user_sheet_default = Sheet({
+  SpecialLink(css) {
+    css.Pos.Abs.Pad("1rem")[1024].Pad("3rem")("hover").Pos.Rel.L("3rem");
+  },
+  Profile() {
+    this.Dis.Block.Pad("5px", "6px").Mar("0px", "auto");
+  }
+});
+
+// user-layout.ts
+var title = document.createElement("div");
+title.innerHTML = "a title!";
+title.className = user_sheet_default.SpecialLink;
+document.body.appendChild(title);

deno.json

@@ -1,8 +1,14 @@
 {
   "tasks": {
-    "dev": "deno run --watch main.ts"
+    "dev": "deno run --watch main.ts",
+    "bundle": "deno bundle -o bundle.js user-layout.ts"
   },
   "imports": {
     "@std/assert": "jsr:@std/assert@1"
+  },
+  "compilerOptions": {
+    "lib": [
+      "deno.window", "dom"
+    ]
   }
 }

index.html

@@ -0,0 +1,11 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+
+</head>
+<body>
+    <script src="/bundle.js"></script>
+</body>
+</html>

main.ts

@@ -129,22 +129,39 @@ const styles = Block(
 }
 );
 
-let masterSheet = [];
+const masterSheet = {};
+
+const SheetId = {
+  index:-1,
+  getId()
+  {
+    this.index++;
+    return this.index;
+  }
+};
 
 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);
+  const hash = SheetId.getId();
+
+  const writer = globalThis["document"]
+    ? (selector, declaration)=>
+    {
+      const styleBlock = document.createElement("style");
+      styleBlock.innerText = "."+selector+declaration;
+      document.head.insertAdjacentElement("beforeend", styleBlock)
+    }
+    : (selector, declaration)=>{masterSheet[selector] = declaration};
 
   return new Proxy(function(){}, {get(_target, className){
 
-    
     const lookup = userClasses[className];
     if(typeof lookup == "function")
     {
       const skewer = styles();
       lookup.call(skewer, skewer);
-      const name = `.${className}_${hash}`;
-      masterSheet.push( `${name}{ ${skewer().join("")} }` );
+      const name = `${className}_${hash}`;
+      writer(name, `{ ${skewer().join("")} }`)
       userClasses[className] = name;
       return name;
     }
@@ -157,5 +174,5 @@ export function Sheet<UserClasses extends Record<string, (this:ReturnType<typeof
 
 export function Divulge()
 {
-  return masterSheet.join("\n");
+  return masterSheet;
 }

user-layout.ts

@@ -2,5 +2,8 @@ import { Divulge } from "./main.ts";
 
 import Styles from "./user-sheet.ts"
 
-const classes = [Styles.Profile, Styles.SpecialLink];
-console.log(Divulge());
+const title = document.createElement("div");
+title.innerHTML = "a title!";
+title.className = Styles.SpecialLink;
+
+document.body.appendChild(title)

user-sheet.ts

@@ -15,19 +15,16 @@ export default Sheet(
   
   SpecialLink(css)
   {
-    css
-    .Pos.Abs
-    ("hover","after")
-      .Pos.Rel
-      .L("3rem")
-    [512]
-      .L("100px")
+    css.Pos.Abs.Pad("1rem")
+    [1024].Pad("3rem")
+    ("hover").Pos.Rel.L("3rem")
   },
 
   Profile()
   {
     this
     .Dis.Block
+
     .Pad("5px", "6px")
     .Mar("0px", "auto")
   }