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

media query call stack

Browse Source
This commit is contained in:
Seth Trowbridge 2024-06-07 12:37:02 -04:00
parent 806d315670
commit 27780931d5
2 changed files with 14 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
gale.tsx
View File

@ -22,12 +22,12 @@ function Mapper<T extends Record<string, string>>(className:string, propertyName
{
const build =(propertyValue:string, customPropertyName?:string):string=>
{
const selector = `${className}-${(customPropertyName||propertyValue as string).replace(/[^a-zA-Z0-9]/g, "")}${activeQuery?"_"+activeQueryKey:""}`;
const selector = `${className}-${(customPropertyName||propertyValue as string).replace(/[^a-zA-Z0-9]/g, "")}${activeQuery.val?"_"+activeQuery.key:""}`;
const check = styles.get(selector);
if(!check)
{
const body = `{ ${propertyName}:${propertyValue}; }`;
styles.set(selector, activeQuery ? `{ @media(${activeQuery})${body}}` : body);
styles.set(selector, activeQuery.val ? `{ @media(${activeQuery.val})${body}}` : body);
}
return selector;
}
@ -53,16 +53,19 @@ function MapperQuery<T extends Record<string, string>>(lut:T)
) as Record<keyof T, QueryInvoker> & UseCustom;
}
let activeQuery:false|string = false;
let activeQueryKey:false|string = false;
let activeQuery:ActiveQuery;
type ActiveQuery = {key:string|false, val:string|false};
const activeQueryStack:ActiveQuery[] = [];
type QueryInvoker = (...args:string[])=>string
function Query(amount:string, key?:string):QueryInvoker
{
activeQuery = amount;
activeQueryKey = key||amount
activeQuery = {key:key||amount, val:amount};
activeQueryStack.push(activeQuery);
return (...args)=> {
activeQuery = false;
activeQueryKey = false;
activeQueryStack.pop()
activeQuery = activeQueryStack.at(-1) || {key:false, val:false};
return args.join(" ");
}
}

3
styler.tsx
View File

@ -1,7 +1,8 @@
import Gale from "./gale-custom.tsx";
const classes = Gale.Q.lg( Gale.Face.sans, Gale.Pad.small );
const classes = Gale.Q.lg( Gale.Face.sans, Gale.Q.md(Gale.Pad.large), Gale.Pad.small );
console.log(classes);
console.log(Gale.Sheet())