102 lines
2.9 KiB
TypeScript
102 lines
2.9 KiB
TypeScript
|
|
const typeface = {
|
|
sans: "sans serif",
|
|
serif: "Times New Roman"
|
|
};
|
|
const sizes = {
|
|
small: "1rem",
|
|
large: "3rem"
|
|
};
|
|
const colors = {
|
|
red: "#ff2200",
|
|
blue: "#0022ff"
|
|
};
|
|
const responsive = {
|
|
md: "min-width:767px",
|
|
lg: "min-width:1024px",
|
|
};
|
|
|
|
|
|
let sheet = {insertRule(_:string){}} as CSSStyleSheet;
|
|
if(globalThis?.document)
|
|
{
|
|
const sheetElement = document.createElement("style");
|
|
document.head.setAttribute("data-gale", "true");
|
|
document.head.appendChild(sheetElement);
|
|
sheet = sheetElement.sheet as CSSStyleSheet;
|
|
}
|
|
const styles = new Map<string, string>();
|
|
function Mapper<T extends Record<string, string>>(className:string, propertyName:string, lut:T)
|
|
{
|
|
const build =(propertyValue:string, customPropertyName?:string):string=>
|
|
{
|
|
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}; }`;
|
|
const rules = activeQuery.val ? `{ @media(${activeQuery.val})${body}}` : body
|
|
styles.set(selector, rules);
|
|
sheet.insertRule(selector + " " + rules);
|
|
}
|
|
return selector;
|
|
}
|
|
type UseCustom = (custom:string)=>string;
|
|
return new Proxy(((override:string)=>build(override)) as UseCustom,
|
|
{
|
|
get(_, prop){
|
|
|
|
return build(lut[prop as string], prop as string);
|
|
}
|
|
}
|
|
) as T & UseCustom;
|
|
}
|
|
function MapperQuery<T extends Record<string, string>>(lut:T)
|
|
{
|
|
type UseCustom = (custom:string)=>QueryInvoker;
|
|
return new Proxy(((override:string)=>Query(override, override)) as UseCustom,
|
|
{
|
|
get(_, prop:string){
|
|
return Query(lut[prop], prop)
|
|
}
|
|
}
|
|
) as Record<keyof T, QueryInvoker> & UseCustom;
|
|
}
|
|
|
|
|
|
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 = {key:key||amount, val:amount};
|
|
activeQueryStack.push(activeQuery);
|
|
return (...args)=> {
|
|
|
|
activeQueryStack.pop()
|
|
activeQuery = activeQueryStack.at(-1) || {key:false, val:false};
|
|
return args.join(" ");
|
|
}
|
|
}
|
|
|
|
export function config<T>(obj:T)
|
|
{
|
|
const CSS = {
|
|
Sheet()
|
|
{
|
|
const rules = [];
|
|
for(const [key, value] of styles.entries())
|
|
{
|
|
rules.push(key+value);
|
|
}
|
|
return rules.join("\n");
|
|
},
|
|
Face: Mapper("Face", "font-family", {...typeface, ...obj}),
|
|
Pad: Mapper("Pad", "padding", sizes),
|
|
Q: MapperQuery(responsive)
|
|
};
|
|
return CSS;
|
|
}
|
|
|
|
export default config({}); |