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

pseudo selectors working

Browse Source
This commit is contained in:
Seth Trowbridge 2025-10-21 13:06:06 -04:00
parent 1fb4a44b6b
commit de5ae48d56
1 changed files with 33 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
main.ts
View File

@ -1,26 +1,41 @@
type PseudoKeys = ["hover"|"before"|"after"] | ["hover", "after"|"before"];
type ValueSignature = (...args:number[])=>void
type EnumDefinition<Signature> = [property:string, options:Record<string, string>, values?:Signature];
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>&Array<RecursiveObject<Sig, Obj>>)&{
[E in keyof Obj[F][1]]:RecursiveObject<Sig, Obj>&Array<RecursiveObject<Sig, Obj>>
[F in keyof Obj]: Obj[F][2] extends Sig ? ((...args:Parameters<Obj[F][2]>)=> RecursiveObject<Sig, Obj>&((...args:PseudoKeys)=>RecursiveObject<Sig, Obj>)&Array<RecursiveObject<Sig, Obj>>)&{
[E in keyof Obj[F][1]]:RecursiveObject<Sig, Obj>&((...args:PseudoKeys)=>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>&((...args:PseudoKeys)=>RecursiveObject<Sig, Obj>)&Array<RecursiveObject<Sig, Obj>>
}
}
function Block<Signature extends ValueSignature, Fields extends EnumBlock<Signature>>(options:Fields):()=>RecursiveObject<Signature, Fields>
{
return ()=>{
const list = ["@media(min-width:0px){"];
let pseudo = false;
let query = false;
const list = [];
let fieldLookup = {};
const proxyOuter = new Proxy(
function(...args)
{
console.log("outer: core call", ...args)
if(args.length)
{
list.push(`${(pseudo||query) ? "}" : ""} &:${args.join("::")}{`);
pseudo = true;
query = false;
return proxyOuter;
}
pseudo && list.push("}");
query && list.push("}");
pseudo = false;
query = false;
return list;
},
{
@ -30,7 +45,8 @@ function Block<Signature extends ValueSignature, Fields extends EnumBlock<Signat
const sizeCheck = parseInt(propName)
if(sizeCheck)
{
list.push(`}@media(min-width:${sizeCheck}px){`);
list.push(`${(query) ? "}" : ""} @media(min-width:${sizeCheck}px){`);
query = true;
return proxyOuter;
}
fieldLookup = options[propName];
@ -73,22 +89,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)=>{}]
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()
(styles()
.Pos.Abs
.Left(10)
[512]
("hover", "after")
.Pos.Rel
.Left.Auto
.Left(20)
[512]
.Left(100))
// internal stringification
console.log(userDeclaredStyleBlock().join("")+"}");
console.log(userDeclaredStyleBlock().join(""));
function Sheet<UserClasses extends Record<string, ReturnType<typeof styles>>>(userClasses:UserClasses):{[Class in keyof UserClasses]:string}
{