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

32
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 EnumBlock<Signature> = Record<string, EnumDefinition<Signature>>;
type RecursiveObject<Sig extends ValueSignature, Obj extends EnumBlock<Sig>> = 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>)&{ [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> [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> function Block<Signature extends ValueSignature, Fields extends EnumBlock<Signature>>(options:Fields):()=>RecursiveObject<Signature, Fields>
{ {
return ()=>{ return ()=>{
const list = []; const list = ["@media(min-width:0px){"];
let fieldLookup = {}; let fieldLookup = {};
const proxyOuter = new Proxy( const proxyOuter = new Proxy(
@ -27,12 +27,18 @@ function Block<Signature extends ValueSignature, Fields extends EnumBlock<Signat
get(_target, propName) get(_target, propName)
{ {
console.log("outer: reading property", 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]; fieldLookup = options[propName];
if(fieldLookup) if(fieldLookup)
{ {
list.push(fieldLookup[0]); list.push(fieldLookup[0]);
} }
return proxyInner return proxyInner;
} }
} }
); );
@ -65,18 +71,24 @@ function Block<Signature extends ValueSignature, Fields extends EnumBlock<Signat
} }
} }
const styles = Block({ const styles = Block(
{
Pos:["position", {Abs:"absolute", Rel:"relative"}], Pos:["position", {Abs:"absolute", Rel:"relative"}],
Display:[ "display", {Flex:"flex", Grid:"grid", None:"none", Block:"block", InlineBlock:"inline-block"}], Display:[ "display", {Flex:"flex", Grid:"grid", None:"none", Block:"block", InlineBlock:"inline-block"}],
Left:[ "left", {Auto:"auto"}, (left)=>{}] Left:[ "left", {Auto:"auto"}, (left)=>{}]
}); }
);
const userDeclaredStyleBlock = styles() const userDeclaredStyleBlock =
styles()
.Pos.Abs .Pos.Abs
.Left(10) .Left(10)
.Display.Block [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} function Sheet<UserClasses extends Record<string, ReturnType<typeof styles>>>(userClasses:UserClasses):{[Class in keyof UserClasses]:string}
{ {