// 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);