SethTrowbridge/tss
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tweaks

Browse Source
This commit is contained in:
Seth Trowbridge 2025-10-26 22:43:42 -04:00
parent 120508659d
commit ceb1b0f5ce
2 changed files with 24 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
main.ts
View File

@ -101,7 +101,8 @@ type Measure = "px" | "em" | "rem" | "vh" | "vw" | "%";
type UnitString = `${number}${Measure}`; type UnitString = `${number}${Measure}`;
const funcUnitSingle = (amount:UnitString)=>amount 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( const styles = Block(
{ {
@ -109,10 +110,10 @@ const styles = Block(
Dis:["display", { Flex:"flex", Grid:"grid", None:"none", Block:"block", InlineBlock:"inline-block" }], Dis:["display", { Flex:"flex", Grid:"grid", None:"none", Block:"block", InlineBlock:"inline-block" }],
Box:["box-sizing", { Border:"border-box", Content:"content-box" }], Box:["box-sizing", { Border:"border-box", Content:"content-box" }],
L:[ "left", { Auto:"auto"}, funcUnitSingle], T:["top", UnitAuto, funcUnitSingle],
R:[ "right", { Auto:"auto"}, funcUnitSingle], R:["right", UnitAuto, funcUnitSingle],
T:[ "top", { Auto:"auto"}, funcUnitSingle], B:["bottom", UnitAuto, funcUnitSingle],
B:[ "bottom", { Auto:"auto"}, funcUnitSingle], L:["left", UnitAuto, funcUnitSingle],
Pad: ["padding", {}, funcUnitTRBL ], Pad: ["padding", {}, funcUnitTRBL ],
PadT:["padding-top", {}, funcUnitSingle], PadT:["padding-top", {}, funcUnitSingle],
@ -120,35 +121,37 @@ const styles = Block(
PadB:["padding-bottom", {}, funcUnitSingle], PadB:["padding-bottom", {}, funcUnitSingle],
PadL:["padding-left", {}, funcUnitSingle], PadL:["padding-left", {}, funcUnitSingle],
Mar: ["margin", {}, funcUnitTRBL ], Mar: ["margin", UnitAuto, funcUnitTRBL<UnitString|"auto"> ],
MarT:["margin-top", {}, funcUnitSingle], MarT:["margin-top", UnitAuto, funcUnitSingle],
MarR:["margin-right", {}, funcUnitSingle], MarR:["margin-right", UnitAuto, funcUnitSingle],
MarB:["margin-bottom", {}, funcUnitSingle], MarB:["margin-bottom", UnitAuto, funcUnitSingle],
MarL:["margin-left", {}, funcUnitSingle] MarL:["margin-left", UnitAuto, funcUnitSingle]
} }
); );
let masterSheet = []; 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); const hash = Math.floor(Math.random()*10000);
return new Proxy(function(){}, {get(_target, className){ return new Proxy(function(){}, {get(_target, className){
console.log("sheet accessor", className);
const lookup = userClasses[className]; const lookup = userClasses[className];
if(typeof lookup == "string") if(typeof lookup == "function")
{
return lookup;
}
else
{ {
const skewer = styles(); const skewer = styles();
lookup(skewer); lookup.call(skewer, skewer);
const name = `.${className}_${hash}`; const name = `.${className}_${hash}`;
masterSheet.push( `${name}{ ${skewer().join("")} }` ); masterSheet.push( `${name}{ ${skewer().join("")} }` );
userClasses[className] = name; userClasses[className] = name;
return name; return name;
} }
else
{
return lookup;
}
}}); }});
} }

5
user-sheet.ts
View File

@ -13,9 +13,9 @@ Unit.px(5)
export default Sheet( export default Sheet(
{ {
SpecialLink() SpecialLink(css)
{ {
this css
.Pos.Abs .Pos.Abs
("hover","after") ("hover","after")
.Pos.Rel .Pos.Rel
@ -29,6 +29,7 @@ export default Sheet(
this this
.Dis.Block .Dis.Block
.Pad("5px", "6px") .Pad("5px", "6px")
.Mar("0px", "auto")
} }
}); });