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 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); const check = styles.get(selector);
if(!check) if(!check)
{ {
const body = `{ ${propertyName}:${propertyValue}; }`; const body = `{ ${propertyName}:${propertyValue}; }`;
styles.set(selector, activeQuery ? `{ @media(${activeQuery})${body}}` : body); styles.set(selector, activeQuery.val ? `{ @media(${activeQuery.val})${body}}` : body);
} }
return selector; return selector;
} }
@ -53,16 +53,19 @@ function MapperQuery<T extends Record<string, string>>(lut:T)
) as Record<keyof T, QueryInvoker> & UseCustom; ) 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 type QueryInvoker = (...args:string[])=>string
function Query(amount:string, key?:string):QueryInvoker function Query(amount:string, key?:string):QueryInvoker
{ {
activeQuery = amount; activeQuery = {key:key||amount, val:amount};
activeQueryKey = key||amount activeQueryStack.push(activeQuery);
return (...args)=> { return (...args)=> {
activeQuery = false;
activeQueryKey = false; activeQueryStack.pop()
activeQuery = activeQueryStack.at(-1) || {key:false, val:false};
return args.join(" "); return args.join(" ");
} }
} }

3
styler.tsx
View File

@ -1,7 +1,8 @@
import Gale from "./gale-custom.tsx"; 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(classes);
console.log(Gale.Sheet()) console.log(Gale.Sheet())