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

min-width responsive

Browse Source
This commit is contained in:
Seth Trowbridge 2025-10-21 08:59:37 -04:00
parent 785025402f
commit 1fb4a44b6b
1 changed files with 27 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
main.ts
View File

@ -3,18 +3,18 @@ type EnumDefinition<Signature> = [property:string, options:Record<string, string
type EnumBlock<Signature> = Record<string, EnumDefinition<Signature>>;
type RecursiveObject<Sig extends ValueSignature, Obj extends EnumBlock<Sig>> =
{
[F in keyof Obj]: Obj[F][2] extends Sig ? ((...args:Parameters<Obj[F][2]>)=>RecursiveObject<Sig, Obj>)&{
[E in keyof Obj[F][1]]:RecursiveObject<Sig, Obj>
[F in keyof Obj]: Obj[F][2] extends Sig ? ((...args:Parameters<Obj[F][2]>)=>RecursiveObject<Sig, Obj>&Array<RecursiveObject<Sig, Obj>>)&{
[E in keyof Obj[F][1]]:RecursiveObject<Sig, Obj>&Array<RecursiveObject<Sig, Obj>>
} :
{
[E in keyof Obj[F][1]]:RecursiveObject<Sig, Obj>
[E in keyof Obj[F][1]]:RecursiveObject<Sig, Obj>&Array<RecursiveObject<Sig, Obj>>
}
}
function Block<Signature extends ValueSignature, Fields extends EnumBlock<Signature>>(options:Fields):()=>RecursiveObject<Signature, Fields>
{
return ()=>{
const list = [];
const list = ["@media(min-width:0px){"];
let fieldLookup = {};
const proxyOuter = new Proxy(
@ -27,12 +27,18 @@ function Block<Signature extends ValueSignature, Fields extends EnumBlock<Signat
get(_target, propName)
{
console.log("outer: reading property", propName);
const sizeCheck = parseInt(propName)
if(sizeCheck)
{
list.push(`}@media(min-width:${sizeCheck}px){`);
return proxyOuter;
}
fieldLookup = options[propName];
if(fieldLookup)
{
list.push(fieldLookup[0]);
}
return proxyInner
return proxyInner;
}
}
);
@ -65,18 +71,24 @@ function Block<Signature extends ValueSignature, Fields extends EnumBlock<Signat
}
}
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)=>{}]
});
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)=>{}]
}
);
const userDeclaredStyleBlock = styles()
.Pos.Abs
.Left(10)
.Display.Block
const userDeclaredStyleBlock =
styles()
.Pos.Abs
.Left(10)
[512]
.Pos.Rel
.Left.Auto
console.log(userDeclaredStyleBlock().join(""));
// internal stringification
console.log(userDeclaredStyleBlock().join("")+"}");
function Sheet<UserClasses extends Record<string, ReturnType<typeof styles>>>(userClasses:UserClasses):{[Class in keyof UserClasses]:string}
{