pseudo selectors working

This commit is contained in:
Seth Trowbridge 2025-10-21 13:06:06 -04:00
parent 1fb4a44b6b
commit de5ae48d56

38
main.ts
View File

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